shadcn-first은(는) 무엇을 하나요?
이 코드는 당신 이후에도 누군가가 유지보수합니다. 직접 작성한 div와 클래스, style={{}} 하나하나는 계속 유지해야 할 무언가이며, 시간이 지나면서 점점 더 벗어나게 됩니다. 또한 수작업 UI는 라이브러리에서 무료로 제공하는 다음 요소들을 조용히 놓치게 됩니다: 포커스 링, 호버 및 활성화 상태, 키보드 탐색, 스켈레톤, 빈 상태, ARIA.
순서. 절대 단계를 건너뛰지 마십시오.
- 블록.
ui.shadcn.com/blocks에는 전체 사이드바, 대시보드, 로그인, 데이터 테이블이 있습니다. 블록을 설치하십시오. - 컴포넌트. 블록이 맞지 않으면 레지스트리의 컴포넌트를 사용하십시오.
- 조합 두세 개의 컴포넌트를 조합하십시오.
- 직접 작성. 여기서만 직접 작성하며, 커밋 메시지에는 어떤 블록이나 컴포넌트를 평가했고 왜 맞지 않았는지 밝혀야 합니다.
디자인을 컴포넌트에 맞추십시오. 컴포넌트를 디자인에 맞추지 마십시오. 브랜드와 시각 언어는 하나의 테마에 있는 테마 변수를 통해 표현되며, 컴포넌트 옆에 화면별 CSS를 추가하지 않습니다.
도구 및 사용법
두 개의 MCP 서버가 구성되어 있습니다. 각각 다른 작업을 수행합니다.
shadcn-official (npx shadcn@latest mcp)은 프로젝트를 인식합니다: 저장소의 components.json을 읽습니다. 실제 작업에는 이것을 사용하십시오.
| 도구 | 사용 목적 |
|---|---|
get_project_registries | 프로젝트가 초기화되었는지 확인 |
search_items_in_registries | 작업에 맞는 컴포넌트를 퍼지 검색으로 찾기 |
list_items_in_registries | 사용 가능한 모든 항목 보기 |
view_items_in_registries | 사용 전에 컴포넌트의 실제 소스와 종속성 읽기 |
get_item_examples_from_registries | API를 추측하지 않고 실제 사용 예제 복사 |
get_add_command_for_items | 정확한 npx shadcn add … 명령어를 얻고 실행 |
get_audit_checklist | 코드 작성 후 실행. 이것이 게이트입니다. |
shadcn (@jpisnice/shadcn-ui-mcp-server)은 레지스트리 전체를 대상으로 하며 블록과 테마를 알고 있습니다: list_blocks, get_block, list_themes, get_theme, get_component_demo. 1단계와 테마 작업에 사용하십시오.
프로젝트에 components.json이 없으면 공식 도구에서 오류가 발생합니다. 먼저 npx shadcn@latest init을 실행한 후 계속 진행하십시오.
AI 채팅 인터페이스에는 prompt-kit (prompt-kit.com, shadcn 호환)를 사용하십시오: chat-container, message, prompt-input, scroll-button, markdown, code-block, loader. 같은 규칙을 따르며, 직접 다시 만들지 말고 설치하십시오.
사람들이 설치 대신 다시 만드는 컴포넌트들
sidebar (접을 수 있고 하단에 사용자 메뉴 포함), command (Cmd+K 팔레트), table + TanStack 데이터 테이블 블록, tabs, sheet, dialog, alert-dialog, popover, tooltip, skeleton, sonner (토스트), form (react-hook-form + zod), breadcrumb, resizable, scroll-area, avatar, badge, separator, dropdown-menu, select, collapsible, chart.
이 중 하나를 직접 만들고 있다면 멈추고 설치하십시오.
키보드 단축키
명령 팔레트에는 Cmd+K를 사용하십시오. 이것은 command 컴포넌트에 포함된 cmdk 규칙입니다. Cmd+L은 브라우저 주소 표시줄에 예약되어 Chrome에서 안정적으로 가로챌 수 없습니다. 누군가 Cmd+L을 요청하면 Cmd+K를 바인딩하고, Cmd+L은 기회가 되면 추가하되 그 이유를 설명하십시오.
완료는 주장이 아닌 측정입니다
완료를 보고하기 전에 get_audit_checklist를 실행하고 다음 숫자를 보고하십시오:
- 제거된 커스텀 UI 라인 수
- 설치된 블록 및 컴포넌트 수
- 남아있는
style={{}}발생 횟수 (grep -rc 'style={{' src/) - 화면별:
components/ui/요소 vs 수작성 요소 수
여전히 수작업으로 작성된 부분은 간과되지 않고 명시된 이유와 함께 남아 있어야 합니다. 스크린샷은 화면이 렌더링된다는 증거이고, 숫자는 규칙이 준수되었다는 증거입니다. 둘 다 있어야 완료입니다.
하지 말아야 할 것
- UI에 이모지 사용 금지. 실제 SVG 아이콘 사용 (Lucide는 shadcn과 함께 제공됨).
- 브랜드 로고에 원 안에 텍스트 넣지 않음. 실제 SVG 경로 출처: SimpleIcons > svgl.app > gilbarbara/logos > 파비콘.
- 최대 한두 개의 악센트 색상. 카드에 색상이 있는 왼쪽 테두리 금지. 모든 요소에 그라데이션 금지.
- 색상을 변경하기 위해 컴포넌트를 포크하지 마십시오. 테마 변수를 변경하십시오.