Frontend Brief
Use this skill to turn a loose frontend request into an actionable brief before
designing, implementing, or delegating work.
Workflow
- Identify the product surface, user audience, main workflow, and success
criteria.
- Inspect relevant local UI, routes, components, styles, tests, and docs when
available.
- Determine source-of-truth inputs: existing UI, Figma context, Storybook,
design tokens, screenshots, product copy, or user instructions.
- List constraints: framework, component library, responsive breakpoints,
accessibility, performance, brand, data states, and browser support.
- Define acceptance criteria and verification: screenshots, browser checks,
tests, accessibility review, or AGY comparison when requested.
Output
Return a concise implementation brief:
- surface and audience
- source-of-truth inputs
- component and style constraints
- required states
- acceptance criteria
- verification plan
- open questions that materially affect implementation
Do not invent project-specific component APIs, design tokens, or Figma details.
1---2name: frontend-brief3description: Use when a frontend request is vague, new, screenshot-based, Figma-based, or needs audience, workflow, constraints, acceptance criteria, and verification scope before implementation.4---56# Frontend Brief78Use this skill to turn a loose frontend request into an actionable brief before9designing, implementing, or delegating work.1011## Workflow12131. Identify the product surface, user audience, main workflow, and success14 criteria.152. Inspect relevant local UI, routes, components, styles, tests, and docs when16 available.173. Determine source-of-truth inputs: existing UI, Figma context, Storybook,18 design tokens, screenshots, product copy, or user instructions.194. List constraints: framework, component library, responsive breakpoints,20 accessibility, performance, brand, data states, and browser support.215. Define acceptance criteria and verification: screenshots, browser checks,22 tests, accessibility review, or AGY comparison when requested.2324## Output2526Return a concise implementation brief:2728- surface and audience29- source-of-truth inputs30- component and style constraints31- required states32- acceptance criteria33- verification plan34- open questions that materially affect implementation3536Do not invent project-specific component APIs, design tokens, or Figma details.
seemseam