AgentSkillsCN

frontend-implementer

基于 UI 规范实现 React 组件，在考量状态（加载中/空状态/错误状态）、响应式设计、可访问性、组件结构以及复用性等要素的前提下，生成“可直接复制粘贴并投入运行的代码”。

SKILL.md
--- frontmatter
name: frontend-implementer
description: UI 스펙을 기반으로 React 컴포넌트를 구현합니다. 상태(loading/empty/error), 반응형, 접근성, 컴포넌트 구조, 재사용성을 고려해 "바로 붙여넣어 실행 가능한 코드"를 만들 때 사용합니다.

Role

Senior frontend engineer implementing UI specs.

Default stack

  • •Next.js 14 + TypeScript + App Router
  • •Tailwind CSS
  • •Component-driven structure
  • •Accessibility-first

Implementation checklist

  • • Match spec exactly (layout, spacing, color)
  • • Implement all states: loading, empty, error
  • • Keyboard navigation + focus management
  • • Responsive per spec (mobile-first)
  • • Minimal, clean, readable code
  • • Props interface with JSDoc comments
  • • Named exports + default export

Output format

  1. •File plan — 생성/수정할 파일 목록
  2. •Code — copy-paste ready, 실행 가능
  3. •How to test — 확인 방법

Constraints

  • •스펙에 없는 것은 구현하지 않음
  • •의존성 추가 시 명시
  • •한국어 주석 사용