UX UI Agent Skills plugin for Grok Build
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.
How to install UX UI Agent Skills in Grok Build
grok plugin install plugin87/ux-ui-agent-skills --trustReview before you trust it. --trust lets this plugin's hooks, MCP servers and scripts run code on your computer. It's a community repo that neither xAI nor GrokStacks has reviewed, so read its code first.
We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Command format: Grok Build's plugin guide
What we checked: on Oct 18, 2026 it installed with grok 1.0.62 and Grok found 25 skills, 1 slash command, 1 subagent. That's an install check only: we haven't run it in a live Grok session.
What it contains
Skills (25)
a11y-audit— Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review,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 ibrandkit— 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 wancritique— Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.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 orddesign-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. Usedesign-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, modesign-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 thisdesign-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 redesign-review— Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, ordesign-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", "ออกแบบหน้าเว็บ", "ทdesign-tokens— Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wantsfigma-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 togate— 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, setgrill-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.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 witmigrate-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 thperformance— Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitalsprototype— 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 aredesign— 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,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.ship— Pre-release gate — run the full gate, responsive + render checks, then produce the release checklist (README badge/current/changelog). Use before tagging a release.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 DTCux-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
Hooks (1)
hooks— PostToolUse, SessionStart, Stop
About this listing
UX UI Agent Skills is a community plugin on GitHub by plugin87, written as a Claude Code plugin that Grok Build installs. We install-checked it in Grok; we haven't run it in a live session or reviewed its code. When we installed it, Grok found 25 skills, 1 hook. Its license is MIT. We checked commit 62092bd83bc3. It's one of 144 listings in the Design category on GrokStacks.
Stacks Weekly: every new Grok Build and Codex plugin, every Tuesday.
One short email for GrokStacks and CodexStacks readers, with each new plugin's install line and what it ships. Subscribe and get the free starter list: 20 Grok Build plugins worth installing first.
You'll get a confirmation email first. Unsubscribe anytime.
UX UI Agent Skills FAQ
How do I install UX UI Agent Skills in Grok Build?
Run grok plugin install plugin87/ux-ui-agent-skills --trust. We install-checked this command in Grok Build. We install this repo directly: Grok Build 1.0.62 can't install it through its own marketplace file. Then start a new Grok session, or press r in /plugins, to load it.
Is UX UI Agent Skills an official Grok Build plugin?
No. UX UI Agent Skills is a community plugin on GitHub by plugin87, not in xAI's official Grok Build marketplace. We checked that it installs and what Grok loads from it, but haven't run it in a live Grok session or reviewed its code.
What does UX UI Agent Skills include?
According to what Grok loaded in our install check, UX UI Agent Skills includes 25 skills, 1 hook: a11y-audit, apply-aesthetic, brandkit, critique, data-dashboard, design-code….
Details
- Type
- Plugin
- Category
- Design
- Source
- Community Claude Code plugin, installs in Grok
- License
- MIT
- Author
- plugin87
- Version
- 2.9.8
- Keywords
- accessibility, ai-agents, claude, claude-code, claude-skills, component-library, design-system, design-to-code, design-tokens, dtcg, figma, react
- Source repo
- https://github.com/plugin87/ux-ui-agent-skills
- Checked commit
62092bd83bc3- Homepage
- https://plugin87.github.io/ux-ui-agent-skills/
- Checked by GrokStacks
- Install-checked in Grok Build on Oct 18, 2026; not run in a live session
Something wrong or missing? Submit or improve this listing. Marketplace listings also refresh automatically every night.
For maintainers: badge and embeds
Maintain UX UI Agent Skills? Add the badge; it links to this page.
Markdown
[](https://grokstacks.com/p/ux-ui-agent-skills/)HTML
<a href="https://grokstacks.com/p/ux-ui-agent-skills/"><img src="https://grokstacks.com/badge.svg" alt="Listed on GrokStacks" width="164" height="28"></a>Embed card (static HTML and inline CSS, no JavaScript). Preview:
<a href="https://grokstacks.com/p/ux-ui-agent-skills/" style="display:block;max-width:380px;box-sizing:border-box;padding:14px 16px;border:1px solid #2a2e3c;border-radius:12px;background:#0a0b0f;color:#e8eaf0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-decoration:none"><span style="display:block;font-size:16px;font-weight:700;color:#e8eaf0">UX UI Agent Skills</span><span style="display:block;margin:2px 0 8px;font-size:12px;color:#9aa0b1">Community plugin for Grok Build · 25 skills, 1 hook</span><span style="display:block;margin:0 0 10px;color:#c9cdd8">Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems…</span><span style="font-size:12px;font-weight:600;color:#7c9cff">View on GrokStacks →</span></a>Markdown summary
**[UX UI Agent Skills on GrokStacks](https://grokstacks.com/p/ux-ui-agent-skills/)**: Community plugin for Grok Build with 25 skills, 1 hook. Install: `grok plugin install plugin87/ux-ui-agent-skills --trust`More on badges, embeds and keeping your listing up to date: GrokStacks for plugin authors.
Also in Design
3dicon
One prompt in, a looping animated 3D icon out — with real transparency. A Claude Code skill.
3dviz Pro Max
Agent skill for creative 3D visualization: turn an idea into a Three.js/Blender scene worth exploring. Claude Code + Codex plugin, 223 recipes, 440 knowledge records, 22 proved kits, 37 runnable studies.
Adobe Premiere Pro MCP
Adobe Premiere Pro MCP. Tools for AI-driven video editing via MCP, for Codex, Claude, and other MCP clients.
Agent Sprite Forge
Agent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.
Agent Storyboard
本地优先的 Agent 视频分镜工作台：让 Codex、Claude Code 通过 MCP 写分镜、生成图片/视频素材和配音，并自动回填。Local-first storyboard workbench for AI agents (Codex, Claude Code).
AI Business Skills
138 bilingual AI marketing skills (69 VN + 69 Global) for Claude Code, OpenCode, Codex, VS Code. Four role SOP packs — content, design, performance, leader ops — plus strategy, personal brand, AI avatar, dropshipping, design master, knowledge library. 4 regions (US/EU/SEA/LATAM) + Vietnam 2025-2026. Companion: opa-kit.