From figma-tools
.claude/plans/design/에 있는 Figma 구현 계획서를 기반으로 프로덕션 코드를 구현한다. figma-plan 또는 figma-reference-plan으로 계획서를 먼저 작성한 뒤 사용.
npx claudepluginhub window-ook/claude-code-lab --plugin figma-toolsThis skill uses the workspace's default tool permissions.
`.claude/plans/design/`에서 계획서를 읽고 계획서의 구현 순서에 따라 직접 코드를 구현한다.
Guides 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.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
.claude/plans/design/에서 계획서를 읽고 계획서의 구현 순서에 따라 직접 코드를 구현한다.
.claude/plans/design/ 경로의 계획서 파일이 언급될 때figma-plan 또는 figma-reference-plan으로 계획서가 이미 작성되어 있어야 함figma-plan 먼저 실행frontend-design.claude/plans/design/에서 해당 계획서를 Read로 읽는다.
계획서에 피그마 URL이 있으면 get_screenshot으로 시각적 기준점을 확보한다.
Figma MCP 출력(React + Tailwind)은 참고용. 이 프로젝트 기준으로 변환:
style.ts 파일로 분리)@/style의 color 토큰@/style의 typography 토큰@/common/components, @/ds/components) 재사용계획서의 "구현 순서" 섹션을 따라 파일을 생성/수정한다.
구현 완료 전 Figma 스크린샷과 비교:
style.ts 파일로 분리, .tsx에 직접 작성 금지.passthrough() 금지void 접두사useEffect 내부에서 setState 직접 호출 금지