@archetypeai/ds-cli 0.9.1 → 0.10.0

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

@@ -1,169 +0,0 @@
-#!/bin/bash
-#
-# Design System Audit Script
-#
-# Scans .svelte files for non-DS patterns that should be migrated:
-# - Raw Tailwind color utilities (should be semantic tokens)
-# - Native HTML elements (should be DS components)
-# - Hardcoded inline color styles
-# - Class string concatenation (should use cn())
-#
-# Usage: bash <skill-dir>/scripts/audit.sh
-#
-
-set -e
-
-# Colors for output
-RED='\033[0;31m'
-YELLOW='\033[0;33m'
-CYAN='\033[0;36m'
-NC='\033[0m'
-
-echo "═══════════════════════════════════════════════════"
-echo "  Design System Audit"
-echo "═══════════════════════════════════════════════════"
-echo ""
-
-if [ ! -d "src" ]; then
-    echo "✗ Error: No src/ directory found"
-    echo "  Run this script from your project root directory"
-    exit 1
-fi
-
-SVELTE_FILES=$(find src -name "*.svelte" -not -path "*/node_modules/*" -not -path "*/.svelte-kit/*" 2>/dev/null)
-
-if [ -z "$SVELTE_FILES" ]; then
-    echo "✗ No .svelte files found in src/"
-    exit 1
-fi
-
-FILE_COUNT=$(echo "$SVELTE_FILES" | wc -l | tr -d ' ')
-echo "Scanning $FILE_COUNT .svelte files..."
-echo ""
-
-ISSUES=0
-
-# ─────────────────────────────────────────────────────────
-# 1. Raw Tailwind color utilities
-# ─────────────────────────────────────────────────────────
-
-echo -e "${CYAN}── Raw Tailwind Colors ──${NC}"
-echo ""
-
-RAW_COLOR_PATTERN='\b(bg|text|border|ring|outline|shadow|from|to|via)-(red|blue|green|yellow|orange|purple|pink|indigo|violet|teal|cyan|emerald|amber|lime|rose|fuchsia|sky|stone|zinc|neutral|slate|gray|grey|white|black)-[0-9]'
-
-RAW_MATCHES=$(grep -rn --include="*.svelte" -E "$RAW_COLOR_PATTERN" src/ 2>/dev/null || true)
-
-if [ -n "$RAW_MATCHES" ]; then
-    echo "$RAW_MATCHES" | while IFS= read -r line; do
-        echo -e "  ${YELLOW}$line${NC}"
-    done
-    RAW_COUNT=$(echo "$RAW_MATCHES" | wc -l | tr -d ' ')
-    ISSUES=$((ISSUES + RAW_COUNT))
-    echo ""
-    echo "  Found $RAW_COUNT raw color utilities → replace with semantic tokens"
-else
-    echo "  ✓ No raw Tailwind color utilities found"
-fi
-
-# Also check bg-white, bg-black, text-white, text-black without shade numbers
-BW_PATTERN='\b(bg-white|bg-black|text-white|text-black)\b'
-BW_MATCHES=$(grep -rn --include="*.svelte" -E "$BW_PATTERN" src/ 2>/dev/null || true)
-
-if [ -n "$BW_MATCHES" ]; then
-    echo ""
-    echo "$BW_MATCHES" | while IFS= read -r line; do
-        echo -e "  ${YELLOW}$line${NC}"
-    done
-    BW_COUNT=$(echo "$BW_MATCHES" | wc -l | tr -d ' ')
-    echo ""
-    echo "  Found $BW_COUNT black/white utilities → replace with bg-background, text-foreground, etc."
-fi
-
-echo ""
-
-# ─────────────────────────────────────────────────────────
-# 2. Native HTML elements with DS equivalents
-# ─────────────────────────────────────────────────────────
-
-echo -e "${CYAN}── Native HTML Elements ──${NC}"
-echo ""
-
-# Search in template sections only (outside <script> blocks)
-NATIVE_ELEMENTS="<button[> ]|<input[> /]|<textarea[> /]|<select[> ]|<table[> ]|<dialog[> ]|<hr[> /]|<hr>"
-
-NATIVE_MATCHES=$(grep -rn --include="*.svelte" -E "$NATIVE_ELEMENTS" src/ 2>/dev/null | grep -v '<script' | grep -v 'import ' || true)
-
-if [ -n "$NATIVE_MATCHES" ]; then
-    echo "$NATIVE_MATCHES" | while IFS= read -r line; do
-        echo -e "  ${YELLOW}$line${NC}"
-    done
-    NATIVE_COUNT=$(echo "$NATIVE_MATCHES" | wc -l | tr -d ' ')
-    ISSUES=$((ISSUES + NATIVE_COUNT))
-    echo ""
-    echo "  Found $NATIVE_COUNT native elements → replace with DS components"
-else
-    echo "  ✓ No native HTML elements with DS equivalents found"
-fi
-
-echo ""
-
-# ─────────────────────────────────────────────────────────
-# 3. Hardcoded inline color styles
-# ─────────────────────────────────────────────────────────
-
-echo -e "${CYAN}── Hardcoded Inline Colors ──${NC}"
-echo ""
-
-INLINE_PATTERN='style="[^"]*\b(color|background|background-color|border-color)\s*:'
-
-INLINE_MATCHES=$(grep -rn --include="*.svelte" -E "$INLINE_PATTERN" src/ 2>/dev/null || true)
-
-if [ -n "$INLINE_MATCHES" ]; then
-    echo "$INLINE_MATCHES" | while IFS= read -r line; do
-        echo -e "  ${YELLOW}$line${NC}"
-    done
-    INLINE_COUNT=$(echo "$INLINE_MATCHES" | wc -l | tr -d ' ')
-    ISSUES=$((ISSUES + INLINE_COUNT))
-    echo ""
-    echo "  Found $INLINE_COUNT hardcoded inline colors → use semantic token classes"
-else
-    echo "  ✓ No hardcoded inline colors found"
-fi
-
-echo ""
-
-# ─────────────────────────────────────────────────────────
-# 4. Class string concatenation (should use cn())
-# ─────────────────────────────────────────────────────────
-
-echo -e "${CYAN}── Class Concatenation ──${NC}"
-echo ""
-
-# Look for class={`...`} or class={something + "..."} patterns
-CONCAT_PATTERN='class=\{`|class=\{[^}]*\+'
-
-CONCAT_MATCHES=$(grep -rn --include="*.svelte" -E "$CONCAT_PATTERN" src/ 2>/dev/null | grep -v 'cn(' || true)
-
-if [ -n "$CONCAT_MATCHES" ]; then
-    echo "$CONCAT_MATCHES" | while IFS= read -r line; do
-        echo -e "  ${YELLOW}$line${NC}"
-    done
-    CONCAT_COUNT=$(echo "$CONCAT_MATCHES" | wc -l | tr -d ' ')
-    ISSUES=$((ISSUES + CONCAT_COUNT))
-    echo ""
-    echo "  Found $CONCAT_COUNT class concatenations → use cn() from \$lib/utils.js"
-else
-    echo "  ✓ No class string concatenation found"
-fi
-
-echo ""
-
-# ─────────────────────────────────────────────────────────
-# Summary
-# ─────────────────────────────────────────────────────────
-
-echo "═══════════════════════════════════════════════════"
-echo "  Audit Complete"
-echo "═══════════════════════════════════════════════════"
-echo ""

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

@@ -1,153 +0,0 @@
-#!/bin/bash
-#
-# Design System Linting & Formatting Setup
-#
-# Installs and configures ESLint + Prettier for a SvelteKit project
-# using the Archetype AI design system.
-#
-# Usage: bash <skill-dir>/scripts/setup.sh
-#
-
-set -e
-
-echo "═══════════════════════════════════════════════════"
-echo "  Linting & Formatting Setup"
-echo "═══════════════════════════════════════════════════"
-echo ""
-
-if [ ! -f "package.json" ]; then
-    echo "✗ Error: No package.json found"
-    echo "  Run this script from your project root directory"
-    exit 1
-fi
-
-# ─────────────────────────────────────────────────────────
-# Install Dependencies
-# ─────────────────────────────────────────────────────────
-
-echo "Installing linting dependencies..."
-
-npm i -D eslint prettier eslint-plugin-svelte eslint-config-prettier prettier-plugin-svelte prettier-plugin-tailwindcss globals 2>/dev/null || {
-    echo "✗ Failed to install dependencies"
-    exit 1
-}
-echo "  ✓ Dependencies installed"
-echo ""
-
-# ─────────────────────────────────────────────────────────
-# Detect CSS file for Prettier Tailwind plugin
-# ─────────────────────────────────────────────────────────
-
-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
-
-# ─────────────────────────────────────────────────────────
-# Create eslint.config.js
-# ─────────────────────────────────────────────────────────
-
-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 [ ! -f ".prettierrc" ]; then
-    if [ -n "$CSS_FILE" ]; 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
-    else
-        cat > .prettierrc << 'PRETTIER_EOF'
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
-}
-PRETTIER_EOF
-    fi
-    echo "  ✓ .prettierrc created"
-else
-    echo "  → .prettierrc exists, skipping"
-fi
-
-# ─────────────────────────────────────────────────────────
-# Create .prettierignore
-# ─────────────────────────────────────────────────────────
-
-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 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 ""
-echo "═══════════════════════════════════════════════════"
-echo "  Setup Complete"
-echo "═══════════════════════════════════════════════════"
-echo ""
-echo "  Run: npm run lint:fix && npm run format"
-echo ""

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

@@ -1,153 +0,0 @@
----
-name: build-component
-description: Creates composite UI components by assembling design system package 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 components. Also use when the user asks to create a "component", "widget", or "pattern" that should follow design system conventions.
----
-
-# Building Components
-
-Custom components are composed from the design system packages and live in
-`$lib/components/ui/custom/` — never next to registry-installed source and never
-inside `node_modules`.
-
-## Decision: compose vs extend vs modify
-
-**Before building, read `ds-manifest.json` at the project root.** It lists every
-component in both tiers (console = stable base, labs = experimental) with import
-subpaths, variant axes, and registry source URLs. If an existing component
-covers the use case — even partially — use it rather than creating a new one.
-
-**Compose a custom component when:**
-
-- Combining 3+ package components into a reusable unit
-- The combination will be used in multiple places
-- The component has its own props/state logic
-
-**Use variants instead when:**
-
-- The design space is already covered by a component's variant axes (check the
-  manifest's `variants` entry before adding wrappers)
-
-**Modify via the registry only when:**
-
-- A component's internals must diverge from the package. Install its editable
-  source (`npx shadcn-svelte@latest add <source URL from ds-manifest.json>`) and
-  import the copy from `$lib/components/ui/`.
-
-## Component Structure
-
-```svelte
-<script>
-  import { cn } from '$lib/utils.js';
-  import * as Card from '@archetypeai/ds-ui-svelte-console/primitives/card';
-  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
-
-  let { title, class: className, children, ...restProps } = $props();
-</script>
-
-<Card.Root class={cn('p-4', className)} {...restProps}>
-  <Card.Header>
-    <Card.Title>{title}</Card.Title>
-  </Card.Header>
-  <Card.Content>
-    {@render children?.()}
-  </Card.Content>
-</Card.Root>
-```
-
-## 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.Root 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 Components
-
-Do not rely on a memorized catalog — read `ds-manifest.json` for the current
-component list. The shape per tier:
-
-- **console** (`@archetypeai/ds-ui-svelte-console/primitives/<name>`): stable
-  base primitives — alert, badge, button, card, checkbox, codeblock,
-  collapsible, dialog, dropdown-menu, dropzone, empty-state, input, input-group,
-  item, label, progress, select, separator, sonner, spinner, table, tabs, theme,
-  textarea, tooltip
-- **labs** (`@archetypeai/ds-ui-svelte-labs/primitives/<name>`): experimental
-  components — aspect-ratio, chart, kbd, logo, menubar, scatter-chart,
-  sensor-chart, slider, switch, toggle, video-player
-
-The manifest is generated from the registries; trust it over this list if they
-disagree. Variant values flagged `consoleProductOnly` (e.g. `runSession`,
-`topNav*`) must not be used outside the console product.
-
-## Example: Sensor Card Component
-
-```svelte
-<script>
-  import { cn } from '$lib/utils.js';
-  import * as Card from '@archetypeai/ds-ui-svelte-console/primitives/card';
-  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
-
-  let { title = 'Sensor', icon: Icon, data = [], class: className, ...restProps } = $props();
-</script>
-
-<Card.Root class={cn('p-4', className)} {...restProps}>
-  <Card.Header class="flex flex-row items-center justify-between p-0">
-    <Card.Title class="text-foreground font-mono text-base uppercase">
-      {title}
-    </Card.Title>
-    {#if Icon}
-      <Icon class="text-muted-foreground size-6" aria-hidden="true" />
-    {/if}
-  </Card.Header>
-  <Card.Content class="p-0">
-    <Chart.Container config={{}} class="h-[220px] w-full">
-      <!-- chart content -->
-    </Chart.Container>
-  </Card.Content>
-</Card.Root>
-```
-
-## Detailed Conventions
-
-See `@rules/components.md` for:
-
-- bits-ui wrapper patterns
-- tailwind-variants (tv) usage
-- Conditional rendering patterns
-- Icon handling