| name | create-component |
| description | CareMatch용 React 컴포넌트 생성. 고령자 친화적 접근성 규칙이 적용된 shadcn/ui 기반 컴포넌트를 생성합니다. 사용법 - "컴포넌트 생성해줘", "JobCard 컴포넌트 만들어줘" |
| allowed-tools | Read, Write, Glob |
Create Component Skill
CareMatch V3용 React 컴포넌트를 생성합니다.
컴포넌트 템플릿
// components/{category}/{ComponentName}.tsx
import { type FC } from 'react'
interface {ComponentName}Props {
// props 정의
}
/**
* {ComponentName} 컴포넌트
* @description [설명]
* @accessibility
* - 최소 폰트 16px
* - 버튼 최소 48px
*/
export const {ComponentName}: FC<{ComponentName}Props> = (props) => {
return (
<div className="text-lg">
{/* 구현 */}
</div>
)
}
접근성 규칙 (필수)
- 폰트: 최소 16px (
text-base 이상)
- 버튼: 최소 48x48px (
min-h-12 min-w-12)
- 색상 대비: 4.5:1 이상
- 아이콘: 반드시 텍스트 레이블과 함께
파일 위치
| 카테고리 |
경로 |
| 공통 |
components/common/ |
| 간병인 |
components/caregiver/ |
| 보호자 |
components/guardian/ |
| 채팅 |
components/chat/ |
| 레이아웃 |
components/layout/ |