Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From master-claude
Produces polished frontend UIs by applying a curated set of design skills: tokens, layout patterns, accessible components, reference matching, and accessibility/design review.
How this command is triggered — by the user, by Claude, or both
Slash command
/master-claude:frontendmaster-claude/This command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
As MASTER CLAUDE, produce great frontend for: $ARGUMENTS Pick the right `skills/frontend/` members for what's being built — don't ship default-looking UI: 1. **Foundation** — `fe-design-system`: detect or set the tokens (color / type / spacing / radius / shadow / motion) **before** building, so the result looks designed, not default. 2. **Layout** — `fe-page-patterns`: start from the proven structure + hierarchy for this page type (landing, dashboard, auth, pricing, docs, table, form, …) and always design the empty / loading / error states too. 3. **Components** — `fe-component-craft...
As MASTER CLAUDE, produce great frontend for: $ARGUMENTS
Pick the right skills/frontend/ members for what's being built — don't ship default-looking UI:
fe-design-system: detect or set the tokens (color / type / spacing / radius / shadow /
motion) before building, so the result looks designed, not default.fe-page-patterns: start from the proven structure + hierarchy for this page type (landing,
dashboard, auth, pricing, docs, table, form, …) and always design the empty / loading / error states too.fe-component-craft: accessible (semantic HTML, ARIA, keyboard, visible focus, contrast),
every interaction state, responsive (mobile-first, clamp(), ≥ 44px targets), and the polish.fe-from-reference: a screenshot / brand / vibe → UI; pick the output channel (a
Claude artifact, the visualize show_widget, or canvas-design / theme-factory / algorithmic-art). Match the
style, never copy others' copyrighted text/images/logos — original assets only.fe-design-review: a picky design + a11y pass before shipping; findings as blocker/major/minor
with the fix.Reuse the best (shadcn/ui, Radix, Tailwind; the Anthropic design skills) — credit, don't vendor. Verify in a real preview when you can, not by eyeballing the code.
npx claudepluginhub aturzone/masterclaude/multi-frontendRuns a frontend-focused multi-model workflow (Research → Ideation → Plan → Execute → Optimize → Review) using Gemini as the primary authority for UI/UX tasks like component design, responsive layout, animations, and style optimization.
/multi-frontendOrchestrates a multi-model frontend workflow (Research, Ideation, Plan, Execute, Optimize, Review) with Gemini as lead, handling component design, responsive layout, animations, and style optimization.
/multi-frontendRuns a Gemini-led multi-model frontend workflow for UI tasks: component design, responsive layout, animations, and style optimization through Research → Ideation → Plan → Execute → Optimize → Review phases.
/frontend-designImplements high-quality UI components compliant with existing design systems like shadcn/ui and Tailwind, covering all states (hover, loading, error, empty).
/senior-frontend-developerAssumes role of senior frontend developer to assist with UI components, responsive layouts, performance optimization, accessibility, and frameworks like React, Vue, Angular, Svelte, Solid, Astro, or modern CSS.
/ux-designGenerates a premium frontend UI design or component from a brief, running a structured discovery protocol to gather brand, reference, and style direction before producing anti-AI-slop code.