@archetypeai/ds-cli 0.9.0 → 0.10.0

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

@@ -1,220 +0,0 @@
----
-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.
-
-> **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:
-
-1. Read `ds-manifest.json` at the project root — it lists every component in both packages (console + labs) with import subpaths and variant axes
-2. Components come from the npm packages (`@archetypeai/ds-ui-svelte-console`, `@archetypeai/ds-ui-svelte-labs`); also check `$lib/components/ui/` for registry-installed (modified) copies and prefer those when present
-3. If a required component does not exist in either tier, build it via `@skills/build-component`
-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)
-- **Cards fill available height** — cards must stretch to fill their grid cell or flex container. Add `max-h-full` to constrain content. For asymmetric layouts (stacked cards in one column, full-height card in another), use a flex column with `flex-1` on the card that should grow
-- **Consistent spacing** — always use `gap-4` between cards and `p-4` padding around the grid
-
-## Menubar
-
-Use the labs `Menubar` component. It renders a branded `<header>` with the Archetype AI Logo on the left. Pass action content as children. The Menubar includes a built-in dark mode toggle on the far right that toggles the host app's dark class (via the console `darkMode` store). To disable it, pass `darkToggle={false}`.
-
-**Every dashboard Menubar must include a "Send Report" button.** Additional actions can be appended alongside it.
-
-```svelte
-<script>
-  import Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
-  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
-</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 add a separator and partner logo beside the Archetype AI Logo:
-
-```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 edit design system files in `node_modules`** — compose and override via props/`class`
-- **Never rewrite or replace** registry-installed component source in `$lib/components/ui/` unless the user asked you to modify that component
-- 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 '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
-  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
-</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 (Equal)
-
-```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>
-```
-
-### Asymmetric Cards (Stacked Left + Full-Height Right)
-
-When one column has multiple cards and the other has a single tall card, use `grid-rows-subgrid` or nested flex columns. Cards must stretch to fill available height — never leave empty space at the bottom.
-
-```svelte
-<main class="grid grid-cols-[1fr_2fr] gap-4 overflow-hidden p-4">
-  <!-- Left column: stacked cards that fill height -->
-  <div class="flex flex-col gap-4 overflow-hidden">
-    <Card class="max-h-full"><!-- input --></Card>
-    <Card class="max-h-full"><!-- status --></Card>
-    <Card class="max-h-full flex-1"><!-- summary (grows to fill remaining space) --></Card>
-  </div>
-  <!-- Right column: single card spanning full height -->
-  <Card class="max-h-full overflow-hidden"><!-- log / results --></Card>
-</main>
-```
-
-The `flex-1` on the last left-column card makes it grow to fill remaining vertical space. Adjust column ratio (`1fr_2fr`, `1fr_1fr`, etc.) to match content needs.
-
-## 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 '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
-  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
-  import { Card, CardHeader, CardTitle, CardContent } from '@archetypeai/ds-ui-svelte-console/primitives/card';
-</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>
-```
-
-## Populating Panels
-
-Panels should contain components, not raw markup. Before building new components:
-
-1. Read `ds-manifest.json` to discover available components in both tiers. Each has a `description` summarizing its purpose. If one fits, use it.
-2. If no existing component fits, create one via `@skills/build-component`
-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:
-
-- Complete semantic token reference
-- Tailwind v4 specifics and responsive patterns

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

@@ -1,231 +0,0 @@
----
-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.