modern-frontend-skill은(는) 무엇을 하나요?
코딩 에이전트가 모호한 UI 요청을 세련되고 프로덕션 품질의 프론트엔드로 변환하는 스킬입니다.
개요
이 스킬은 에이전트가 사용자의 추상적인 UI 설명을 구체적인 계획과 실행 가능한 코드로 변환하는 과정을 안내합니다. 컴포넌트 기반 아키텍처, 상태 관리, 스타일링 모범 사례를 강조합니다.
사용 방법
에이전트에게 다음을 제공하세요:
- 사용자 인터페이스 요구사항 (자연어로)
- 선호하는 프레임워크 (React, Next.js 등)
- 디자인 선호사항 (있는 경우)
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 유사한 AI 코딩 에이전트
워크플로우
- 요청 분석: 모호하거나 추상적인 UI 요청을 듣고 핵심 컴포넌트와 상호작용을 식별합니다.
- 계획 수립: 컴포넌트 트리와 데이터 흐름을 설명하는 구조화된 계획을 작성합니다.
- 구현: 계획을 기반으로 프로덕션 준비가 완료된 코드를 생성합니다. 반응형 디자인, 접근성, 성능 최적화를 포함합니다.
예시
- "간단한 할 일 목록을 만들어 줘" → 상태 관리 및 CRUD 작업이 포함된 완전한 컴포넌트
- "블로그 레이아웃이 필요해" → 반응형 헤더, 그리드, 푸터가 포함된 구조
구성
이 스킬은 사전 구성이 필요 없습니다. 설정 파일(.skill.json 또는 유사)을 통해 기본 동작을 재정의할 수 있습니다.
참고 사항
- 생성된 코드는 수동 검토가 권장됩니다.
- 복잡한 프로젝트에는 추가적인 에이전트 안내가 필요할 수 있습니다.
- 항상 최신 라이브러리 버전과 보안 관행을 따르세요.
라이선스
MIT