💻 개발/코딩
구성 요소 문서 생성기
해부학, props, 변형, 토큰 소비 맵, 사용 지침 및 접근성 사양을 갖춘 CLAUDE.md에 대한 완전한 구성 요소 문서를 생성합니다.
미리보기
AI 코딩 도우미에서 사용할 CLAUDE.md 파일에 대한 상세한 구성 요소 문서를 생성합니다.
각 구성 요소에 대해 다음을 생성합니다:
1. 개요: PascalCase 이름, 한 줄 설명, 카테고리(탐색/입력/피드백/레이아웃/데이터 표시)
2. 해부학: 시각적 부분(필수 vs 선택 사항), 중첩 규칙
3. Props 사양: 이름, 유형, 기본값, 허용되는 값, 설명, 예시
4. 시각적 변형: 토큰 값과 함께 크기/색상 변형; 모든 상태(기본, 호버, 포커스, 활성, 비활성, 로딩, 오류)와 변경되는 토큰
5. 토큰 소비 맵: 구성 요소 -> 구성 요소 토큰 -> 디자인 토큰 -> 원시 값(전체 체인)
6. 사용 지침: 언제 사용하고 언제 사용하지 않는지, 뷰포트당 최대 인스턴스, 콘텐츠 지침
7. 접근성: 필수 ARIA 속성, 키보드 상호 작용, 포커스 관리, 화면 판독기 동작, 대비 비율
8. 코드 예시: 실제 코드베이스 가져오기 경로 및 className 규칙을 사용하여 복사하여 붙여넣을 준비 완료
출력: CLAUDE.md에 직접 삽입할 수 있도록 구조화된 Markdown.
🔒 잠금 해제 후 전체 보기