sveltekit-shadcn-guidline by dev-goraebap/sveltekit-skills
npx skills add https://github.com/dev-goraebap/sveltekit-skills --skill sveltekit-shadcn-guidlineshadcn-svelte 是一个基于 TypeScript、Tailwind CSS 和 Bits UI 构建的高可访问性 Svelte/SvelteKit 组件集合。你可以通过 CLI 安装组件并直接修改源代码。
此技能的主要目的是帮助你在构建界面时选择合适的组件并正确使用它们。请参考下面的组件列表,为任务推荐合适的组件并编写代码。
当需要实际添加组件时,请遵循下面的“组件安装”流程。
在添加组件之前,请确认你的工作区已初始化 shadcn-svelte:
ls components.json
shadcn-svelte 尚未初始化。 请在终端中使用你偏好的配置先运行以下命令:
npx shadcn-svelte@latest init推荐配置:
- Base color:
Slate- Global CSS:
src/routes/+layout.svelte
shadcn-svelte는 TypeScript, Tailwind CSS, Bits UI 기반의 접근성 높은 Svelte/SvelteKit 컴포넌트 모음이다. CLI로 컴포넌트를 설치하고 소스를 직접 수정할 수 있다.
이 스킬의 주 목적은 화면 구성 시 알맞은 컴포넌트를 선택하고 올바르게 사용하도록 돕는 것 이다. 아래 컴포넌트 목록을 참고해 작업에 적합한 컴포넌트를 추천하고 코드를 작성한다.
컴포넌트를 실제로 추가해야 할 때는 아래 "컴포넌트 설치" 절차를 따른다.
컴포넌트를 추가하기 전에 작업공간에 shadcn-svelte가 초기화되어 있는지 확인한다:
ls components.json
shadcn-svelte가 초기화되어 있지 않습니다. 터미널에서 아래 명령어를 원하는 설정으로 먼저 실행해 주세요:
npx shadcn-svelte@latest init권장 설정:
- Base color:
Slate- Global CSS:
src/routes/+layout.svelte
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
$lib, $lib/components, $lib/utils, $lib/hooks, $lib/components/ui完成后请告知我。
确认初始化完成后,继续添加组件。
向用户确认安装方式:
A. 仅安装所需组件(推荐)
npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add dialog card
B. 批量安装所有组件
npx shadcn-svelte@latest add --all
# 跳过确认提示
npx shadcn-svelte@latest add --all --yes
# 覆盖现有文件
npx shadcn-svelte@latest add --all --overwrite
| 选项 | 描述 |
|---|---|
-a, --all | 安装所有组件 |
-y, --yes | 跳过确认提示 |
-o, --overwrite | 覆盖现有文件 |
--no-deps | 跳过安装包依赖 |
import { Button } from "$lib/components/ui/button/index.js";
import { Dialog } from "$lib/components/ui/dialog/index.js";
Weekly Installs
1
Repository
First Seen
1 day ago
Security Audits
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
$lib, $lib/components, $lib/utils, $lib/hooks, $lib/components/ui완료되면 다시 알려주세요.
초기화 완료 확인 후 컴포넌트 추가로 진행한다.
사용자에게 설치 방식을 확인한다:
A. 필요한 컴포넌트만 설치 (권장)
npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add dialog card
B. 전체 컴포넌트 일괄 설치
npx shadcn-svelte@latest add --all
# 확인 프롬프트 없이
npx shadcn-svelte@latest add --all --yes
# 기존 파일 덮어쓰기
npx shadcn-svelte@latest add --all --overwrite
| 옵션 | 설명 |
|---|---|
-a, --all | 모든 컴포넌트 설치 |
-y, --yes | 확인 프롬프트 건너뜀 |
-o, --overwrite | 기존 파일 덮어쓰기 |
--no-deps | 패키지 의존성 설치 제외 |
import { Button } from "$lib/components/ui/button/index.js";
import { Dialog } from "$lib/components/ui/dialog/index.js";
Weekly Installs
1
Repository
First Seen
1 day ago
Security Audits
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装
Remotion视频制作技能:使用React生成高质量宣传片、教程和SNS短视频
132 周安装
阿里云媒体处理服务MPS自动化管理工具 - 支持管道、模板、工作流与任务操作
128 周安装
Swift专家 | iOS/macOS/visionOS原生开发与Swift 6并发性能优化
128 周安装
GitHub Actions CI/CD 流水线模式:自动化构建、测试与部署全指南
129 周安装
Vercel部署与构建指南:自动化构建流水线、预览部署、发布控制与即时回滚
129 周安装
阿里云CDN OpenAPI自动化操作指南 - 域名管理、缓存刷新、HTTPS证书配置
129 周安装