FE TechSpec 문서 작성 템플릿과 패턴. Linear 프로젝트의 기술 명세서를 작성할 때 참조. Use when: TechSpec 작성, 기술 명세서 생성, Given/When/Then 테스트 케이스 정의, Acceptance Criteria 작성, Solution 설계 문서 작성 시 사용.
From tddnpx claudepluginhub seonghyeonkimm/my-claude-code-config --plugin tddThis skill uses the workspace's default tool permissions.
references/template.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
공통 가이드: techspec-common 스킬 참조 (Summary, Solution, AC, FR, Verification, 공통 실수)
관련 스킬: entity-object-pattern - 구현 시 반복되는 도메인 로직을 Entity Object로 그룹화하는 패턴
FE TechSpec은 프로젝트의 기술적 구현 방향을 정의하는 문서. PRD(요구사항)와 Figma(디자인)를 기반으로 Solution, Acceptance Criteria, Test Cases를 도출한다.
Summary → Solution → Acceptance Criteria → Non-Functional Requirements → Functional Requirements (Given/When/Then) → Design → Component & Code → Verification
전체 템플릿은 references/template.md 참조.
카테고리:
해당 프로젝트에 관련 없는 카테고리는 생략 가능.
테스트 케이스 기반으로 도메인 설계를 진행.
작성 순서:
get_design_context/get_variable_defs에서 추출, 없으면 테스트 케이스에서 도출데이터 모델 가이드:
constants/에 별도 정의 가능| 문제 | 원인 | 해결 |
|---|---|---|
| 클라이언트 Entity 과잉 설계 | API 응답을 재정의하려 함 | API 타입 기반 interface로 충분. 별도 Entity는 사유 필요 |
| UI 문구 가정 | Figma 미확인 | variants에서 실제 문구 추출 |
| Container/Presentational 혼합 | 하나의 컴포넌트가 Usecase 호출 + UI 렌더링 | Container(데이터 흐름)와 Presentational(Props/Callbacks)을 분리 |
| 모든 Props를 Interface Contract에 기록 | 과잉 명세 | 모듈 경계를 형성하는 핵심 인터페이스만 정의 |
| 규칙 중복 구현 | UI/API에서 같은 규칙을 각각 구현 | 구현 시 entity-object-pattern 스킬 참조 |
| FR에 Entity/Command 헤더 | 지침 오해 | Design에서만 사용, FR은 테이블만 |