sveltekit-shadcn-guidline
shadcn-svelte 가이드
shadcn-svelte는 TypeScript, Tailwind CSS, Bits UI 기반의 접근성 높은 Svelte/SvelteKit 컴포넌트 모음이다. CLI로 컴포넌트를 설치하고 소스를 직접 수정할 수 있다.
사용 원칙
이 스킬의 주 목적은 화면 구성 시 알맞은 컴포넌트를 선택하고 올바르게 사용하도록 돕는 것이다. 아래 컴포넌트 목록을 참고해 작업에 적합한 컴포넌트를 추천하고 코드를 작성한다.
컴포넌트를 실제로 추가해야 할 때는 아래 "컴포넌트 설치" 절차를 따른다.
컴포넌트 설치
1. shadcn-svelte 설정 확인
컴포넌트를 추가하기 전에 작업공간에 shadcn-svelte가 초기화되어 있는지 확인한다:
More from dev-goraebap/sveltekit-skills
server-architecture
SvelteKit 서버 레이어 아키텍처 가이드라인. Active Record 도메인 모델, Query Service, REST API 패턴, 서브도메인 기반 스키마 조직을 정의한다. SvelteKit 프로젝트에서 서버 코드를 작성하거나 구조를 잡을 때 참고한다.
4html-prototype
>
1media-storage
파일 업로드·저장소·첨부 관리 패턴. Actions: 파일 업로드, 이미지 업로드, 파일 처리, 저장소 연동, 썸네일 첨부, 색상 추출, file upload, image upload, storage, attachment, thumbnail. Patterns: Active Storage, blobs 테이블, attachments 테이블, 다형적 첨부, 중복 파일 감지. Storage: Cloudflare R2, AWS S3, @aws-sdk/client-s3, UUID key, 2-level 디렉토리, CDN URL, presigned URL. DB: Drizzle ORM, blob, checksum, MD5, metadata JSON, MIME, byte_size. Color: 지배적 색상 추출, dominant color, Gemini API, hex, blobs.metadata. Query: 썸네일 조회, 서브쿼리, leftJoin, view-model, CDN URL 변환.
1agent-wiki
>
1vscode-claude-notify
VSCode Claude 익스텐션은 알림 hook이 Windows/macOS 모두에서 발화하지 않는 알려진 버그가 있다. 이 스킬은 OS 네이티브 알림(Windows BalloonTip, macOS 알림 센터)으로 우회하여 작업 완료·오류 발생 시 알림을 받을 수 있도록 hooks를 설정한다. 사용자가 'Claude 알림 설정', '작업 완료 알림', 'VSCode 알림 안 와요', 'hooks 알림', 'Claude 끝나면 알려줘' 등을 언급하면 이 스킬을 사용한다. Windows(WSL 포함)와 macOS 모두 지원한다.
1screen-design-doc
>
1