plugin87/ux-ui-agent-skills

Accessibility Audit evaluates a UI or design against WCAG 2.2 and ARIA patterns, with criterion-referenced findings, severity, and fixes. Use it for contrast checks, keyboard and screen reader review, and POUR validation.

Apply Aesthetic maps a chosen visual direction or named design system into the token system. Use it when you need a specific look, brand feel, or premium finish while preserving accessibility.

Brand Kit generates a complete accessible brand foundation from a brief, including primitive, semantic, and component tokens plus a single theme.css. Use it when you need a new design system, palette, type scale, or themeable token set.

Design Code generates production-ready component code for a specific framework and styling system. Use it when you need accessible, token-driven UI code for a component or screen in React, SwiftUI, Vue, Flutter, or similar stacks.

Design Component produces a complete UI component specification with anatomy, variants, sizes, state coverage, token mapping, and accessibility guidance. Use it when designing or documenting a component at the spec level before or alongside code.

Design QA sets up automated and manual checks that prevent design regressions before release. Use it for token and hardcoded-value linting, axe and contrast checks, visual regression, and the manual accessibility checklist.

Design Review scores a UI across six weighted dimensions and Nielsen's heuristics, with prioritized findings and fixes. Use it to critique an existing screen, flow, or product before or after build.

Design Tokens generates and validates DTCG tokens with a three-tier primitive, semantic, and component structure. Use it to create palettes, scales, theming, and other design-system tokens or audit token files.

Figma Integration keeps Figma Variables and code tokens in sync in one chosen direction. It is used to publish tokens or components to Figma, extract design data back to code, and verify component parity and design-code drift.

Governance keeps a design system consistent as it grows. Use it to classify breaking, additive, or fix changes, manage contributions and deprecations, and record changelog updates.

Image To Code turns a reference image or screenshot into token-driven, accessible UI code. Use it when you want a design system inferred from a mockup and rebuilt with verification gates.

Migrate Design System maps tokens between your system and external design systems or component libraries. Use it when adopting another look, building on a foundation like shadcn/ui or Material 3, or bridging a migration with verified token overrides.

Performance optimizes UI loading, interaction responsiveness, and layout stability against Core Web Vitals. Use it to fix jank, reduce CLS, and make interfaces feel fast on low-end devices.

Prototype & Research moves an idea through the right fidelity level, from content-first to wireframe to code, with validation at each step. It also supports user-journey mapping and usability testing when you need to evaluate a flow or interface.

Redesign upgrades an existing website or app while preserving behavior. Use it to audit the current UI, remove generic design patterns, apply a chosen system, and verify accessibility and contrast.

Token Build turns DTCG token sources into platform artifacts like CSS variables, Tailwind @theme, JS/TS, and mobile theme files. Use it to generate token outputs, wire token CI, or validate token changes across platforms.

UX Writing writes or reviews interface copy for buttons, errors, empty states, labels, and notifications using the project's voice and tone rules. Use it when you need clearer UI text or a copy review.