| name | frontend-dev |
| description | Use when building UI components, implementing responsive layouts, auditing accessibility, or designing state management. Provides component spec, accessibility checklist, and state management templates. |
| compatibility | ["VS Code","Cursor","Windsurf","Claude Code"] |
| metadata | {"category":"Uncategorized","tags":["uncategorized"],"maturity":"beta","audience":["developers"]} |
| allowed-tools | ["bash","git","grep","find"] |
Frontend Development Skill
Use this skill when the task involves building UI components, implementing responsive designs, auditing accessibility compliance, or structuring client-side state.
When to Use
- Scaffolding a new UI component with props, states, and accessibility requirements
- Auditing a component or page against WCAG 2.1 AA
- Designing a state management structure for a feature
- Reviewing a frontend implementation for accessibility, performance, or correctness
How to Invoke
Reference this skill by attaching skills/frontend-dev/SKILL.md to your agent context, or instruct the agent:
Use the frontend-dev skill. Apply the component spec template and accessibility checklist to every component being built or reviewed.
Templates in This Skill
| Template | Purpose |
|---|
component-spec-template.md | Component specification: props, events, children, accessibility requirements, and all UI states |
accessibility-checklist.md | WCAG 2.1 AA checklist organized by perceivable, operable, understandable, and robust principles |
state-management-template.md | State structure template covering local state, shared state, async state, and error/loading patterns |
Agent Pairing
This skill is designed to be used alongside the frontend-dev agent. The agent drives the workflow; this skill provides the reference templates and audit checklists.
Frontend components consume API contracts defined by the backend-dev agent. Route data schema questions to the data-tier agent.
