@archetypeai/ds-cli 0.3.9 → 0.3.10

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

@@ -1,191 +1,56 @@
 #!/bin/bash
 #
-# Archetype AI Design System Setup Script
+# Design System Linting & Formatting Setup
 #
-# Sets up a SvelteKit project with @archetypeai/ds-lib-tokens and design system components.
-# Fully non-interactive.
+# Installs and configures ESLint + Prettier for a SvelteKit project
+# using the Archetype AI design system.
 #
-# Usage: bash setup.sh
+# Usage: bash <skill-dir>/scripts/setup.sh
 #
 
 set -e
 
 echo "═══════════════════════════════════════════════════"
-echo "  Archetype AI Design System Setup"
+echo "  Linting & Formatting 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
+# Install Dependencies
 # ─────────────────────────────────────────────────────────
 
-echo "Step 1/6: Installing @archetypeai/ds-lib-tokens..."
+echo "Installing linting dependencies..."
 
-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
+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 ""
 
 # ─────────────────────────────────────────────────────────
-# Step 3: Initialize shadcn-svelte
+# Detect CSS file for Prettier Tailwind plugin
 # ─────────────────────────────────────────────────────────
 
-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"
+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
-echo ""
 
 # ─────────────────────────────────────────────────────────
-# Step 4: Install Components
+# Create eslint.config.js
 # ─────────────────────────────────────────────────────────
 
-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';
@@ -218,9 +83,13 @@ else
     echo "  → eslint.config.js exists, skipping"
 fi
 
-# Create .prettierrc if it doesn't exist
+# ─────────────────────────────────────────────────────────
+# Create .prettierrc
+# ─────────────────────────────────────────────────────────
+
 if [ ! -f ".prettierrc" ]; then
-    cat > .prettierrc << PRETTIER_EOF
+    if [ -n "$CSS_FILE" ]; then
+        cat > .prettierrc << PRETTIER_EOF
 {
 	"useTabs": true,
 	"singleQuote": true,
@@ -230,12 +99,26 @@ if [ ! -f ".prettierrc" ]; then
 	"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 it doesn't exist
+# ─────────────────────────────────────────────────────────
+# Create .prettierignore
+# ─────────────────────────────────────────────────────────
+
 if [ ! -f ".prettierignore" ]; then
     cat > .prettierignore << 'IGNORE_EOF'
 .svelte-kit
@@ -251,21 +134,20 @@ else
     echo "  → .prettierignore exists, skipping"
 fi
 
-# Add lint/format scripts to package.json
+# ─────────────────────────────────────────────────────────
+# 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 ""
-
-# ─────────────────────────────────────────────────────────
-# Complete
-# ─────────────────────────────────────────────────────────
 
+echo ""
 echo "═══════════════════════════════════════════════════"
 echo "  Setup Complete"
 echo "═══════════════════════════════════════════════════"
 echo ""
-echo "  Components are in \$lib/components/ui/"
+echo "  Run: npm run lint:fix && npm run format"
 echo ""

package/files/skills/create-dashboard/SKILL.md

@@ -7,6 +7,8 @@ description: Scaffolds a full-viewport dashboard layout with no scrolling, a bra
 
 Scaffold a full-viewport dashboard with a branded menubar and panel-based content.
 
+> **Note:** This is one layout option for demos. If the user's request doesn't clearly map to a dashboard, consider the best-fit layout for their use case.
+
 ## Discovering Components
 
 Before building, check which components are installed in the project:
@@ -181,6 +183,16 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 </div>
 ```
 
+## Populating Panels with Pattern Components
+
+Panels should contain pattern components, not raw markup. Before building new components:
+
+1. Check if existing patterns fit the need — `VideoPlayer`, `ExpandableLog`, `StatusBadge`, `HealthscoreCard`, `SensorChart`, `ScatterChart`
+2. If no existing pattern fits, create one via `@skills/build-pattern`
+3. Each panel should contain one primary component with clear props for data flow
+
+This keeps dashboards composable and consistent with the design system.
+
 ## Reference
 
 See `@rules/styling.md` for: