@archetypeai/ds-cli 0.3.7 → 0.3.10

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

@@ -1,117 +1,129 @@
 ---
 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.
+description: Apply DS tokens, components, and patterns to an existing demo initialized with ds-cli init.
+allowed-tools: Read, Edit, Grep, Bash
 ---
 
-# Applying the Design System
+# Applying the Design System to a Demo
 
-Setup involves these steps:
+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.
 
-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
+## Steps
 
-## Automated Setup
+1. Audit for non-DS patterns
+2. Replace raw colors with semantic tokens
+3. Replace native elements with DS components
+4. Apply layout patterns
+5. Set up linting and formatting
+6. Verify
 
-Run the setup script from the project root:
+## Step 1: Audit for Non-DS Patterns
 
-```bash
-bash scripts/setup.sh
-```
-
-The script requires:
+Run the `scripts/audit.sh` script located in this skill's directory from the project root. The script scans all `.svelte` files and reports:
 
-- A global CSS file at `src/app.css`, `src/routes/layout.css`, or `src/app.pcss`
+- **Raw Tailwind colors** — utilities like `bg-gray-100`, `text-blue-500`, `border-red-300` that should be semantic tokens
+- **Native HTML elements** — `<button>`, `<input>`, `<table>`, `<select>`, `<textarea>`, `<dialog>`, `<hr>` that have DS component equivalents
+- **Hardcoded colors** — inline `color:`, `background:`, `background-color:`, `border-color:` style values
+- **Class concatenation** — string templates or `+` concatenation on class attributes instead of `cn()`
 
-## Manual Setup
+Review the output to prioritize what to migrate.
 
-### Step 1: Install Tokens
+## Step 2: Replace Raw Colors with Semantic 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
-```
+Replace raw Tailwind color utilities with semantic equivalents throughout `.svelte` files:
 
-Then add the `@tailwindcss/vite` plugin to your `vite.config.js`:
+| 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` |
 
-```js
-import tailwindcss from '@tailwindcss/vite';
+Use judgement — not every raw color maps 1:1. Context matters:
 
-export default defineConfig({
-  plugins: [svelte(), tailwindcss()]
-  // ...
-});
-```
+- A `bg-gray-100` card background → `bg-card` or `bg-muted`
+- A `bg-gray-100` hover state → `bg-accent`
+- A `text-gray-400` placeholder → `text-muted-foreground`
+- A `border-gray-200` divider → `border-border`
 
-The setup script handles this automatically — it detects your vite config file, adds the import, and inserts `tailwindcss()` into the plugins array.
+Leave non-color utilities (`p-4`, `flex`, `rounded-lg`, etc.) unchanged.
 
-### Step 3: Initialize shadcn-svelte
+## Step 3: Replace Native Elements with DS Components
 
-The `--css` flag should point to your project's global CSS file:
+Swap native HTML elements for their DS component equivalents. Add imports as needed.
 
-```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
-```
+| Native Element | DS Component | Import From |
+| --- | --- | --- |
+| `<button>` | `<Button>` | `$lib/components/ui/button` |
+| `<input>` | `<Input>` | `$lib/components/ui/input` |
+| `<textarea>` | `<Textarea>` | `$lib/components/ui/textarea` |
+| `<select>` | `<Select.Root>` + `<Select.Trigger>` + `<Select.Content>` + `<Select.Item>` | `$lib/components/ui/select` |
+| `<table>` | `<Table.Root>` + `<Table.Header>` + `<Table.Row>` + `<Table.Head>` + `<Table.Body>` + `<Table.Cell>` | `$lib/components/ui/table` |
+| `<dialog>` | `<Dialog.Root>` + `<Dialog.Content>` + `<Dialog.Header>` + `<Dialog.Title>` | `$lib/components/ui/dialog` |
+| `<hr>` | `<Separator>` | `$lib/components/ui/separator` |
+| `<label>` | `<Label>` | `$lib/components/ui/label` |
+| `<a>` (styled as button) | `<Button variant="link">` or `<Button>` with `href` | `$lib/components/ui/button` |
 
-### Step 4: Install Components
+For each replacement:
 
-Install all components:
+1. Add the import to the `<script>` block
+2. Replace the element and map attributes (`class` → `class`, `onclick` → `onclick`, etc.)
+3. Use `cn()` from `$lib/utils.js` for merging classes — never raw concatenation
+4. Map native variants: e.g. a small styled button → `<Button size="sm">`, a ghost-styled button → `<Button variant="ghost">`
 
-```bash
-npx @archetypeai/ds-cli add ds-ui-svelte
-```
+## Step 4: Apply Layout Patterns
 
-Or install individually:
+Identify structural opportunities to use DS composition patterns:
 
-```bash
-npx shadcn-svelte@latest add https://design-system.archetypeai.workers.dev/r/button.json
-```
+- **Cards** — wrap content sections in `<Card.Root>` / `<Card.Header>` / `<Card.Content>` instead of raw `<div>` with border/shadow classes
+- **Separators** — replace `<hr>` or border-bottom hacks with `<Separator>`
+- **Badges** — replace styled `<span>` status indicators with `<Badge>`
+- **Skeleton** — replace loading placeholders with `<Skeleton>`
+- **Scroll Area** — replace overflow containers with `<ScrollArea>`
+- **Tooltips** — replace `title` attributes with `<Tooltip.Root>` / `<Tooltip.Trigger>` / `<Tooltip.Content>`
 
-### Step 5: Configure CSS Imports
+Import patterns from `$lib/components/ui/` as needed.
 
-Replace the contents of your global CSS file with:
+## Step 5: Set Up Linting and Formatting
 
-```css
-@import '@archetypeai/ds-lib-tokens/theme.css';
-@import 'tailwindcss';
-```
+Run the `scripts/setup.sh` script located in this skill's directory from the project root. The script:
 
-### Step 6: Set Up Linting
+- Installs `eslint`, `prettier`, `eslint-plugin-svelte`, `eslint-config-prettier`, `prettier-plugin-svelte`, `prettier-plugin-tailwindcss`, and `globals`
+- Creates `eslint.config.js` (flat config v9+) if it doesn't exist
+- Creates `.prettierrc` with Svelte + Tailwind plugin config if it doesn't exist
+- Creates `.prettierignore` if it doesn't exist
+- Adds `lint`, `lint:fix`, `format`, and `format:check` scripts to `package.json`
 
-Install dependencies:
+After setup, run linting and formatting:
 
 ```bash
-npm i -D eslint prettier eslint-plugin-svelte eslint-config-prettier prettier-plugin-svelte prettier-plugin-tailwindcss globals
+npm run lint:fix && npm run format
 ```
 
-The setup script creates `eslint.config.js`, `.prettierrc`, and `.prettierignore` automatically. See `@rules/linting.md` for details.
+See `@rules/linting.md` for details.
 
-## Verification
+## Step 6: Verify
 
-Confirm setup is complete:
+Confirm the design system is properly applied:
 
-- [ ] `@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
+- [ ] No raw Tailwind color utilities in `.svelte` files (re-run the audit script)
+- [ ] Native elements replaced with DS components where appropriate
+- [ ] All component imports resolve to `$lib/components/ui/`
+- [ ] `cn()` used for class merging — no string concatenation
+- [ ] Linting passes: `npm run lint && npm run format:check`
+- [ ] App builds without errors: `npm run build`
+- [ ] App runs correctly: `npm run dev`

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

@@ -0,0 +1,169 @@
+#!/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,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 ""