apex-quick
CommandQuick Flow for simple fixes - Single expert handles explore, code, review, and validate in one pass. Inspired by BMAD Barry.
@fusengineInstall CommandDevelopment
Command
/design-component
Generate a single component using existing design-system.md tokens. Skips inspiration browsing — fast path for isolated UI elements.
$ npx -y skills add fusengine/claude-plugins --agent claude-code
Command definition
design-component.mdname: design-component
description: "Generate a single component using existing design-system.md tokens. Skips inspiration browsing — fast path for isolated UI elements."
/design:component — Single Component (COMPONENT scope)
Generate one UI component using existing design tokens.
**Complete documentation**: `skills/design-web/SKILL.md` (or `skills/design-webapp/SKILL.md` for an app-specific pattern like a data table or command palette).
Usage
/design:component pricing card with 3 tiers
/design:component testimonial carousel
/design:component data table with sorting
Prerequisites
`design-system.md` must exist at project root. If missing, use `/design` instead.
Workflow
1. Read `design-system.md` — this is the single source of truth for tokens. 2. No inspiration browsing (COMPONENT scope skips it per `design-method`'s routing table). Optionally search `skills/design-web/references/21st-dev.md` or `shadcn.md` for pattern inspiration. 3. Generate the component directly as HTML/CSS from `design-system.md` tokens, following `skills/design-web/references/component-variants-ref.md` for size/state/color variants. 4. Read `skills/design-motion/SKILL.md` — gate micro-interactions; mandatory hover/focus/disabled states regardless. 5. Read `skills/design-review/SKILL.md`, component-scoped: contrast, forbidden fonts, OKLCH-only, all states present, light+dark screenshot of the component in isolation.
Forbidden
Creating a new `design-system.md`. Inspiration browsing (use the search tools above instead). Skipping light+dark validation.
Read more
name: design-component description: "Generate a single component using existing design-system.md tokens. Skips inspiration browsing — fast path for isolated UI elements."
/design:component — Single Component (COMPONENT scope)
Generate one UI component using existing design tokens.
**Complete documentation**: `skills/design-web/SKILL.md` (or `skills/design-webapp/SKILL.md` for an app-specific pattern like a data table or command palette).
Usage
/design:component pricing card with 3 tiers /design:component testimonial carousel /design:component data table with sorting
Prerequisites
`design-system.md` must exist at project root. If missing, use `/design` instead.
Workflow
1. Read `design-system.md` — this is the single source of truth for tokens. 2. No inspiration browsing (COMPONENT scope skips it per `design-method`'s routing table). Optionally search `skills/design-web/references/21st-dev.md` or `shadcn.md` for pattern inspiration. 3. Generate the component directly as HTML/CSS from `design-system.md` tokens, following `skills/design-web/references/component-variants-ref.md` for size/state/color variants. 4. Read `skills/design-motion/SKILL.md` — gate micro-interactions; mandatory hover/focus/disabled states regardless. 5. Read `skills/design-review/SKILL.md`, component-scoped: contrast, forbidden fonts, OKLCH-only, all states present, light+dark screenshot of the component in isolation.
Forbidden
Creating a new `design-system.md`. Inspiration browsing (use the search tools above instead). Skipping light+dark validation.
Stats
36
Stars
6
Forks
Active
Maintenance
CSS
Language
MIT
License
Last commit
Created
Ships withfusengine-claude-plugins
A plugin ecosystem that turns Claude Code into a supervised, multi-agent development environment.
34200 skills40 agents
Stars on GitHub
Momentum
- stars in total
- 34
Other commands on fusengine-claude-plugins.
@fusengineInstall Commandapex
CommandAPEX Methodology - The systematic Analyze-Plan-Execute-eLicit-eXamine approach for intelligent development. Reduces hallucination…
@fusengineInstall Commandcleanup-context
CommandMemory optimization - removes duplicates, consolidates knowledge, and cleans memory banks for better performance.
@fusengineInstall Commandcreate-pull-request
CommandAuto-generate Pull Request with comprehensive description, test plan, and changelog. Uses gh CLI for creation.
@fusengineInstall Commanddeep-code-analysis
CommandComprehensive codebase investigation using research-expert for documentation, explore-codebase for structure, and deep analysis.…
@fusengineInstall Commandepct
CommandSystematic Explore-Plan-Code-Test methodology for structured development. Ensures comprehensive approach to feature…
@fusengineInstall CommandMore commands from other plugins.
Auto-invoked
Auto-invoked
build
CommandImplement tasks incrementally — build, test, verify, commit. Add "auto" to run the whole plan in one approved pass.
@addyosmaniInstall Command