基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/archetypeai/archetypeai-wifi-demo --skill apply-ds命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Creates composite UI patterns by assembling design system primitives. Use when building reusable components that combine multiple primitives (Card, Button, Input, etc.), creating dashboard widgets, form groups, sensor cards, data displays, or any complex component from existing design system primitives. Also use when the user asks to create a "component" or "widget" that should follow design system conventions.
Scaffolds a full-viewport dashboard layout with no scrolling, a branded menubar with the Archetype AI logo, and panel-based content areas. Use when creating a dashboard UI, building a full-screen layout, setting up a monitoring view, creating a control panel, or when the user asks for a "dashboard", "full-screen layout", "no-scroll UI", or "panel layout".
Deploys a SvelteKit project to Cloudflare Workers with CI/CD auto-deploy on merge to main. Use when deploying a project, setting up wrangler configuration, running a local worker dev server, managing secrets, configuring environments, or when the user mentions "deploy", "cloudflare", "worker", "wrangler", or "production".
| name | apply-ds |
| description | Apply DS tokens, components, and patterns to an existing demo initialized with ds-cli init. |
| allowed-tools | Read, Edit, Grep, Bash |
This skill assumes npx @archetypeai/ds-cli init has already been run. The project has tokens, Tailwind v4, shadcn-svelte, and DS components installed. The goal is to migrate the demo's existing UI to use DS primitives and semantic tokens.
Run the scripts/audit.sh script located in this skill's directory from the project root. The script scans all .svelte files and reports:
bg-gray-100, text-blue-500, border-red-300 that should be semantic tokens<button>, <input>, <table>, <select>, <textarea>, <dialog>, <hr> that have DS component equivalentscolor:, background:, background-color:, border-color: style values+ concatenation on class attributes instead of cn()Review the output to prioritize what to migrate.
Replace raw Tailwind color utilities with semantic equivalents throughout .svelte files:
| Raw Tailwind | Semantic Token |
|---|---|
bg-white | bg-background |
bg-black | bg-foreground |
text-black | text-foreground |
text-white | text-background |
bg-gray-50, bg-gray-100 | bg-muted |
text-gray-500, text-gray-600 | text-muted-foreground |
bg-gray-200, bg-gray-300 | bg-accent |
border-gray-200, border-gray-300 | border-border |
bg-slate-900, bg-gray-900 | bg-primary |
text-slate-900, text-gray-900 | text-primary |
bg-red-* | bg-destructive |
text-red-* | text-destructive |
bg-green-* | bg-atai-good |
text-green-* | text-atai-good |
bg-yellow-* | bg-atai-warning |
text-yellow-* | text-atai-warning |
bg-blue-* | bg-atai-neutral |
text-blue-* | text-atai-neutral |
Use judgement — not every raw color maps 1:1. Context matters:
bg-gray-100 card background → bg-card or bg-mutedbg-gray-100 hover state → bg-accenttext-gray-400 placeholder → text-muted-foregroundborder-gray-200 divider → border-borderLeave non-color utilities (p-4, flex, rounded-lg, etc.) unchanged.
Swap native HTML elements for their DS component equivalents. Add imports as needed.
| Native Element | DS Component | Import From |
|---|---|---|
<button> | <Button> | $lib/components/ui/primitives/button |
<input> | <Input> | $lib/components/ui/primitives/input |
<textarea> | <Textarea> | $lib/components/ui/primitives/textarea |
<select> | <Select.Root> + <Select.Trigger> + <Select.Content> + <Select.Item> | $lib/components/ui/primitives/select |
<table> | <Table.Root> + <Table.Header> + <Table.Row> + <Table.Head> + <Table.Body> + <Table.Cell> | $lib/components/ui/primitives/table |
<dialog> | <Dialog.Root> + <Dialog.Content> + <Dialog.Header> + <Dialog.Title> | $lib/components/ui/primitives/dialog |
<hr> | <Separator> | $lib/components/ui/primitives/separator |
<label> | <Label> | $lib/components/ui/primitives/label |
<a> (styled as button) | <Button variant="link"> or <Button> with href | $lib/components/ui/primitives/button |
For each replacement:
<script> blockclass → class, onclick → onclick, etc.)cn() from $lib/utils.js for merging classes — never raw concatenation<Button size="sm">, a ghost-styled button → <Button variant="ghost">Identify structural opportunities to use DS composition patterns:
<Card.Root> / <Card.Header> / <Card.Content> instead of raw <div> with border/shadow classes<hr> or border-bottom hacks with <Separator><span> status indicators with <Badge><Skeleton><ScrollArea>title attributes with <Tooltip.Root> / <Tooltip.Trigger> / <Tooltip.Content>Import primitives from $lib/components/ui/primitives/ and patterns from $lib/components/ui/patterns/ as needed.
Run linting and formatting to clean up the migrated code:
npm run lint:fix && npm run format
See @rules/linting.md for details.
Confirm the design system is properly applied:
.svelte files (re-run the audit script)$lib/components/ui/primitives/ or $lib/components/ui/patterns/cn() used for class merging — no string concatenationnpm run lint && npm run format:checknpm run buildnpm run dev