Repository
plugin87/ux-ui-agent-skills agent skills
- skills
- 23
- GitHub stars
- 1.5k
GitHub description: “Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build instead of faking success.”
- Stars
- 1,543 (163 forks)
- Licence
- MIT
- Last push
- Oct 2026
- Created
- Mar 2026
- accessibility
- ai-agents
- claude
- claude-code
- claude-skills
- component-library
- design-system
- design-to-code
- design-tokens
- dtcg
- figma
- react
- tailwindcss
- ui
- ux
- wcag
Install all skills
npx skills add plugin87/ux-ui-agent-skillsAdd --skill <name> for a single skill and -a <agent> to choose the agent (see the agent guides).
Skills in plugin87/ux-ui-agent-skills, ranked
Ranked by score. Sort bymost stars,trending,newest,recently updated
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 1 | Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards. | plugin87/ | 1.5k | — | ~2.6k | Automated safety check: Pass | MIT | today |
| 2 | Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code. | plugin87/ | 1.5k | — | ~2.8k | Automated safety check: Pass | MIT | today |
| 3 | Creates a new design-product project from the kit's product-design template, then installs the engine folders and the Playwright dependency that the quality gates need. | plugin87/ | 1.5k | — | ~1.1k | Automated safety check: Pass | MIT | today |
| 4 | Audits a UI or design against WCAG 2.2 and ARIA patterns and returns findings with the criterion, severity and a specific fix for each. | plugin87/ | 1.5k | — | ~542 | Automated safety check: Pass | MIT | today |
| 5 | Applies a chosen visual direction, an archetype or one of 138 named design systems, by remapping design tokens, then checks contrast before it finishes. | plugin87/ | 1.5k | — | ~597 | Automated safety check: Pass | MIT | today |
| 6 | Builds a from-scratch brand design system as three-tier DTCG tokens plus one theme.css with light and dark modes, checked against WCAG contrast rules. | plugin87/ | 1.5k | — | ~809 | Automated safety check: Pass | MIT | today |
| 7 | Generates complete, accessible, token-driven UI component code for a chosen framework such as React with Tailwind, SwiftUI, Vue, Flutter or Jetpack Compose. | plugin87/ | 1.5k | — | ~1.7k | Automated safety check: Pass | MIT | today |
| 8 | 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. | plugin87/ | 1.5k | — | ~635 | Automated safety check: Pass | MIT | today |
| 9 | Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). | plugin87/ | 1.5k | — | ~517 | Automated safety check: Pass | MIT | today |
| 10 | 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… | plugin87/ | 1.5k | — | ~585 | Automated safety check: Pass | MIT | today |
| 11 | 11.Governance Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. | plugin87/ | 1.5k | — | ~613 | Automated safety check: Pass | MIT | today |
| 12 | 12.Grill Me Interrogate the brief before a line is built — ask only the questions whose answers change the work, and put every unasked decision on the record as a stated assumption. | plugin87/ | 1.5k | — | ~1.4k | Automated safety check: Pass | MIT | today |
| 13 | 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… | plugin87/ | 1.5k | — | ~900 | Automated safety check: Pass | MIT | today |
| 14 | 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… | plugin87/ | 1.5k | — | ~570 | Automated safety check: Pass | MIT | today |
| 15 | 15.Performance Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. | plugin87/ | 1.5k | — | ~541 | Automated safety check: Pass | MIT | today |
| 16 | 16.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. | plugin87/ | 1.5k | — | ~614 | Automated safety check: Pass | MIT | today |
| 17 | 17.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. | plugin87/ | 1.5k | — | ~713 | Automated safety check: Pass | MIT | today |
| 18 | 18.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… | plugin87/ | 1.5k | — | ~585 | Automated safety check: Pass | MIT | today |
| 19 | 19.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… | plugin87/ | 1.5k | — | ~658 | Automated safety check: Pass | MIT | today |
| 20 | 20.Critique Adversarial design critique of the current work — render it, look at it, and argue for rejection. | plugin87/ | 1.5k | — | ~1.3k | Automated safety check: Pass | MIT | today |
| 21 | Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. | plugin87/ | 1.5k | — | ~437 | Automated safety check: Pass | MIT | today |
| 22 | 22.Gate Run the one-command quality gate and report the real N/N result. | plugin87/ | 1.5k | — | ~532 | Automated safety check: Pass | MIT | today |
| 23 | 23.Ship Pre-release gate — run the full gate, responsive + render checks, then produce the release checklist (README badge/current/changelog). | plugin87/ | 1.5k | — | ~532 | Automated safety check: Pass | MIT | today |
Questions, answered from the data.
What is the best skill in plugin87/ux-ui-agent-skills?
Data-Dense Dashboard Designer from plugin87/ux-ui-agent-skills ranks first of the 23 skills in plugin87/ux-ui-agent-skills listed here, with the highest score: its repository has 1.5k GitHub stars, its SKILL.md loads about 2.6k tokens and it passes the automated safety check with no findings. Next come UI Component Spec Designer and Design Project Scaffold.
Are the skills in plugin87/ux-ui-agent-skills official?
None yet. All 23 skills in plugin87/ux-ui-agent-skills listed here come from community repositories; a skill counts as official when the product's own GitHub organization publishes it.
How do I install all skills from plugin87/ux-ui-agent-skills?
Run npx skills add plugin87/ux-ui-agent-skills in your project: the open-source skills CLI installs the repository's skills into your coding agent's skills folder. To install a single skill, open its page here for the exact command.
How are these skills ranked?
By Skill Navigator score, which combines the GitHub stars of the skill's repository (shared across that repo's skills and discounted for large collections), how many other GitHub owners carry a copy of the skill, and automated SKILL.md quality checks, minus penalties for safety-check warnings and for each further skill from the same repository. Skills that fail the safety check are not listed.