@oneie/claude 0.6.0 → 0.7.0

package/skills/astro/create-component.md

@@ -1,29 +1,56 @@
 # Create React Component
 
 **Category:** astro
-**Version:** 1.0.0
-**Used By:** agent-frontend, agent-designer
+**Version:** 2.0.0
+**Used By:** `astro` skill · `/do` W3 edit wave
 
 ## Purpose
 
-Generates React component with TypeScript and shadcn/ui.
+Add a React 19 island under `one.ie/web/src/components/`, styled with the ONE 6-token
+design system. `.claude/rules/design.md` and `.claude/rules/react.md` auto-load on
+`*.tsx` — this file is the short version.
 
 ## Example
 
-```typescript
+```tsx
+// src/components/pricing/PricingTable.tsx
+import { cn } from "@/lib/utils"
+import { Card } from "@/components/ui/card"
+
 interface PricingTableProps {
-  tiers: number;
+  tiers: { name: string; price: number }[]
+  className?: string
 }
 
-export function PricingTable({ tiers }: PricingTableProps) {
+export function PricingTable({ tiers, className }: PricingTableProps) {
   return (
-    <div className="grid gap-6 md:grid-cols-3">
-      {/* Pricing cards */}
+    <div className={cn("grid gap-6 md:grid-cols-3", className)}>
+      {tiers.map((tier) => (
+        <Card key={tier.name} className="bg-foreground text-font p-6">
+          <h3 className="text-lg font-medium">{tier.name}</h3>
+          <p className="text-muted">${tier.price}/mo</p>
+        </Card>
+      ))}
     </div>
-  );
+  )
 }
 ```
 
+Rules that bite:
+
+- **Token classes only — never a hex value.** The 6 editable tokens are `background`,
+  `foreground`, `font`, `primary`, `secondary`, `tertiary`; plus the invariants
+  (`white`, `black`, `transparent`, `destructive`, `success`) and derived helpers
+  (`muted`, `border`, `on-primary`, …). `Layout.astro` sets `--color-*: initial`, so a
+  Tailwind default palette class emits **no CSS at all** — it fails silently.
+- Depth: L1 canvas is `background`, L2 chrome (cards, panels, sidebar) is `foreground`.
+- Take a `className?` and merge it through `cn` so callers can position the island.
+- Import shadcn primitives from `@/components/ui/*`; add new ones via the CLI, not by hand.
+- Mount it from the `.astro` page — `client:load` above the fold, `client:visible` below,
+  `client:only="react"` when the dependency tree is heavy.
+
 ## Version History
 
+- **2.0.0** (2026-08-02): Added the 6-token constraint, `cn`, the silent-failure trap,
+  and the hydration hand-off. The 1.0.0 example used none of the ONE conventions.
 - **1.0.0** (2025-10-18): Initial implementation

package/skills/astro/create-page.md

@@ -1,30 +1,59 @@
 # Create Astro Page
 
 **Category:** astro
-**Version:** 1.0.0
-**Used By:** agent-frontend, agent-builder
+**Version:** 2.0.0
+**Used By:** `astro` skill · `/do` W3 edit wave
 
 ## Purpose
 
-Generates Astro page with SSR, components, and proper routing.
+Add a route under `one.ie/web/src/pages/`. Decide first: prerendered shell (cheap, no
+worker) or SSR page (reads bindings). `output: 'server'` means SSR is the default —
+opt out explicitly.
 
 ## Example
 
+Prerendered shell — the common case. Modelled on the real `src/pages/activity.astro`:
+
 ```astro
 ---
-import Layout from '@/layouts/Layout.astro';
-import { Hero } from '@/components/Hero';
-import { PricingTable } from '@/components/PricingTable';
+export const prerender = true
+import Layout from "@/layouts/Layout.astro"
+import { ActivityFeed } from "@/components/activity/ActivityFeed"
+---
+
+<Layout title="Activity — ONE" sidebar="none">
+  <ActivityFeed client:only="react" />
+</Layout>
+```
+
+SSR page reading a Cloudflare binding — note the **dynamic** import; a top-level
+`import { env } from "cloudflare:workers"` breaks prerender and is used nowhere in
+this tree:
 
-const posts = await convex.query(api.queries.posts.list);
+```astro
+---
+export const prerender = false
+import Layout from "@/layouts/Layout.astro"
+import { Dashboard } from "@/components/Dashboard"
+
+const { env } = await import('cloudflare:workers' as string)
+const rows = await env.DB.prepare("SELECT id, name FROM things LIMIT 20").all()
 ---
 
-<Layout title="Landing Page">
-  <Hero client:load />
-  <PricingTable tiers={3} />
+<Layout title="Dashboard — ONE" sidebar="full">
+  <Dashboard client:load rows={rows.results} />
 </Layout>
 ```
 
+`Layout` requires `title`; useful optional props include `description`, `sidebar`
+(`none | mini | full | rail`) and the `chat*` family. Read `src/layouts/Layout.astro`
+for the full `Props` interface before inventing one.
+
+Hydration: above-fold → `client:load`, below-fold → `client:visible`, heavy deps →
+`client:only="react"`.
+
 ## Version History
 
+- **2.0.0** (2026-08-02): Replaced the Convex example (Convex is not a dependency of
+  this repo) with the two real page shapes and the dynamic `cloudflare:workers` import.
 - **1.0.0** (2025-10-18): Initial implementation

package/skills/astro/optimize-performance.md

@@ -1,21 +1,49 @@
 # Optimize Astro Performance
 
 **Category:** astro
-**Version:** 1.0.0
-**Used By:** agent-clean, agent-quality
+**Version:** 2.0.0
+**Used By:** `astro` skill · `/do` W4 verify wave
 
 ## Purpose
 
-Analyzes and optimizes Astro site performance.
+Cut worker bundle size and page latency in `one.ie/web`. Two separate budgets: the
+**upload** (gzip, gated at deploy) and the **request** (TTFB, measured in
+`text/speed.md`).
 
 ## Recommendations
 
-- Use `client:load` only when needed
-- Minimize JavaScript with islands
-- Optimize images with `@astrojs/image`
-- Enable view transitions
-- Use static generation where possible
+Bundle — the 5 LOCKED rules, authority `.claude/commands/deploy.md § Bundle Size Rules`:
+
+- `markdown: { syntaxHighlight: false }` — keeps ~5.8 MiB of Shiki grammars out.
+- `vite.ssr.external` for heavy client-only packages. **`astro.config.mjs` is the
+  authority for that list** — never trim it to match a snippet in a doc.
+- `export const prerender = true` + `client:only="react"` on shell pages, so the worker
+  ships no React for them.
+- `build: { inlineStylesheets: 'auto' }` — **never `'always'`** (~8 MiB at 100+ routes).
+- `react-dom/server` → `react-dom/server.edge` alias in production.
+
+Runtime:
+
+- Pick the cheapest hydration directive that works: `client:visible` below the fold,
+  `client:only="react"` for heavy trees, `client:load` only above the fold.
+- Smart Placement is on (`[placement] mode = "smart"` in `wrangler.toml`) — the isolate
+  runs near D1/R2/DO instead of at the visitor's PoP. Don't remove it; it was dropped
+  once in a config rewrite and cost ~1s of pre-flight per chat turn.
+- `optimizeDeps.include` / `ssr.optimizeDeps.include` in `astro.config.mjs` pre-bundle
+  React and friends at boot. Mid-session re-optimisation produces two `?v=` hashes for
+  react-dom and breaks hydration — add new hot deps to the list rather than debugging
+  the symptom.
+- Static assets come from the `[assets]` binding and don't count against request quota.
+
+Measure, don't guess: `text/speed.md` carries the real table (routing <0.005ms, KV read
+<10ms, `ask()` 50–200ms, chat TTFB p50 ~97ms, first SSE token ~500ms). Run
+`.claude/commands/deploy.md § Bundle Size Diagnosis` before optimising a bundle.
+
+**Not applicable here:** `@astrojs/image` — deprecated and not a dependency of this
+repo. Astro's built-in `astro:assets` replaces it.
 
 ## Version History
 
+- **2.0.0** (2026-08-02): Replaced generic advice with the 5 LOCKED bundle rules, Smart
+  Placement, the optimizeDeps trap, and the real speed table; dropped `@astrojs/image`.
 - **1.0.0** (2025-10-18): Initial implementation