krischoo-wemake-project-05-ui-styling-rule.ocm.json json {
"ocm": "1",
"id": "krischoo-wemake-project-05-ui-styling-rule",
"kind": "skill",
"name": "05-ui-styling",
"description": "Shadcn UI, Radix UI 및 Tailwind CSS 사용에 관한 규칙",
"publisher": "krischoo",
"version": "1.0.0",
"capabilities": {
"domains": [
"general"
],
"tags": [
"skill-md",
"github-cursor-rules"
],
"languages": [
"en"
]
},
"quality_prior": 0.6,
"examples": [
"Shadcn UI, Radix UI 및 Tailwind CSS 사용에 관한 규칙"
],
"primary": false,
"metadata": {
"source": {
"provider": "github-cursor-rules",
"repository": "https://github.com/krischoo/wemake_project",
"path": ".cursor/rules/05-ui-styling.mdc",
"ref": "80b9d2f782c84393da38e43ed6c90dd920a65151",
"url": "https://github.com/krischoo/wemake_project/blob/80b9d2f782c84393da38e43ed6c90dd920a65151/.cursor/rules/05-ui-styling.mdc",
"key": "krischoo/wemake_project/.cursor/rules/05-ui-styling.mdc"
},
"applies_to": "**/*.{ts,tsx,css}"
},
"instructions": "# UI 및 스타일링 규칙\n\n## 컴포넌트 라이브러리\n\n- Shadcn UI, Radix UI 및 Tailwind를 사용하여 컴포넌트와 스타일링을 구현하세요.\n- Radix UI에서 직접 임포트하지 마세요. 항상 Shadcn UI에서 UI 컴포넌트를 임포트하세요.\n\n## Tailwind CSS 사용\n\n- Tailwind의 반응형 디자인 원칙을 따르세요.\n- 가능한 경우 커스텀 CSS 대신 Tailwind의 유틸리티 클래스를 사용하세요.\n- Tailwind의 스케일을 사용하여 일관된 간격과 크기를 유지하세요.\n- Tailwind의 dark 변형을 사용하여 다크 모드를 구현하세요.\n\n## 디자인 시스템\n\n- 일관된 색상 팔레트를 사용하세요.\n- 타이포그래피 계층 구조를 유지하세요.\n- 접근성 가이드라인을 준수하세요 (충분한 대비, 키보드 탐색 등).\n- 반응형 디자인을 위해 모바일 우선 접근 방식을 사용하세요.\n\n## 컴포넌트 스타일링\n\n- 인라인 스타일을 피하고 Tailwind 클래스를 사용하세요.\n- 재사용 가능한 컴포넌트에는 변형(variants)을 구현하세요.\n- 복잡한 스타일링에는 Tailwind의 @apply 지시문을 사용하세요.\n- 애니메이션에는 T",
"cost": {
"context_tokens": 157
}
}
