opencode-starterkit 1.0.1

package/baseline/skill/frontend-design/references/design/interaction.md

@@ -0,0 +1,149 @@
+# Interaction Design
+
+## The 8 Interactive States
+
+Every interactive element must design for ALL of these:
+
+| State    | When                  | Visual Treatment                              |
+| -------- | --------------------- | --------------------------------------------- |
+| Default  | Resting               | Base appearance                               |
+| Hover    | Cursor over (desktop) | Subtle shift — color, shadow, or translate    |
+| Focus    | Keyboard navigation   | `:focus-visible` ring (NOT `:focus`)          |
+| Active   | Being pressed/clicked | Compressed/depressed feedback                 |
+| Disabled | Not available         | Reduced opacity (0.5) + `cursor: not-allowed` |
+| Loading  | Processing            | Spinner or skeleton, disable interaction      |
+| Error    | Validation failed     | Red border + error message below              |
+| Success  | Action completed      | Green confirmation, brief                     |
+
+## Focus Management
+
+```css
+/* Remove default focus for mouse, show for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+```
+
+**Focus ring rules:**
+
+- 2-3px thick
+- Offset from element edge
+- 3:1 minimum contrast against adjacent colors
+- Consistent style across ALL interactive elements
+
+## Native Dialog + Inert
+
+Use `<dialog>` with the `inert` attribute — eliminates complex focus-trapping JS:
+
+```html
+<dialog id="modal">
+  <form method="dialog">
+    <h2>Confirm action</h2>
+    <button value="cancel">Cancel</button>
+    <button value="confirm">Confirm</button>
+  </form>
+</dialog>
+
+<main id="content">…</main>
+
+<script>
+  const modal = document.getElementById("modal");
+  modal.showModal();
+  document.getElementById("content").inert = true;
+</script>
+```
+
+## Popover API
+
+For tooltips, dropdowns, and popovers — light-dismiss, proper stacking, accessible by default:
+
+```html
+<button popovertarget="menu">Options</button>
+<div id="menu" popover>
+  <button>Edit</button>
+  <button>Delete</button>
+</div>
+```
+
+No z-index wars. No portal wrappers. Built-in light dismiss.
+
+## Form Validation Timing
+
+- **Validate on blur**, not on keystroke (exception: password strength meters)
+- Show errors below the field, not in toast/alert
+- Inline validation: red border + message appears when field loses focus and is invalid
+- Clear error when user starts correcting
+
+## Loading Patterns
+
+| Pattern          | Use When                          | Why                                    |
+| ---------------- | --------------------------------- | -------------------------------------- |
+| Skeleton screens | Page/component loading            | Previews content shape, feels faster   |
+| Inline spinner   | Button action processing          | Keeps context, shows progress          |
+| Progress bar     | Known duration (upload, download) | Sets expectations                      |
+| Optimistic UI    | Low-stakes actions (like, toggle) | Update immediately, sync in background |
+
+**Avoid**: Full-page spinners, blocking modals for non-destructive actions.
+
+## Undo Over Confirmation
+
+Users click through confirmation dialogs mindlessly. Prefer undo:
+
+```
+❌ "Are you sure you want to delete?" → [Cancel] [Delete]
+✅ Item deleted. [Undo] (5 second window)
+```
+
+Exception: irreversible actions with severe consequences (account deletion, payment).
+
+## Touch Target Expansion
+
+Visual size can be small; tap target must be 44x44px minimum:
+
+```css
+.icon-button {
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+.icon-button::before {
+  content: "";
+  position: absolute;
+  inset: -10px; /* Expands tap area to 44x44 */
+}
+```
+
+## Scroll Behavior
+
+```css
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 80px; /* Account for sticky header */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+```
+
+## Z-Index Scale
+
+Named semantic layers prevent z-index wars:
+
+```css
+@theme {
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-modal-backdrop: 30;
+  --z-modal: 40;
+  --z-toast: 50;
+  --z-tooltip: 60;
+}
+```

package/baseline/skill/frontend-design/references/design/typography-rules.md

@@ -0,0 +1,106 @@
+# Typography Rules
+
+## Core Principles
+
+Typography carries hierarchy before color or decoration. Prioritize readability, rhythm, and intent.
+
+- Use a single type scale ratio across the interface
+- Keep body text highly readable before styling display text
+- Limit font families: one display + one body (optional mono for code/data)
+- Use weight and size for hierarchy before using color
+
+## Fluid Type with clamp()
+
+Use fluid sizing for responsive typography without breakpoint jumps:
+
+```css
+@theme {
+  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
+  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
+  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+  --text-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
+}
+```
+
+Never use fixed `px` for body text.
+
+## Modular Scale
+
+Pick one ratio and stick to it:
+
+- **1.25** (major third) for practical UI
+- **1.333** (perfect fourth) for editorial styles
+
+Limit to 5-7 text sizes. Too many sizes destroys rhythm.
+
+## Line Length and Rhythm
+
+- Body measure: `max-width: 65ch`
+- Comfortable line height: `1.45-1.7` for body text
+- Tight headings: `1.05-1.25`
+- Keep spacing tied to text rhythm (4pt system)
+
+```css
+.article {
+  font-size: var(--text-base);
+  line-height: 1.6;
+  max-width: 65ch;
+}
+```
+
+## Font Selection
+
+Avoid default AI fingerprints:
+
+- Banned as primary display fonts: Inter, Roboto, Arial, Open Sans, Lato, Montserrat, Space Grotesk, system-ui
+
+Preferred directions:
+
+- Sans: Instrument Sans, Plus Jakarta Sans, Outfit, Onest, Figtree, Urbanist
+- Editorial serif: Fraunces, Newsreader
+
+## OpenType Features
+
+Use OpenType intentionally:
+
+```css
+.data-table {
+  font-variant-numeric: tabular-nums;
+}
+
+.recipe {
+  font-variant-numeric: diagonal-fractions;
+}
+
+.abbrev {
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.04em;
+}
+```
+
+## Dark Mode Typography
+
+Light-on-dark text appears heavier. Adjust:
+
+- Increase line height by `+0.05` to `+0.1`
+- Reduce font weight if text feels too dense
+- Avoid pure white text; use slightly tinted near-white
+
+```css
+@media (prefers-color-scheme: dark) {
+  body {
+    line-height: 1.65;
+    color: oklch(0.93 0.01 264);
+  }
+}
+```
+
+## Quick Audit Checklist
+
+- [ ] Body text uses `rem` or `em`, not `px`
+- [ ] Type scale uses one ratio (1.25 or 1.333)
+- [ ] Body lines capped around 65ch
+- [ ] Headings and body have distinct line-height behavior
+- [ ] OpenType features used for data/fractions/abbreviations where relevant
+- [ ] Dark mode typography adjusted (not just color-inverted)

package/baseline/skill/frontend-design/references/design/ux-writing.md

@@ -0,0 +1,99 @@
+# UX Writing
+
+## Button Labels
+
+Specific verb + object. Never generic:
+
+| Bad        | Good            | Why                            |
+| ---------- | --------------- | ------------------------------ |
+| OK         | Save changes    | Says what happens              |
+| Submit     | Create account  | Describes the outcome          |
+| Yes        | Delete message  | Confirms what gets deleted     |
+| Cancel     | Keep editing    | Tells user what "cancel" means |
+| Click here | Download report | Verb + object, no "click"      |
+
+## Error Messages
+
+Three-part formula — every time:
+
+1. **What happened** (not "Error occurred")
+2. **Why** (if known)
+3. **How to fix**
+
+```
+
+Bad: "Error: Invalid input"
+Bad: "Something went wrong"
+Bad: "Oops! That didn't work"
+
+Good: "Email address is invalid. Check for typos or use a different address."
+Good: "Payment declined — your card issuer rejected the charge. Try a different card or contact your bank."
+Good: "File too large (52 MB). Maximum size is 25 MB. Compress the file or split it into parts."
+```
+
+**Never use humor for errors.** Users are frustrated — be helpful, not cute.
+
+## Empty States
+
+Empty states are **onboarding opportunities**, not blank screens:
+
+1. **Acknowledge**: "No messages yet"
+2. **Explain value**: "Messages from your team will appear here"
+3. **Clear action**: [Start a conversation]
+
+```
+
+Bad: (blank white space)
+Bad: "No data"
+Bad: "Nothing to show"
+
+Good: "No projects yet — Create your first project to get started" [Create project]
+```
+
+## Confirmation vs Information
+
+| Type        | Pattern                                   | Example                                |
+| ----------- | ----------------------------------------- | -------------------------------------- |
+| Success     | Brief toast (auto-dismiss 3-5s)           | "Changes saved"                        |
+| Warning     | Inline banner (persistent, dismissible)   | "Your trial ends in 3 days"            |
+| Error       | Inline at source (persistent until fixed) | "Password must be 8+ characters"       |
+| Destructive | Confirmation dialog (requires action)     | "Delete account? This can't be undone" |
+
+## Consistent Terminology
+
+Pick ONE term and use it everywhere:
+
+| Pick one         | Not these                           |
+| ---------------- | ----------------------------------- |
+| Delete           | Remove, Trash, Erase, Destroy       |
+| Settings         | Preferences, Options, Configuration |
+| Log in / Log out | Sign in / Sign out (pick a pair)    |
+| Save             | Submit, Apply, Update, Confirm      |
+
+## Voice vs Tone
+
+- **Voice** = consistent brand personality (always the same)
+- **Tone** = adapts to moment:
+  - Success → celebratory, brief
+  - Error → empathetic, helpful
+  - Onboarding → encouraging, clear
+  - Warning → direct, specific
+
+## Internationalization
+
+- **Plan for 30% text expansion** — German, French, Finnish expand significantly
+- Design layouts with flexible text containers
+- Never truncate translated text without tooltip/expansion
+- Use ICU message format for plurals: `{count, plural, one {# item} other {# items}}`
+- Right-to-left (RTL) support: use logical properties (`margin-inline-start` not `margin-left`)
+
+## Microcopy Checklist
+
+- [ ] All buttons use verb + object
+- [ ] All errors follow 3-part formula
+- [ ] All empty states have acknowledgment + value + action
+- [ ] Terminology is consistent across all screens
+- [ ] No humor in error states
+- [ ] No "click here" or "click below"
+- [ ] No ALL CAPS for body text (small-caps for abbreviations only)
+- [ ] Loading states have context ("Loading messages..." not "Loading...")

package/baseline/skill/frontend-design/references/shadcn/accessibility.md

@@ -0,0 +1,132 @@
+# shadcn/ui Accessibility
+
+ARIA patterns, keyboard navigation, screen reader support via Radix UI.
+
+## Radix Foundation
+
+Built-in: keyboard navigation, screen reader announcements, focus management, ARIA automatic.
+
+## Keyboard Navigation
+
+### Focus Management
+```tsx
+<Button className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+
+<!-- Skip link -->
+<a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2">
+  Skip to content
+</a>
+```
+
+### Dialog
+Focus trapped automatically. Esc closes, Tab cycles.
+
+### Dropdown/Menu
+- Space/Enter: Open
+- Arrow Up/Down: Navigate
+- Esc: Close
+- Tab: Close and move focus
+
+## Screen Reader
+
+### ARIA Labels
+```tsx
+<Button aria-label="Close dialog"><X /></Button>
+<Input aria-label="Email address" type="email" />
+
+<Button aria-describedby="delete-desc">Delete</Button>
+<p id="delete-desc" className="sr-only">Permanently deletes account</p>
+```
+
+### Screen Reader Only
+```tsx
+<Button>
+  <Trash className="h-4 w-4" />
+  <span className="sr-only">Delete item</span>
+</Button>
+```
+
+### Live Regions
+```tsx
+<div aria-live="polite">{message}</div>
+<div aria-live="assertive">{error}</div>
+```
+
+## Forms
+
+### Labels
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" type="email" />
+```
+
+### Validation
+```tsx
+<Input aria-invalid={!!error} aria-describedby={error ? "email-error" : undefined} />
+<FormMessage id="email-error" />
+```
+
+### Required Fields
+```tsx
+<Label htmlFor="name">
+  Name <span className="text-destructive">*</span>
+  <span className="sr-only">(required)</span>
+</Label>
+```
+
+### Fieldset
+```tsx
+<fieldset>
+  <legend className="text-lg font-semibold mb-4">Contact Info</legend>
+  <FormField name="email" />
+</fieldset>
+```
+
+## Color Contrast
+
+WCAG AA: 4.5:1 normal text, 3:1 large text.
+
+```tsx
+// Good
+<p className="text-foreground">Primary</p>
+<p className="text-muted-foreground">Secondary</p>
+
+// Avoid
+<p className="text-gray-400">Hard to read</p>
+```
+
+## Focus Indicators
+
+Always visible:
+```tsx
+<Button className="focus-visible:ring-2 focus-visible:ring-ring">
+
+// Never: focus:outline-none without replacement
+// Use focus-visible instead
+```
+
+## Motion Preferences
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+```
+
+```tsx
+<div className="transition-all motion-reduce:transition-none">
+```
+
+## Checklist
+
+- [ ] All interactive elements keyboard accessible
+- [ ] Focus indicators visible
+- [ ] Screen reader announces correctly
+- [ ] Form errors announced
+- [ ] Color contrast WCAG AA
+- [ ] Semantic HTML
+- [ ] ARIA labels for icon buttons
+- [ ] Modal focus trap works
+- [ ] Respects reduced motion
+- [ ] Works at 200% zoom
+- [ ] Skip links provided

package/baseline/skill/frontend-design/references/shadcn/core-components.md

@@ -0,0 +1,153 @@
+# shadcn/ui Core Components
+
+Button, Card, Dialog, Select, Tabs, Toast, Command, Sidebar, Table.
+
+## Button
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+<Button variant="default">Default</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button size="icon"><Icon /></Button>
+```
+
+## Card
+
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>Content</CardContent>
+  <CardFooter><Button>Action</Button></CardFooter>
+</Card>
+```
+
+## Dialog
+
+```tsx
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+
+<Dialog>
+  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure?</DialogTitle>
+      <DialogDescription>Cannot be undone.</DialogDescription>
+    </DialogHeader>
+    <DialogFooter><Button>Confirm</Button></DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+
+## Select
+
+```tsx
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## Tabs
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings</TabsContent>
+  <TabsContent value="password">Password settings</TabsContent>
+</Tabs>
+```
+
+## Toast (Sonner)
+
+```tsx
+import { toast } from "sonner"
+
+toast("Event created")
+toast.success("Saved")
+toast.error("Failed")
+toast.promise(saveData(), { loading: "Saving...", success: "Done!", error: "Error" })
+```
+
+## Command
+
+```tsx
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+
+<Command>
+  <CommandInput placeholder="Search..." />
+  <CommandList>
+    <CommandEmpty>No results.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+```
+
+## Sidebar
+
+```tsx
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from "@/components/ui/sidebar"
+
+<Sidebar>
+  <SidebarContent>
+    <SidebarGroup>
+      <SidebarGroupLabel>App</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton asChild>
+            <a href="/dashboard"><HomeIcon />Dashboard</a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  </SidebarContent>
+</Sidebar>
+```
+
+## Table
+
+```tsx
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
+
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead>Name</TableHead>
+      <TableHead>Status</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```