skills.rest
GustavoGutierrez
GustavoGutierrezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-spec-writer

Generate framework-independent frontend specifications with UX flows, component hierarchies, and contracts.

Updated May 9, 2026
Search Tags:#state management#frontend specification#ui component contracts#ux flow design#accessibility requirements#api integration mapping
One-click install
npx skills add https://github.com/GustavoGutierrez/engineering-skills --skill frontend-spec-writer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-spec-writer
Source: https://github.com/GustavoGutierrez/engineering-skills/tree/main/skills/frontend-spec-writer
Command: npx skills add https://github.com/GustavoGutierrez/engineering-skills --skill frontend-spec-writer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about frontend-spec-writer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create frontend specifications from product requirements?▼

Frontend specifications are generated from product requirements by defining UX flows, component hierarchies, and component contracts. This process produces a framework-independent UI architecture detailing responsive behavior, state boundaries, and API integration mapping.

What is a UI component contract and how does it define props and events?▼

A UI component contract defines framework-neutral inputs and outputs so teams know exactly what to build. It specifies detailed props, events, state ownership, API consumption, accessibility requirements, and microinteractions for each component.

How do I map state management boundaries for frontend UI views?▼

State management boundaries are mapped by explicitly defining local, shared, and server state ownership. The specification clarifies where each state resides within the component hierarchy to ensure proper data flow and API integration.

Does this frontend specification approach work for any framework?▼

Yes, the frontend specification approach is completely framework-independent. It defines component contracts, UX flows, and state boundaries without relying on specific platforms, ensuring implementation-ready UI architecture for any tech stack.

What UX flow edge cases should a complete UI specification include?▼

A complete UI specification must include five UI states per view: loading, empty, error, partial, and success outcomes. It maps happy paths, decision points, and sad paths to cover all interaction edge cases.

How to specify accessibility requirements in a UI component specification?▼

Accessibility requirements are specified by defining keyboard navigation, ARIA attributes, and focus management expectations within component contracts. This ensures the frontend specification enforces required operational outputs for inclusive design.

Related Skills

Explore More Design & Creative Skills→
LumenWipeLumenWipe
3

prd

Create, update, or validate Product Requirements Documents from product ideas.

Official
Advanced
inpinitiinpiniti

codegen

Generate framework-ready code exports from json-render UI trees.

Community
Intermediate
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced
BumpyClockBumpyClock
1

ux-designer

Generate structured Markdown UX design documentation for pages, features, and design systems.

Community
Advanced