frontend-spec-writer
CommunityTurn requirements into complete UI specs.
Design & Creative#state management#frontend specification#ui component contracts#ux flow design#accessibility requirements#api integration mapping
AuthorGustavoGutierrez
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Frontend teams waste time translating product requirements into ambiguous screens, unclear components, and missing edge-case behavior; this skill produces a complete, implementation-ready frontend specification that removes that uncertainty.
Core Features & Use Cases
- Component contracts (props/events): Defines framework-neutral component inputs and outputs so teams know exactly what to build and how components communicate.
- End-to-end UX flows with edge cases: Maps happy paths, decision points, sad paths, and interaction edge cases (including loading, empty, error, and partial outcomes).
- State, API, and accessibility as explicit contracts: Clarifies local vs shared vs server state placement, lists consumed endpoints, and specifies keyboard/ARIA/focus expectations.
Quick Start
Use the frontend-spec-writer to design the UI specification for the feature described in your PRD, including the component tree, five-state behavior for each view, and the API integration map.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-spec-writer Download link: https://github.com/GustavoGutierrez/engineering-skills/archive/main.zip#frontend-spec-writer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.