Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From frontend-excellence
Designs UI components with styling and design system implementation. Specify required component need and optional approach like design-system or mobile-first.
npx claudepluginhub dotclaude/marketplace --plugin frontend-excellenceHow this command is triggered — by the user, by Claude, or both
Slash command
/frontend-excellence:ui <component-need> [approach]sonnetThis command is limited to the following tools:
The summary Claude sees in its command listing — used to decide when to auto-load this command
# Ui Command Component design, styling, and design system implementation ## Arguments **$1 (Required)**: component-need **$2 (Optional)**: approach ## Examples Invoke the component-architect agent with: $ARGUMENTS
/design-componentGenerate a single component. Skips browsing. Uses existing design-system.md tokens + Gemini snippet_frontend. Fast path for isolated UI elements.
/frontend-designImplements high-quality UI components compliant with existing design systems like shadcn/ui and Tailwind, covering all states (hover, loading, error, empty).
/componentGenerates production-ready React UI components like buttons, cards, modals, forms with design system styles, accessibility, variants. Optional style like Material Design.
/refactor-uiRefactor existing UI component with modern design principles and design preset
/styleApplies styling to a component using the project's design system: base styles, interactions, responsiveness, dark mode, accessibility. Outputs structured summary with approach, tokens, and breakpoints.
/initInitializes guided UI design for dashboards, apps, and tools. Assesses intent, proposes styles with rationale, builds components, and offers to save patterns.
Share bugs, ideas, or general feedback.
Component design, styling, and design system implementation
$1 (Required): component-need
$2 (Optional): approach
/ui "Design button component variants" design-system
/ui "Create responsive navigation" mobile-first
Invoke the component-architect agent with: $ARGUMENTS