# Frontend Brief

> Use when a frontend request is vague, new, screenshot-based, Figma-based, or needs audience, workflow, constraints, acceptance criteria, and verification scope before implementation.

- Skill: `seemseam/frontend-brief` (Agent Skill)
- Install (CLI): `npx skillmds@latest add seemseam/frontend-brief`
- Raw SKILL.md: https://api.skillmd.com/api/skills/seemseam/frontend-brief/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: seemseam (https://skillmd.com/u/seemseam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/seemseam/frontend-brief

---


# Frontend Brief

Use this skill to turn a loose frontend request into an actionable brief before
designing, implementing, or delegating work.

## Workflow

1. Identify the product surface, user audience, main workflow, and success
   criteria.
2. Inspect relevant local UI, routes, components, styles, tests, and docs when
   available.
3. Determine source-of-truth inputs: existing UI, Figma context, Storybook,
   design tokens, screenshots, product copy, or user instructions.
4. List constraints: framework, component library, responsive breakpoints,
   accessibility, performance, brand, data states, and browser support.
5. 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.