@archetypeai/ds-cli 0.3.7

package/files/skills/apply-ds/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: apply-ds
+description: Sets up an existing SvelteKit project with the Archetype AI design system (@archetypeai/ds-lib-tokens). Use when initializing a new project with the design system by adding tokens to an existing project, configuring Tailwind v4 CSS imports, setting up shadcn-svelte, installing design system components and configuring eslint/prettier for Svelte projects.
+---
+
+# Applying the Design System
+
+Setup involves these steps:
+
+1. Install tokens package
+2. Install and configure Tailwind CSS
+3. Initialize shadcn-svelte
+4. Install design system components
+5. Configure CSS imports
+6. Set up linting and formatting
+
+## Automated Setup
+
+Run the setup script from the project root:
+
+```bash
+bash scripts/setup.sh
+```
+
+The script requires:
+
+- A global CSS file at `src/app.css`, `src/routes/layout.css`, or `src/app.pcss`
+
+## Manual Setup
+
+### Step 1: Install Tokens
+
+```bash
+npm i @archetypeai/ds-lib-tokens
+```
+
+### Step 2: Install and Configure Tailwind CSS
+
+Install Tailwind CSS v4 and its Vite plugin:
+
+```bash
+npm i -D tailwindcss @tailwindcss/vite
+```
+
+Then add the `@tailwindcss/vite` plugin to your `vite.config.js`:
+
+```js
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [svelte(), tailwindcss()]
+  // ...
+});
+```
+
+The setup script handles this automatically — it detects your vite config file, adds the import, and inserts `tailwindcss()` into the plugins array.
+
+### Step 3: Initialize shadcn-svelte
+
+The `--css` flag should point to your project's global CSS file:
+
+```bash
+npx shadcn-svelte@latest init \
+  --base-color slate \
+  --css src/app.css \
+  --components-alias '$lib/components' \
+  --lib-alias '$lib' \
+  --utils-alias '$lib/utils' \
+  --hooks-alias '$lib/hooks' \
+  --ui-alias '$lib/components/ui' \
+  --skip-preflight \
+  --no-deps
+```
+
+### Step 4: Install Components
+
+Install all components:
+
+```bash
+npx @archetypeai/ds-cli add ds-ui-svelte
+```
+
+Or install individually:
+
+```bash
+npx shadcn-svelte@latest add https://design-system.archetypeai.workers.dev/r/button.json
+```
+
+### Step 5: Configure CSS Imports
+
+Replace the contents of your global CSS file with:
+
+```css
+@import '@archetypeai/ds-lib-tokens/theme.css';
+@import 'tailwindcss';
+```
+
+### Step 6: Set Up Linting
+
+Install dependencies:
+
+```bash
+npm i -D eslint prettier eslint-plugin-svelte eslint-config-prettier prettier-plugin-svelte prettier-plugin-tailwindcss globals
+```
+
+The setup script creates `eslint.config.js`, `.prettierrc`, and `.prettierignore` automatically. See `@rules/linting.md` for details.
+
+## Verification
+
+Confirm setup is complete:
+
+- [ ] `@archetypeai/ds-lib-tokens` in package.json
+- [ ] `tailwindcss` and `@tailwindcss/vite` in package.json devDependencies
+- [ ] `vite.config.js` includes `import tailwindcss from '@tailwindcss/vite'` and `tailwindcss()` in plugins
+- [ ] `components.json` exists
+- [ ] Components in `$lib/components/ui/`
+- [ ] CSS file contains correct imports

package/files/skills/apply-ds/scripts/setup.sh

@@ -0,0 +1,271 @@
+#!/bin/bash
+#
+# Archetype AI Design System Setup Script
+#
+# Sets up a SvelteKit project with @archetypeai/ds-lib-tokens and design system components.
+# Fully non-interactive.
+#
+# Usage: bash setup.sh
+#
+
+set -e
+
+echo "═══════════════════════════════════════════════════"
+echo "  Archetype AI Design System Setup"
+echo "═══════════════════════════════════════════════════"
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Prerequisites Check
+# ─────────────────────────────────────────────────────────
+
+if ! command -v node &> /dev/null; then
+    echo "✗ Error: Node.js is not installed"
+    echo "  Install Node.js 18+ and try again"
+    exit 1
+fi
+
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+if [ "$NODE_VERSION" -lt 18 ]; then
+    echo "✗ Error: Node.js 18+ required (found v$NODE_VERSION)"
+    exit 1
+fi
+
+if [ ! -f "package.json" ]; then
+    echo "✗ Error: No package.json found"
+    echo "  Run this script from your project root directory"
+    exit 1
+fi
+
+# Detect global CSS file
+CSS_FILE=""
+if [ -f "src/app.css" ]; then
+    CSS_FILE="src/app.css"
+elif [ -f "src/routes/layout.css" ]; then
+    CSS_FILE="src/routes/layout.css"
+elif [ -f "src/app.pcss" ]; then
+    CSS_FILE="src/app.pcss"
+fi
+
+if [ -z "$CSS_FILE" ]; then
+    echo "✗ Error: No global CSS file found"
+    echo "  Checked: src/app.css, src/routes/layout.css, src/app.pcss"
+    echo "  Create a global CSS file and run again."
+    exit 1
+fi
+
+echo "✓ Prerequisites OK (Node v$NODE_VERSION, CSS: $CSS_FILE)"
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Step 1: Install Tokens
+# ─────────────────────────────────────────────────────────
+
+echo "Step 1/6: Installing @archetypeai/ds-lib-tokens..."
+
+if grep -q '"@archetypeai/ds-lib-tokens"' package.json 2>/dev/null; then
+    echo "  → Already installed, skipping"
+else
+    npm i @archetypeai/ds-lib-tokens || {
+        echo ""
+        echo "✗ Installation failed."
+        exit 1
+    }
+    echo "  ✓ Tokens installed"
+fi
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Step 2: Install & Configure Tailwind CSS
+# ─────────────────────────────────────────────────────────
+
+echo "Step 2/6: Installing and configuring Tailwind CSS..."
+
+# Install tailwindcss + vite plugin if not present
+if grep -q '"tailwindcss"' package.json 2>/dev/null && grep -q '"@tailwindcss/vite"' package.json 2>/dev/null; then
+    echo "  → tailwindcss already installed, skipping"
+else
+    npm i -D tailwindcss @tailwindcss/vite || {
+        echo ""
+        echo "✗ Failed to install tailwindcss"
+        exit 1
+    }
+    echo "  ✓ tailwindcss and @tailwindcss/vite installed"
+fi
+
+# Configure vite.config.js with @tailwindcss/vite plugin
+VITE_CONFIG=""
+if [ -f "vite.config.js" ]; then
+    VITE_CONFIG="vite.config.js"
+elif [ -f "vite.config.ts" ]; then
+    VITE_CONFIG="vite.config.ts"
+fi
+
+if [ -z "$VITE_CONFIG" ]; then
+    echo "  ⚠ No vite.config found — create one and add tailwindcss() to plugins manually"
+elif grep -q "@tailwindcss/vite" "$VITE_CONFIG" 2>/dev/null; then
+    echo "  → @tailwindcss/vite already configured in $VITE_CONFIG, skipping"
+else
+    # Add import after the last import statement
+    LAST_IMPORT_LINE=$(grep -n '^import ' "$VITE_CONFIG" | tail -1 | cut -d: -f1)
+    if [ -n "$LAST_IMPORT_LINE" ]; then
+        sed -i.bak "${LAST_IMPORT_LINE}a\\
+import tailwindcss from '@tailwindcss/vite';" "$VITE_CONFIG"
+    else
+        sed -i.bak "1i\\
+import tailwindcss from '@tailwindcss/vite';" "$VITE_CONFIG"
+    fi
+
+    # Add tailwindcss() to plugins array
+    if grep -q 'plugins.*svelte()' "$VITE_CONFIG"; then
+        sed -i.bak 's/svelte()/svelte(), tailwindcss()/' "$VITE_CONFIG"
+    elif grep -q 'plugins.*\[' "$VITE_CONFIG"; then
+        sed -i.bak 's/plugins:[[:space:]]*\[/plugins: [tailwindcss(), /' "$VITE_CONFIG"
+    else
+        echo "  ⚠ Could not find plugins array — add tailwindcss() to plugins manually"
+    fi
+
+    rm -f "${VITE_CONFIG}.bak"
+    echo "  ✓ @tailwindcss/vite configured in $VITE_CONFIG"
+fi
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Step 3: Initialize shadcn-svelte
+# ─────────────────────────────────────────────────────────
+
+echo "Step 3/6: Initializing shadcn-svelte..."
+
+if [ -f "components.json" ]; then
+    echo "  → components.json exists, skipping init"
+else
+    npx shadcn-svelte@latest init \
+        --base-color slate \
+        --css "$CSS_FILE" \
+        --components-alias '$lib/components' \
+        --lib-alias '$lib' \
+        --utils-alias '$lib/utils' \
+        --hooks-alias '$lib/hooks' \
+        --ui-alias '$lib/components/ui' \
+        --skip-preflight \
+        --no-deps
+    echo "  ✓ shadcn-svelte initialized"
+fi
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Step 4: Install Components
+# ─────────────────────────────────────────────────────────
+
+echo "Step 4/6: Installing design system components..."
+npx @archetypeai/ds-cli add ds-ui-svelte
+echo "  ✓ Components installed"
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Step 5: Configure CSS Imports
+# ─────────────────────────────────────────────────────────
+
+echo "Step 5/6: Configuring CSS imports..."
+
+cat > "$CSS_FILE" << 'EOF'
+@import '@archetypeai/ds-lib-tokens/theme.css';
+@import 'tailwindcss';
+EOF
+
+echo "  ✓ CSS imports written to $CSS_FILE"
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Step 6: Set Up Linting & Formatting
+# ─────────────────────────────────────────────────────────
+
+echo "Step 6/6: Setting up linting and formatting..."
+
+npm i -D eslint prettier eslint-plugin-svelte eslint-config-prettier prettier-plugin-svelte prettier-plugin-tailwindcss globals 2>/dev/null || true
+echo "  ✓ Linting dependencies installed"
+
+# Create eslint.config.js if it doesn't exist
+if [ ! -f "eslint.config.js" ]; then
+    cat > eslint.config.js << 'ESLINT_EOF'
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import svelteConfig from './svelte.config.js';
+
+export default [
+	js.configs.recommended,
+	...svelte.configs.recommended,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: { svelteConfig }
+		}
+	},
+	{
+		ignores: ['.svelte-kit/', 'build/', 'dist/', 'node_modules/']
+	}
+];
+ESLINT_EOF
+    echo "  ✓ eslint.config.js created"
+else
+    echo "  → eslint.config.js exists, skipping"
+fi
+
+# Create .prettierrc if it doesn't exist
+if [ ! -f ".prettierrc" ]; then
+    cat > .prettierrc << PRETTIER_EOF
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"tailwindStylesheet": "./$CSS_FILE"
+}
+PRETTIER_EOF
+    echo "  ✓ .prettierrc created"
+else
+    echo "  → .prettierrc exists, skipping"
+fi
+
+# Create .prettierignore if it doesn't exist
+if [ ! -f ".prettierignore" ]; then
+    cat > .prettierignore << 'IGNORE_EOF'
+.svelte-kit
+.claude
+.cursor
+build
+dist
+node_modules
+package-lock.json
+IGNORE_EOF
+    echo "  ✓ .prettierignore created"
+else
+    echo "  → .prettierignore exists, skipping"
+fi
+
+# Add lint/format scripts to package.json
+npm pkg set scripts.lint="eslint ." 2>/dev/null || true
+npm pkg set scripts.lint:fix="eslint . --fix" 2>/dev/null || true
+npm pkg set scripts.format="prettier --write ." 2>/dev/null || true
+npm pkg set scripts.format:check="prettier --check ." 2>/dev/null || true
+echo "  ✓ Lint/format scripts added to package.json"
+echo ""
+
+# ─────────────────────────────────────────────────────────
+# Complete
+# ─────────────────────────────────────────────────────────
+
+echo "═══════════════════════════════════════════════════"
+echo "  Setup Complete"
+echo "═══════════════════════════════════════════════════"
+echo ""
+echo "  Components are in \$lib/components/ui/"
+echo ""

package/files/skills/build-pattern/SKILL.md

@@ -0,0 +1,202 @@
+---
+name: build-pattern
+description: 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.
+---
+
+# Building Patterns
+
+Patterns are composite components assembled from design system primitives.
+
+## Decision: Pattern vs Extension
+
+**Build a pattern when:**
+
+- Combining 3+ primitives into a reusable unit
+- The combination will be used in multiple places
+- The component has its own props/state logic
+
+**Extend a primitive instead when:**
+
+- Adding variants to a single primitive
+- Customizing styling without composition
+
+## Pattern Structure
+
+```svelte
+<script>
+  import { cn } from '$lib/utils.js';
+  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
+  import { Button } from '$lib/components/ui/button/index.js';
+
+  let { title, class: className, children, ...restProps } = $props();
+</script>
+
+<Card class={cn('p-4', className)} {...restProps}>
+  <CardHeader>
+    <CardTitle>{title}</CardTitle>
+  </CardHeader>
+  <CardContent>
+    {@render children?.()}
+  </CardContent>
+</Card>
+```
+
+## Key Conventions
+
+### Props Pattern
+
+Always use this structure:
+
+```javascript
+let {
+  ref = $bindable(null), // optional DOM reference
+  class: className, // rename to avoid reserved word
+  children, // snippet for slot content
+  ...restProps // pass-through attributes
+} = $props();
+```
+
+### Class Merging
+
+Always use `cn()` for classes:
+
+```svelte
+<div class={cn('bg-card p-4', className)}>
+```
+
+Never concatenate strings directly.
+
+### Spreading restProps
+
+Always spread on the root element:
+
+```svelte
+<Card class={cn('p-4', className)} {...restProps}>
+```
+
+This ensures aria attributes, data attributes, and event handlers pass through.
+
+### Rendering Children
+
+Use `{@render}` for slot content:
+
+```svelte
+{@render children?.()}
+```
+
+## Available Primitives
+
+Import from `$lib/components/ui/`. Before building, list `$lib/components/ui/` to discover all installed primitives.
+
+### Layout & Structure
+
+- **card** - Card, CardHeader, CardTitle, CardContent, CardFooter, CardAction, CardDescription
+- **separator** - Separator
+- **resizable** - ResizablePane, ResizablePaneGroup, ResizableHandle
+- **scroll-area** - ScrollArea
+- **aspect-ratio** - AspectRatio
+- **skeleton** - Skeleton
+- **collapsible** - Collapsible.Root, Collapsible.Trigger, Collapsible.Content
+
+### Forms & Inputs
+
+- **button** - Button (with variants via `buttonVariants`)
+- **input** - Input
+- **textarea** - Textarea
+- **label** - Label
+- **checkbox** - Checkbox
+- **switch** - Switch
+- **select** - Select.Root, Select.Trigger, Select.Content, Select.Item
+- **native-select** - NativeSelect
+- **radio-group** - RadioGroup.Root, RadioGroup.Item
+- **slider** - Slider
+- **toggle** - Toggle
+- **toggle-group** - ToggleGroup.Root, ToggleGroup.Item
+- **input-otp** - InputOTP
+- **input-group** - InputGroup
+- **field** - Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldError, FieldContent
+
+### Data Display
+
+- **table** - Table, TableHeader, TableBody, TableRow, TableCell, TableHead, TableFooter, TableCaption
+- **data-table** - createSvelteTable, FlexRender
+- **chart** - Chart.Container, Chart.Tooltip
+- **badge** - Badge
+- **avatar** - Avatar, AvatarImage, AvatarFallback
+- **kbd** - Kbd
+- **empty** - Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent
+- **item** - Item, ItemGroup, ItemHeader, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia
+- **spinner** - Spinner
+- **progress** - Progress
+- **carousel** - Carousel
+
+### Overlays & Dialogs
+
+- **dialog** - Dialog.Root, Dialog.Trigger, Dialog.Content, Dialog.Header, Dialog.Title, Dialog.Description, Dialog.Footer, Dialog.Close
+- **alert-dialog** - AlertDialog.Root, AlertDialog.Trigger, AlertDialog.Content, AlertDialog.Header, AlertDialog.Title, AlertDialog.Description, AlertDialog.Footer, AlertDialog.Action, AlertDialog.Cancel
+- **sheet** - Sheet.Root, Sheet.Trigger, Sheet.Content, Sheet.Header, Sheet.Title, Sheet.Description, Sheet.Footer, Sheet.Close
+- **drawer** - Drawer.Root, Drawer.Trigger, Drawer.Content, Drawer.Header, Drawer.Title, Drawer.Description, Drawer.Footer, Drawer.Close
+- **popover** - Popover.Root, Popover.Trigger, Popover.Content
+- **hover-card** - HoverCard.Root, HoverCard.Trigger, HoverCard.Content
+- **tooltip** - Tooltip.Root, Tooltip.Trigger, Tooltip.Content, Tooltip.Provider
+- **command** - Command.Root, Command.Input, Command.List, Command.Item, Command.Group
+- **sonner** - Toaster
+
+### Navigation & Menus
+
+- **tabs** - Tabs.Root, Tabs.List, Tabs.Trigger, Tabs.Content
+- **accordion** - Accordion.Root, Accordion.Item, Accordion.Trigger, Accordion.Content
+- **dropdown-menu** - DropdownMenu.Root, DropdownMenu.Trigger, DropdownMenu.Content, DropdownMenu.Item, DropdownMenu.Separator
+- **context-menu** - ContextMenu.Root, ContextMenu.Trigger, ContextMenu.Content, ContextMenu.Item
+- **menubar** - Menubar
+- **navigation-menu** - NavigationMenu
+- **breadcrumb** - Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage
+- **pagination** - Pagination
+- **sidebar** - Sidebar, SidebarProvider, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger
+- **button-group** - ButtonGroup, ButtonGroupText, ButtonGroupSeparator
+
+### Date Picking
+
+- **calendar** - Calendar
+- **range-calendar** - RangeCalendar
+
+### Feedback
+
+- **alert** - Alert, AlertTitle, AlertDescription
+
+## Example: Sensor Card Pattern
+
+```svelte
+<script>
+  import { cn } from '$lib/utils.js';
+  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
+  import * as Chart from '$lib/components/ui/chart/index.js';
+
+  let { title = 'SENSOR', icon: Icon, data = [], class: className, ...restProps } = $props();
+</script>
+
+<Card class={cn('p-4', className)} {...restProps}>
+  <CardHeader class="flex flex-row items-center justify-between p-0">
+    <CardTitle class="text-foreground font-mono text-base uppercase">
+      {title}
+    </CardTitle>
+    {#if Icon}
+      <Icon class="text-muted-foreground size-6" aria-hidden="true" />
+    {/if}
+  </CardHeader>
+  <CardContent class="p-0">
+    <Chart.Container config={{}} class="h-[220px] w-full">
+      <!-- chart content -->
+    </Chart.Container>
+  </CardContent>
+</Card>
+```
+
+## Detailed Conventions
+
+See `@rules/components.md` for:
+
+- bits-ui wrapper patterns
+- tailwind-variants (tv) usage
+- Conditional rendering patterns
+- Icon handling