@archetypeai/ds-cli 0.3.7

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

@@ -0,0 +1,189 @@
+---
+name: create-dashboard
+description: 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".
+---
+
+# Creating a Dashboard
+
+Scaffold a full-viewport dashboard with a branded menubar and panel-based content.
+
+## Discovering Components
+
+Before building, check which components are installed in the project:
+
+1. List `$lib/components/ui/` to discover available primitives (subdirectories with `index.js`) and patterns (PascalCase `.svelte` files)
+2. Only use components that actually exist in the project
+3. If a required component is missing, ask the user to install it (via `npx shadcn-svelte@latest add`) or build it (via `@skills/build-pattern`)
+4. **Never inline raw markup as a substitute for a missing component**
+
+The dashboard requires at minimum: `Menubar`, `Button`. For card-based layouts: `Card`.
+
+## Layout Requirements
+
+Dashboards fill the entire viewport with no scrolling:
+
+- `h-screen w-screen` — full viewport dimensions
+- `overflow-hidden` — prevent any scrolling
+- Grid layout: `grid grid-rows-[auto_1fr]` so the Menubar takes its natural height and content fills the rest
+
+## Card Grid Defaults
+
+Unless the user explicitly asks for a different layout:
+
+- **Equal-width columns** — use `grid-cols-2`, `grid-cols-3`, etc. Never mix fixed and fluid widths for card grids (e.g., don't use `grid-cols-[300px_1fr]` for cards — that's for sidebar layouts only)
+- **Equal-height cards** — CSS grid rows distribute height evenly. Add `max-h-full` to each Card so content stays constrained to its grid cell
+- **Consistent spacing** — always use `gap-4` between cards and `p-4` padding around the grid
+
+## Menubar
+
+Use the `Menubar` pattern. It renders a branded `<header>` with the Archetype AI Logo on the left and a partner logo placeholder. Pass action content as children.
+
+**Every dashboard Menubar must include a "Send Report" button.** Additional actions can be appended alongside it.
+
+```svelte
+<script>
+  import Menubar from '$lib/components/ui/Menubar.svelte';
+  import { Button } from '$lib/components/ui/button/index.js';
+</script>
+
+<Menubar>
+  <!-- these children are additive examples — append to existing children, don't replace them, if there are no children, add them -->
+  <Button variant="link" class="text-muted-foreground">Send Report</Button>
+</Menubar>
+```
+
+For co-branding, pass a `partnerLogo` snippet to replace the default placeholder:
+
+```svelte
+<Menubar>
+  {#snippet partnerLogo()}
+    <img src="/partner-logo.svg" alt="Partner" class="h-6" />
+  {/snippet}
+  <!-- additive example — append to existing children, don't replace them -->
+  <Button variant="link" class="text-muted-foreground">Send Report</Button>
+</Menubar>
+```
+
+## Preservation Rules
+
+- **Never rewrite or replace** the Menubar component file in `$lib/components/ui/`
+- **Never modify installed primitives/patterns** in `$lib/components/ui/` — those are design system files
+- When a Menubar already has children (buttons, actions), **append** new actions alongside existing ones — do not replace them
+- When a page already has content, **integrate alongside** existing markup — do not overwrite the file
+
+## Full Layout
+
+```svelte
+<script>
+  import Menubar from '$lib/components/ui/Menubar.svelte';
+  import { Button } from '$lib/components/ui/button/index.js';
+</script>
+
+<div class="bg-background grid h-screen w-screen grid-rows-[auto_1fr] overflow-hidden">
+  <Menubar>
+    <Button variant="link" class="text-muted-foreground">Send Report</Button>
+  </Menubar>
+
+  <main class="overflow-hidden">
+    <!-- panels go here -->
+  </main>
+</div>
+```
+
+## Panel Layouts
+
+### Two Columns (Sidebar + Main)
+
+```svelte
+<main class="grid grid-cols-[300px_1fr] overflow-hidden">
+  <aside class="border-border overflow-y-auto border-r p-4">
+    <!-- sidebar content -->
+  </aside>
+  <section class="overflow-hidden p-4">
+    <!-- main content -->
+  </section>
+</main>
+```
+
+### Three Columns
+
+```svelte
+<main class="grid grid-cols-[250px_1fr_300px] overflow-hidden">
+  <aside class="border-border overflow-y-auto border-r p-4">
+    <!-- left panel -->
+  </aside>
+  <section class="overflow-hidden p-4">
+    <!-- center content -->
+  </section>
+  <aside class="border-border overflow-y-auto border-l p-4">
+    <!-- right panel -->
+  </aside>
+</main>
+```
+
+### Grid of Cards
+
+```svelte
+<main class="grid grid-cols-2 grid-rows-2 gap-4 overflow-hidden p-4">
+  <Card class="max-h-full"><!-- panel 1 --></Card>
+  <Card class="max-h-full"><!-- panel 2 --></Card>
+  <Card class="max-h-full"><!-- panel 3 --></Card>
+  <Card class="max-h-full"><!-- panel 4 --></Card>
+</main>
+```
+
+## Key Tailwind Classes
+
+| Class                    | Purpose                                      |
+| ------------------------ | -------------------------------------------- |
+| `h-screen w-screen`      | Full viewport                                |
+| `overflow-hidden`        | Prevent scrolling (apply to root and panels) |
+| `grid-rows-[auto_1fr]`   | Menubar + fill content                       |
+| `grid-cols-[300px_1fr]`  | Fixed sidebar + fluid main                   |
+| `border-b border-border` | Semantic border for menubar                  |
+| `bg-background`          | Themed background                            |
+
+## Complete Example
+
+```svelte
+<!-- src/routes/+page.svelte -->
+<script>
+  import Menubar from '$lib/components/ui/Menubar.svelte';
+  import { Button } from '$lib/components/ui/button/index.js';
+  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
+</script>
+
+<div
+  class="bg-background text-foreground grid h-screen w-screen grid-rows-[auto_1fr] overflow-hidden"
+>
+  <Menubar>
+    <Button variant="link" class="text-muted-foreground">Send Report</Button>
+  </Menubar>
+
+  <main class="grid grid-cols-2 grid-rows-2 gap-4 overflow-hidden p-4">
+    <Card class="max-h-full">
+      <CardHeader><CardTitle>Panel 1</CardTitle></CardHeader>
+      <CardContent><!-- content --></CardContent>
+    </Card>
+    <Card class="max-h-full">
+      <CardHeader><CardTitle>Panel 2</CardTitle></CardHeader>
+      <CardContent><!-- content --></CardContent>
+    </Card>
+    <Card class="max-h-full">
+      <CardHeader><CardTitle>Panel 3</CardTitle></CardHeader>
+      <CardContent><!-- content --></CardContent>
+    </Card>
+    <Card class="max-h-full">
+      <CardHeader><CardTitle>Panel 4</CardTitle></CardHeader>
+      <CardContent><!-- content --></CardContent>
+    </Card>
+  </main>
+</div>
+```
+
+## Reference
+
+See `@rules/styling.md` for:
+
+- Complete semantic token reference
+- Tailwind v4 specifics and responsive patterns

package/files/skills/deploy-worker/SKILL.md

@@ -0,0 +1,231 @@
+---
+name: deploy-worker
+description: 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".
+---
+
+# Deploying a Worker
+
+Deploy SvelteKit projects built with the design system to Cloudflare Workers with GitHub Actions CI/CD that auto-deploys on merge to main.
+
+## Prerequisites
+
+```bash
+wrangler --version  # Requires v4.x+
+```
+
+If not installed:
+
+```bash
+npm install -D wrangler@latest
+```
+
+Authenticate:
+
+```bash
+wrangler login
+wrangler whoami  # Verify
+```
+
+## SvelteKit Adapter Setup
+
+Install the Cloudflare adapter:
+
+```bash
+npm install -D @sveltejs/adapter-cloudflare
+```
+
+Update `svelte.config.js`:
+
+```javascript
+import adapter from '@sveltejs/adapter-cloudflare';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;
+```
+
+## Wrangler Configuration
+
+Create `wrangler.jsonc` in the project root:
+
+```jsonc
+{
+  "$schema": "./node_modules/wrangler/config-schema.json",
+  "name": "my-app",
+  "main": ".svelte-kit/cloudflare/_worker.js",
+  "compatibility_date": "2026-01-01",
+  "compatibility_flags": ["nodejs_compat_v2"],
+
+  // Static assets from SvelteKit build
+  "assets": {
+    "directory": ".svelte-kit/cloudflare",
+    "binding": "ASSETS"
+  },
+
+  // Environment variables
+  "vars": {
+    "ENVIRONMENT": "production"
+  },
+
+  // Environments
+  "env": {
+    "staging": {
+      "name": "my-app-staging",
+      "vars": { "ENVIRONMENT": "staging" }
+    }
+  }
+}
+```
+
+> **Note**: Existing projects may use `wrangler.toml` instead of `wrangler.jsonc`. Both work, but JSONC is recommended for new projects as newer wrangler features are JSON-only.
+
+## Build and Initial Deploy
+
+```bash
+# Build the SvelteKit app
+npm run build
+
+# Dry run first to validate
+wrangler deploy --dry-run
+
+# Deploy to Cloudflare
+wrangler deploy
+```
+
+## CI/CD Auto-Deploy
+
+Always set up GitHub Actions so the project auto-deploys when changes are merged into main.
+
+Create `.github/workflows/deploy.yml`:
+
+```yaml
+name: Deploy
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run build
+      - run: npx wrangler deploy
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+```
+
+Required secret: `CLOUDFLARE_API_TOKEN` with Workers permissions. Remind the user to add this to their GitHub repo under Settings > Secrets and variables > Actions.
+
+If the user has a staging environment, extend the workflow:
+
+```yaml
+on:
+  push:
+    branches: [main, staging]
+
+# In the deploy step:
+- run: npx wrangler deploy ${{ github.ref_name == 'staging' && '--env staging' || '' }}
+```
+
+## Local Development
+
+```bash
+# SvelteKit dev server (preferred for development)
+npm run dev
+
+# Worker dev server (test Cloudflare-specific behavior)
+npm run build && wrangler dev
+```
+
+Use `wrangler dev` when you need to test:
+
+- Cloudflare bindings (KV, R2, D1)
+- Worker-specific routing
+- Production-like behavior
+
+## Secrets
+
+Never commit secrets to config. Use wrangler secrets for production and `.dev.vars` for local dev.
+
+```bash
+# Set a secret
+wrangler secret put API_KEY
+
+# List secrets
+wrangler secret list
+```
+
+For local development, create `.dev.vars` (gitignored):
+
+```
+API_KEY=local-dev-key
+```
+
+## Environments
+
+Deploy to staging or production:
+
+```bash
+# Deploy to staging
+wrangler deploy --env staging
+
+# Deploy to production (default)
+wrangler deploy
+```
+
+## Observability
+
+```bash
+# Stream live logs
+wrangler tail
+
+# Filter by errors
+wrangler tail --status error
+```
+
+Enable in config:
+
+```jsonc
+{
+  "observability": {
+    "enabled": true,
+    "head_sampling_rate": 1
+  }
+}
+```
+
+## Rollback
+
+```bash
+# List recent versions
+wrangler versions list
+
+# Rollback to previous version
+wrangler rollback
+```
+
+## Checklist
+
+- [ ] `@sveltejs/adapter-cloudflare` installed
+- [ ] `svelte.config.js` uses the Cloudflare adapter
+- [ ] `wrangler.jsonc` exists with correct `name` and `compatibility_date`
+- [ ] `npm run build` succeeds
+- [ ] `wrangler deploy --dry-run` passes
+- [ ] `.github/workflows/deploy.yml` created with auto-deploy on merge to main
+- [ ] User reminded to set `CLOUDFLARE_API_TOKEN` in GitHub repo secrets
+- [ ] Secrets set via `wrangler secret put` (not in config)
+- [ ] `.dev.vars` gitignored
+
+## Reference
+
+See [references/wrangler-commands.md](references/wrangler-commands.md) for the full wrangler CLI reference including KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Queues, Containers, Workflows, Pipelines, and Secrets Store commands.