Menu
Apply DS tokens, components, and patterns to an existing demo initialized with ds-cli init.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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".
Run an Embedding Lens by streaming sensor data from a CSV file. Use when extracting embeddings from time-series CSV data for visualization, clustering, dimensionality reduction, or similarity analysis.
Run an Embedding Lens by streaming real-time data from a physical sensor (BLE, USB, UDP, or recording playback). Use when extracting live embeddings from sensor hardware for real-time visualization or clustering.
Run an Embedding Lens by uploading a CSV file for server-side processing. Use when you want to upload a file and get embeddings without local streaming.
| 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