UX/UI Design

Plugin design from marketplace skill-marketplace in MattMakes/skill-marketplace. Commands read from the repo's manifest — 6 days ago.

Skills (34)

• a11y-audit

  Accessibility audit: scan, fix and verify WCAG 2.2 Level A and AA across React, Next.js, Vue, Angular, Svelte and plain HTML codebases, or audit a design, component or rendered page against WCAG 2.2 and ARIA patterns with measured contrast, returning criterion-referenced findings with severity and a

• apply-aesthetic

  Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific

• brandkit

  Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + t

• critique

  Adversarial design critique of the current work — render it, look at it, and argue for rejection. With `rams` as the first argument it is a Dieter Rams lens instead, scoring the work 0–3 on Rams' ten \"Good design is...\" principles with cited evidence, reading a NEW / REFINE / REDESIGN verdict off

• data-dashboard

  Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation matrix, donut, gauge, sparklines, heatmaps and order books. Use when the request is a dashboard, terminal, mon

• design-code

  Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or scre

• design-component

  Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For g

• design-doctrine

  The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, co

• design-md

  Author, lint, diff and export a DESIGN.md design-token spec (Google's design.md format) for a codebase, sourced from a brand doc, a live URL, the codebase itself or a template gallery. Use when creating, editing, or validating DESIGN.md files, design tokens, DTCG token specs, Tailwind theme exports,

• design-qa

  Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.

• design-review

  Review or audit a product design, feature, site or screen. The full review walks through it as a first-time user, answers 13 design questions, runs Nielsen's 10 heuristics and builds an HTML report with before/after fixes for the top 3 issues, optionally deployed to Surge. The scored review rates 6

• design-screen

  Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for \"design a landing page\", \"build a settings screen\", \"make me a website\", \"design the onboarding\", \"ออกแบบหน้าเว็บ\", \"ทำหน้า landing\", \"ออกแบบ UI\", \"ทำแอป\". It run

• design-tokens

  Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component), and the theming and component architecture built on them. Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, light/dark

• emil-design-eng

  Emil Kowalski's design-engineering philosophy as a reference: an animation decision framework (whether, why, easing, duration), spring configs, component-building rules (responsive buttons, origin-aware popovers, interruptible transitions, @starting-style), CSS transform and clip-path patterns, perf

• figma-integration

  Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up to

• frontend-design

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

• gate

  Run the one-command quality gate and report the real N/N result. Use before claiming any build/review is done.

• governance

  Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenti

• hallmark

  Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.

• image-to-code

  Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/scree

• impeccable

  Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding,

• make-interfaces-feel-better

  Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.

• migrate-design-system

  Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-sys

• performance

  Optimize UI performance against Core Web Vitals (LCP, INP, CLS) for page experience and search ranking, with thresholds, per-metric causes and fixes, loading and code-split strategy, layout-shift prevention, animation performance rules, and lab and field measurement. Use when the user wants to impro

• plan-design-review

  Review implementation plans and specs for design quality before coding. Use when a plan needs UI/UX critique, missing state coverage, AI-slop detection, responsive/accessibility checks, or unresolved design decisions.

• prototype

  Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

• redesign

  Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

• review-animations

  Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy, with ten non-negotiable standards, escalation triggers, a remedial hierarchy and a findings-table plus Block/Approve verdict. Default to flagging; approval is earned. Use when asked

• scaffold-project

  Scaffold a new design-product project that matches the recommended Claude Code layout (the reference structure). Use when starting a fresh product/app that will be built with this design system.

• screen-reader-testing

  Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support.

• token-build

  Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme

• ui-ux-pro-max

  UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Se

• ux-writing

  Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text

• web-design-guidelines

  Review UI code for compliance with the Vercel Web Interface Guidelines, a terse checklist covering accessibility, focus states, forms, animation, typography, layout, color, and performance for product UI, and report findings as file:line. Use when asked to review UI code against a design checklist,

Subagents (1)

• design-critic

  Adversarial senior design critic. Renders the work, looks at it, and argues for rejection. Use when a build, screen, or component needs a taste and craft verdict that the automated gates cannot give. Runs after the gates are green, never instead of them.

Similar plugins