Frontend Spec Builder

Frontend Spec Builder

Overview

Use this skill for actual frontend development based on approved docs and prototype references.

The purpose is to turn document intent into real routes, components, pages, and UI behavior, not just placeholder screens.

Workflow

1. Read the source documents first.

• planning or requirements docs
• IA or route structure docs
• screen design docs
• approved prototype screens when they define the intended UI

2. Apply the frontend rule:

• 기획 -> 디자인 -> 개발 -> 검증
• If the request changes frontend behavior, update planning and design before code.

3. Build real frontend implementation.

• routes
• page components
• reusable UI components
• interaction flow
• local mock data only when backend is not available

4. Verify locally.

• run npm run build
• run npm run lint
• keep npm run dev available when UI review is needed
• use Playwright when browser confirmation helps

What This Skill Covers

• src/pages
• src/components
• src/layouts
• src/lib
• src/routes
• frontend state, validation, navigation, and interaction rules

What This Skill Does Not Cover

• backend API implementation
• database schema work
• auth server implementation
• queue, worker, or cron setup

If backend is required, use a backend-oriented workflow separately.

Output Pattern

When reporting progress, use this order:

1. planning docs updated
2. design docs updated
3. frontend code changed
4. verification results
5. commit/push status under ask-before-push rules

Notes

• This skill is for real frontend implementation.
• Placeholder-only prototype creation belongs in prototype-builder.