Agent skill
faion-dev-frontend
UI design: brainstorming, prototyping, Storybook. Triggers: ui design, component library.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/faion-dev-frontend
SKILL.md
UI Design Skill
Communication: User's language. Code: English.
Agents
| Agent | Purpose |
|---|---|
| faion-frontend-brainstormer-agent | Generate 3-5 design variants |
| faion-storybook-agent | Setup/maintain Storybook |
| faion-frontend-component-agent | Develop components with stories |
Workflow
Requirements → Brainstorm (3-5 variants) → User selects → Refine → Storybook → Components
Phase 1: Requirements
AskUserQuestion([
{"question": "Type?", "options": ["Landing", "Dashboard", "Form", "Components"]},
{"question": "Style?", "options": ["Minimalist", "Bold", "Corporate", "Playful"]},
{"question": "Tech?", "options": ["HTML/CSS", "React+TS", "Vue", "Next.js"]}
])
Phase 2: Brainstorming
Task(
subagent_type="faion-frontend-brainstormer-agent",
prompt=f"""Create 3-5 DISTINCT design variants for: {requirements}
Tech: {tech}, Style: {style}
Each variant: unique aesthetic, working code, rationale"""
)
Output: designs/variant-{N}-{name}/
Phase 3: Selection & Refinement
User picks variant → Skill("frontend-design") to refine → iterate until approved
Phase 4: Storybook
Task(
subagent_type="faion-storybook-agent",
prompt=f"Setup Storybook for {project}. Design: {approved_design}"
)
Phase 5: Components
Task(
subagent_type="faion-frontend-component-agent",
prompt=f"Develop {component_name} with story file"
)
Structure:
src/components/{Name}/
├── {Name}.tsx
├── {Name}.stories.tsx
├── {Name}.module.css
└── index.ts
Design Tokens
// tokens/
colors = { primary: {...}, semantic: {success, error, warning} }
typography = { fontFamily, fontSize, fontWeight }
spacing = { 0, 1, 2, 4, 8, 16 }
Storybook Commands
npm run storybook— dev servernpm run build-storybook— static build
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?