sveltekit-shadcn-guidline by dev-goraebap/sveltekit-custom-skills
npx skills add https://github.com/dev-goraebap/sveltekit-custom-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
广告位招租
在这里展示您的产品或服务
触达数万 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";
每周安装量
1
仓库
首次出现
1 天前
安全审计
安装于
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
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- Import aliases:
$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
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
shadcn UI组件库:36个Radix UI + Tailwind CSS预构建组件,无缝集成json-render
478 周安装