# Frontend Spec Builder

> Frontend Spec Builder

- Skill: `kim-dh2417/frontend-spec-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add kim-dh2417/frontend-spec-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kim-dh2417/frontend-spec-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kim-dh2417 (https://skillmd.com/u/kim-dh2417)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/kim-dh2417/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`.