@archetypeai/ds-cli 0.3.7

package/files/skills/deploy-worker/references/wrangler-commands.md

@@ -0,0 +1,327 @@
+# Wrangler Command Reference
+
+Full reference for wrangler CLI commands. Only load this when you need detailed command syntax beyond what's in SKILL.md.
+
+## Core Commands
+
+| Task                      | Command                     |
+| ------------------------- | --------------------------- |
+| Start local dev server    | `wrangler dev`              |
+| Deploy to Cloudflare      | `wrangler deploy`           |
+| Deploy dry run            | `wrangler deploy --dry-run` |
+| Generate TypeScript types | `wrangler types`            |
+| Validate configuration    | `wrangler check`            |
+| View live logs            | `wrangler tail`             |
+| Delete Worker             | `wrangler delete`           |
+| Auth status               | `wrangler whoami`           |
+
+## Local Development
+
+```bash
+# Local mode (default) - uses local storage simulation
+wrangler dev
+
+# With specific environment
+wrangler dev --env staging
+
+# Custom port
+wrangler dev --port 8787
+
+# Live reload for HTML changes
+wrangler dev --live-reload
+
+# Test scheduled/cron handlers
+wrangler dev --test-scheduled
+# Then visit: http://localhost:8787/__scheduled
+```
+
+### Local Secrets
+
+Create `.dev.vars` for local development secrets:
+
+```
+API_KEY=local-dev-key
+DATABASE_URL=postgres://localhost:5432/dev
+```
+
+## Deployment
+
+```bash
+# Deploy to production
+wrangler deploy
+
+# Deploy specific environment
+wrangler deploy --env staging
+
+# Dry run (validate without deploying)
+wrangler deploy --dry-run
+
+# Keep dashboard-set variables
+wrangler deploy --keep-vars
+
+# Minify code
+wrangler deploy --minify
+```
+
+### Manage Secrets
+
+```bash
+# Set secret interactively
+wrangler secret put API_KEY
+
+# Set from stdin
+echo "secret-value" | wrangler secret put API_KEY
+
+# List secrets
+wrangler secret list
+
+# Delete secret
+wrangler secret delete API_KEY
+
+# Bulk secrets from JSON file
+wrangler secret bulk secrets.json
+```
+
+### Versions and Rollback
+
+```bash
+# List recent versions
+wrangler versions list
+
+# Rollback to previous version
+wrangler rollback
+
+# Rollback to specific version
+wrangler rollback <VERSION_ID>
+```
+
+## KV (Key-Value Store)
+
+```bash
+# Create namespace
+wrangler kv namespace create MY_KV
+
+# List namespaces
+wrangler kv namespace list
+
+# Put/get/delete values
+wrangler kv key put --namespace-id <ID> "key" "value"
+wrangler kv key get --namespace-id <ID> "key"
+wrangler kv key delete --namespace-id <ID> "key"
+
+# Bulk put from JSON
+wrangler kv bulk put --namespace-id <ID> data.json
+```
+
+Config binding:
+
+```jsonc
+{ "kv_namespaces": [{ "binding": "CACHE", "id": "<NAMESPACE_ID>" }] }
+```
+
+## R2 (Object Storage)
+
+```bash
+# Create bucket
+wrangler r2 bucket create my-bucket
+
+# Upload/download/delete objects
+wrangler r2 object put my-bucket/path/file.txt --file ./local-file.txt
+wrangler r2 object get my-bucket/path/file.txt
+wrangler r2 object delete my-bucket/path/file.txt
+```
+
+Config binding:
+
+```jsonc
+{ "r2_buckets": [{ "binding": "ASSETS", "bucket_name": "my-bucket" }] }
+```
+
+## D1 (SQL Database)
+
+```bash
+# Create database
+wrangler d1 create my-database
+
+# Execute SQL
+wrangler d1 execute my-database --remote --command "SELECT * FROM users"
+wrangler d1 execute my-database --remote --file ./schema.sql
+
+# Migrations
+wrangler d1 migrations create my-database create_users_table
+wrangler d1 migrations apply my-database --remote
+
+# Export
+wrangler d1 export my-database --remote --output backup.sql
+```
+
+Config binding:
+
+```jsonc
+{ "d1_databases": [{ "binding": "DB", "database_name": "my-db", "database_id": "<DB_ID>" }] }
+```
+
+## Vectorize
+
+```bash
+wrangler vectorize create my-index --dimensions 768 --metric cosine
+wrangler vectorize insert my-index --file vectors.ndjson
+wrangler vectorize query my-index --vector "[0.1, 0.2, ...]" --top-k 10
+```
+
+Config binding:
+
+```jsonc
+{ "vectorize": [{ "binding": "INDEX", "index_name": "my-index" }] }
+```
+
+## Hyperdrive
+
+```bash
+wrangler hyperdrive create my-hyperdrive \
+  --connection-string "postgres://user:pass@host:5432/database"
+```
+
+Config binding:
+
+```jsonc
+{
+  "compatibility_flags": ["nodejs_compat_v2"],
+  "hyperdrive": [{ "binding": "HYPERDRIVE", "id": "<HYPERDRIVE_ID>" }]
+}
+```
+
+## Workers AI
+
+Config binding:
+
+```jsonc
+{ "ai": { "binding": "AI" } }
+```
+
+Workers AI always runs remotely and incurs usage charges even in local dev.
+
+## Queues
+
+```bash
+wrangler queues create my-queue
+wrangler queues consumer add my-queue my-worker
+```
+
+Config binding:
+
+```jsonc
+{
+  "queues": {
+    "producers": [{ "binding": "MY_QUEUE", "queue": "my-queue" }],
+    "consumers": [{ "queue": "my-queue", "max_batch_size": 10 }]
+  }
+}
+```
+
+## Containers
+
+```bash
+wrangler containers build -t my-app:latest . --push
+wrangler containers list
+```
+
+## Workflows
+
+```bash
+wrangler workflows trigger my-workflow --params '{"key": "value"}'
+wrangler workflows instances list my-workflow
+```
+
+Config binding:
+
+```jsonc
+{ "workflows": [{ "binding": "MY_WORKFLOW", "name": "my-workflow", "class_name": "MyWorkflow" }] }
+```
+
+## Pipelines
+
+```bash
+wrangler pipelines create my-pipeline --r2 my-bucket
+```
+
+Config binding:
+
+```jsonc
+{ "pipelines": [{ "binding": "MY_PIPELINE", "pipeline": "my-pipeline" }] }
+```
+
+## Secrets Store
+
+```bash
+wrangler secrets-store store create my-store
+wrangler secrets-store secret put <STORE_ID> my-secret
+```
+
+Config binding:
+
+```jsonc
+{
+  "secrets_store_secrets": [
+    { "binding": "MY_SECRET", "store_id": "<STORE_ID>", "secret_name": "my-secret" }
+  ]
+}
+```
+
+## Pages (Frontend Deployment)
+
+```bash
+wrangler pages project create my-site
+wrangler pages deploy ./dist
+wrangler pages deploy ./dist --branch main
+wrangler pages deployment list --project-name my-site
+```
+
+## Observability
+
+```bash
+# Stream live logs
+wrangler tail
+wrangler tail --status error
+wrangler tail --search "error"
+wrangler tail --format json
+```
+
+Config:
+
+```jsonc
+{ "observability": { "enabled": true, "head_sampling_rate": 1 } }
+```
+
+## Testing with Vitest
+
+```bash
+npm install -D @cloudflare/vitest-pool-workers vitest
+```
+
+`vitest.config.ts`:
+
+```typescript
+import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';
+
+export default defineWorkersConfig({
+  test: {
+    poolOptions: {
+      workers: {
+        wrangler: { configPath: './wrangler.jsonc' }
+      }
+    }
+  }
+});
+```
+
+## Troubleshooting
+
+| Issue                           | Solution                                   |
+| ------------------------------- | ------------------------------------------ |
+| `command not found: wrangler`   | `npm install -D wrangler`                  |
+| Auth errors                     | `wrangler login`                           |
+| Config validation errors        | `wrangler check`                           |
+| Type errors after config change | `wrangler types`                           |
+| Local storage not persisting    | Check `.wrangler/state` directory          |
+| Binding undefined in Worker     | Verify binding name matches config exactly |

package/files/skills/fix-accessibility/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: fix-accessibility
+description: Audits and fixes accessibility issues in projects using shadcn-svelte and the Archetype AI design system. Use when running an a11y audit, fixing WCAG violations, adding aria labels, improving keyboard navigation, fixing focus management, adding screen reader support, or when the user mentions "accessibility", "a11y", "aria", "screen reader", or "keyboard navigation".
+---
+
+# Fixing Accessibility
+
+Audit and fix accessibility issues in projects built with the design system.
+
+## Audit Process
+
+Walk through the project in this order:
+
+1. **Icon-only buttons** — search for `<Button size="icon"` and similar patterns, verify each has `aria-label`
+2. **Decorative icons** — icons next to text labels should have `aria-hidden="true"`
+3. **Form inputs** — verify `aria-invalid` support for error states
+4. **Focus rings** — confirm all interactive elements have `focus-visible:ring-*` styles
+5. **Disabled states** — check `disabled:pointer-events-none disabled:opacity-50`
+6. **Lists and groups** — verify `role="list"`, `role="listitem"`, `role="group"` where appropriate
+7. **Screen reader text** — add `sr-only` spans where visual context is missing
+8. **Keyboard navigation** — tab through the entire UI, verify all controls are reachable
+9. **Dialog focus traps** — open dialogs, confirm focus is trapped and Escape closes them
+
+## Common Issues and Fixes
+
+### Icon-Only Buttons Missing aria-label
+
+```svelte
+<!-- Before -->
+<Button size="icon">
+  <SearchIcon />
+</Button>
+
+<!-- After -->
+<Button size="icon" aria-label="Search">
+  <SearchIcon />
+</Button>
+```
+
+### Decorative Icons Missing aria-hidden
+
+Icons next to visible text labels are decorative and should be hidden from screen readers:
+
+```svelte
+<!-- Before -->
+<Button>
+  <PlusIcon />
+  Add Item
+</Button>
+
+<!-- After -->
+<Button>
+  <PlusIcon aria-hidden="true" />
+  Add Item
+</Button>
+```
+
+### Inputs Missing aria-invalid
+
+Form inputs should reflect validation state:
+
+```svelte
+<!-- Before -->
+<Input class={errors.email ? 'border-destructive' : ''} />
+
+<!-- After -->
+<Input aria-invalid={errors.email ? true : undefined} />
+```
+
+The design system primitives already style `aria-invalid` with destructive border and ring colors — no extra classes needed.
+
+### Missing Focus Ring Styles
+
+Interactive elements must have visible focus indicators:
+
+```svelte
+<button
+  class={cn(
+    'outline-none',
+    'focus-visible:border-ring',
+    'focus-visible:ring-ring/50',
+    'focus-visible:ring-[3px]'
+  )}
+>
+```
+
+Design system primitives include these by default. Custom interactive elements must add them manually.
+
+### Disabled States Not Preventing Interaction
+
+```svelte
+<!-- For native elements -->
+<button
+  class="disabled:pointer-events-none disabled:opacity-50"
+  disabled={isDisabled}
+>
+
+<!-- For links styled as buttons -->
+<a
+  href={disabled ? undefined : href}
+  aria-disabled={disabled}
+  tabindex={disabled ? -1 : undefined}
+  class="aria-disabled:pointer-events-none aria-disabled:opacity-50"
+>
+```
+
+### Missing Roles on Lists and Groups
+
+```svelte
+<!-- Lists -->
+<div role="list">
+  {#each items as item}
+    <div role="listitem">{item}</div>
+  {/each}
+</div>
+
+<!-- Button groups -->
+<div role="group" aria-label="Text formatting">
+  <Button>Bold</Button>
+  <Button>Italic</Button>
+</div>
+
+<!-- Loading indicators -->
+<svg role="status" aria-label="Loading" class="animate-spin">...</svg>
+```
+
+### Missing Screen Reader Text
+
+Add visually hidden text where icons or visual cues carry meaning:
+
+```svelte
+<button>
+  <XIcon />
+  <span class="sr-only">Close</span>
+</button>
+```
+
+## Keyboard Navigation for Custom Elements
+
+When building custom interactive elements (not using bits-ui primitives), ensure keyboard support:
+
+```svelte
+<div
+  role="button"
+  tabindex="0"
+  onkeydown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  }}
+  onclick={handleClick}
+>
+```
+
+## Dialog and Popover Focus Traps
+
+bits-ui handles focus trapping automatically for Dialog, Popover, Command, and Select. Verify:
+
+- Focus moves into the dialog when opened
+- Tab cycles within the dialog (does not escape)
+- Escape closes the dialog
+- Focus returns to the trigger element after close
+
+If focus trapping is broken, check that the bits-ui primitive is used correctly and not wrapped in a way that breaks the DOM structure.
+
+## Verification Checklist
+
+After fixing, walk through the project and confirm:
+
+- [ ] All icon-only buttons have `aria-label`
+- [ ] All decorative icons have `aria-hidden="true"`
+- [ ] Form inputs support `aria-invalid` styling
+- [ ] All interactive elements have visible focus rings
+- [ ] Disabled states prevent interaction and reduce opacity
+- [ ] Loading indicators use `role="status"`
+- [ ] Lists use `role="list"` and `role="listitem"`
+- [ ] Groups use `role="group"` with `aria-label`
+- [ ] Tab navigation reaches all interactive elements
+- [ ] Dialogs trap focus and close with Escape
+
+## Reference
+
+See `@rules/accessibility.md` for the complete accessibility rules and patterns.

package/files/skills/fix-metadata/SKILL.md

@@ -0,0 +1,118 @@
+---
+name: fix-metadata
+description: Updates a SvelteKit project's metadata including page titles, favicons, meta descriptions, Open Graph tags, and SEO tags. Use when updating the favicon, setting page titles, adding OG tags, fixing SEO metadata, branding a project's tab/title, or when the user mentions "metadata", "favicon", "page title", "OG tags", or "SEO".
+---
+
+# Fixing Metadata
+
+Update page titles, favicons, and meta tags in SvelteKit projects using the design system.
+
+## Where Metadata Lives
+
+| Location                     | What goes there                                                  |
+| ---------------------------- | ---------------------------------------------------------------- |
+| `src/app.html`               | Favicon `<link>`, charset, viewport, base HTML                   |
+| `src/routes/+layout.svelte`  | Global `<svelte:head>` for site-wide title, description, OG tags |
+| `src/routes/**/+page.svelte` | Per-route `<svelte:head>` for page-specific titles               |
+
+## Favicon
+
+### Install the ATAI Favicon
+
+This skill ships with the default Archetype AI favicon in `assets/favicon.ico`. Copy it to the project:
+
+```bash
+cp assets/favicon.ico static/favicon.ico
+```
+
+### Update app.html
+
+Ensure `src/app.html` references the favicon:
+
+```html
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-prerender="true">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
+```
+
+For SVG favicons (sharper at all sizes):
+
+```html
+<link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
+<link rel="icon" href="%sveltekit.assets%/favicon.ico" sizes="any" />
+```
+
+## Page Title and Description
+
+Add a global `<svelte:head>` in the root layout:
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+  let { children } = $props();
+</script>
+
+<svelte:head>
+  <title>My App — Archetype AI</title>
+  <meta name="description" content="Brief description of the application." />
+</svelte:head>
+
+{@render children?.()}
+```
+
+## Open Graph Tags
+
+Add OG tags for social sharing previews:
+
+```svelte
+<svelte:head>
+  <title>My App — Archetype AI</title>
+  <meta name="description" content="Brief description of the application." />
+
+  <!-- Open Graph -->
+  <meta property="og:title" content="My App — Archetype AI" />
+  <meta property="og:description" content="Brief description of the application." />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content="https://example.com/og-image.png" />
+  <meta property="og:url" content="https://example.com" />
+
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="My App — Archetype AI" />
+  <meta name="twitter:description" content="Brief description of the application." />
+  <meta name="twitter:image" content="https://example.com/og-image.png" />
+</svelte:head>
+```
+
+## Per-Route Metadata
+
+Override the global title on specific pages:
+
+```svelte
+<!-- src/routes/dashboard/+page.svelte -->
+<svelte:head>
+  <title>Dashboard — My App</title>
+</svelte:head>
+
+<!-- page content -->
+```
+
+SvelteKit merges `<svelte:head>` from layouts and pages — the most specific (page-level) wins for duplicate tags like `<title>`.
+
+## Verification
+
+- [ ] `static/favicon.ico` exists and is the ATAI favicon
+- [ ] `app.html` has `<link rel="icon">` pointing to the favicon
+- [ ] Root layout has `<svelte:head>` with title and description
+- [ ] OG tags are present if social sharing is needed
+- [ ] Per-route pages override title where appropriate
+- [ ] Browser tab shows the correct favicon and title