@ultrakit/ultrakit 0.0.0

package/dist/template/.opencode/skill/frontend-design/references/canvas/execution.md

@@ -0,0 +1,90 @@
+# Canvas Design Execution
+
+Implementation, multi-page systems, quality standards.
+
+## Subtle Reference Integration
+
+Embed conceptual DNA without announcing:
+- Niche reference woven invisibly
+- Those who know feel it intuitively
+- Others experience masterful composition
+- Sophisticated, never literal
+
+## Multi-Page Systems
+
+### Approach
+- First page as single page in coffee table book
+- Distinctly different but cohesive
+- Pages tell story tastefully
+
+### Consistency
+- Shared color palette
+- Consistent typography
+- Related composition
+- Philosophical thread
+
+### Variation
+- Unique twist per page
+- Different focal points
+- Varied arrangements
+- Progressive narrative
+
+## Execution Checklist
+
+Before finalizing:
+- [ ] Philosophy guides every decision
+- [ ] 90% visual, 10% text max
+- [ ] Text minimal and integrated
+- [ ] Nothing overlaps or falls off page
+- [ ] Margins pristine
+- [ ] Composition cohesive
+- [ ] Meticulously crafted appearance
+- [ ] Master-level execution
+- [ ] Could be displayed in museum
+
+## Quality Standards
+
+### Avoid
+- Cartoony aesthetics
+- Amateur execution
+- Text-heavy composition
+- Random placement
+- Overlapping elements
+- Inconsistent spacing
+- Generic AI generation
+
+### Achieve
+- Museum quality
+- Magazine worthy
+- Art object status
+- Top-of-field craftsmanship
+- Philosophical coherence
+- Visual sophistication
+- Systematic precision
+
+## Refinement Process
+
+### Initial Pass
+Create based on philosophy and principles.
+
+### Second Pass (Critical)
+- Don't add more graphics
+- Refine what exists
+- Make extremely crisp
+- Respect minimalism
+- Increase cohesion
+- Polish rather than expand
+
+### Final
+Pristine masterpiece, ready for museum display.
+
+## Use Cases
+
+- Brand identity systems
+- Poster designs
+- Visual manifestos
+- Design system docs
+- Art pieces
+- Editorial design
+- Exhibition materials
+- Coffee table books

package/dist/template/.opencode/skill/frontend-design/references/canvas/philosophy.md

@@ -0,0 +1,94 @@
+# Canvas Design Philosophy
+
+Visual design philosophy for sophisticated compositions.
+
+## Two-Phase Approach
+
+### Phase 1: Philosophy Creation
+Create aesthetic movement through form, space, color, composition. Not layouts - pure visual philosophy.
+
+Structure (4-6 paragraphs):
+- Space and form principles
+- Color and material approach
+- Scale and rhythm guidance
+- Composition and balance
+- Visual hierarchy system
+
+### Phase 2: Visual Expression
+Express through canvas:
+- 90% visual design
+- 10% essential text
+- Museum-quality execution
+- Systematic patterns
+
+## Core Principles
+
+### 1. Visual Communication First
+Information lives in design, not paragraphs:
+- Color zones and fields
+- Geometric precision
+- Spatial relationships
+- Visual weight and tension
+
+### 2. Minimal Text
+Text as rare, powerful gesture:
+- Never paragraphs
+- Only essential words
+- Integrated into architecture
+- Typography as visual element
+
+### 3. Expert Craftsmanship
+Work must appear:
+- Meticulously crafted
+- Product of countless hours
+- Master-level execution
+- Museum-worthy quality
+
+### 4. Systematic Patterns
+Scientific visual language:
+- Repeating patterns = rhythm
+- Perfect geometric shapes
+- Dense accumulation builds meaning
+- Patient repetition rewards viewing
+
+## Design Movements
+
+### Concrete Poetry
+Monumental form, bold geometry. Massive color blocks. Sculptural typography. Text as rare, powerful gesture.
+
+### Chromatic Language
+Color as information. Geometric precision. Color zones create meaning. Words only anchor what color shows.
+
+### Analog Meditation
+Quiet contemplation through texture. Paper grain, ink bleeds. Vast negative space. Images breathe across pages.
+
+### Organic Systems
+Natural clustering, modular growth. Rounded forms, organic arrangements. Information through diagrams.
+
+### Geometric Silence
+Pure order and restraint. Grid precision. Dramatic negative space. Swiss formalism meets Brutalist honesty.
+
+## Implementation
+
+### Color
+```css
+@theme {
+  --color-primary: oklch(0.55 0.22 264);
+  --color-accent: oklch(0.75 0.18 45);
+}
+```
+
+Limited (2-5), cohesive, purposeful relationships.
+
+### Typography
+- Light weights (200-300)
+- Clean sans-serifs
+- Geometric precision
+- Small for labels, large for rare impact
+
+### Composition
+- Repeating patterns establish rhythm
+- Perfect geometric shapes
+- Nothing falls off page
+- Nothing overlaps unintentionally
+- Proper margins non-negotiable

package/dist/template/.opencode/skill/frontend-design/references/design/color-system.md

@@ -0,0 +1,111 @@
+# Color System — OKLCH Deep Guide
+
+## Why OKLCH Over HSL
+
+HSL is **not perceptually uniform** — `hsl(60, 100%, 50%)` (yellow) appears far brighter than `hsl(240, 100%, 50%)` (blue) at the same lightness. OKLCH fixes this: equal lightness steps _look_ equal.
+
+```css
+/* HSL: looks inconsistent */
+--blue: hsl(240, 70%, 50%);
+--green: hsl(120, 70%, 50%); /* Appears much brighter */
+
+/* OKLCH: looks consistent */
+--blue: oklch(0.55 0.22 264);
+--green: oklch(0.55 0.18 145); /* Same perceived brightness */
+```
+
+## Two-Layer Token Architecture
+
+**Layer 1 — Primitives** (raw values, never used directly in components):
+
+```css
+@theme {
+  --blue-100: oklch(0.95 0.03 264);
+  --blue-300: oklch(0.75 0.1 264);
+  --blue-500: oklch(0.55 0.22 264);
+  --blue-700: oklch(0.4 0.18 264);
+  --blue-900: oklch(0.25 0.12 264);
+}
+```
+
+**Layer 2 — Semantic** (what components reference; redefine for dark mode):
+
+```css
+@theme {
+  --color-primary: var(--blue-500);
+  --color-primary-hover: var(--blue-700);
+  --color-surface: var(--neutral-50);
+  --color-surface-elevated: var(--neutral-0);
+  --color-text: var(--neutral-900);
+  --color-text-muted: var(--neutral-600);
+  --color-border: var(--neutral-200);
+}
+
+/* Dark mode: redefine ONLY semantic layer */
+@media (prefers-color-scheme: dark) {
+  @theme {
+    --color-primary: var(--blue-300);
+    --color-primary-hover: var(--blue-100);
+    --color-surface: var(--neutral-900);
+    --color-surface-elevated: var(--neutral-800);
+    --color-text: var(--neutral-100);
+    --color-text-muted: var(--neutral-400);
+    --color-border: var(--neutral-700);
+  }
+}
+```
+
+## Tinted Neutrals
+
+Never use pure gray (`chroma: 0`). Add `chroma: 0.01` hinted toward brand hue — barely visible but creates subconscious cohesion:
+
+```css
+@theme {
+  /* Brand hue: 264 (blue) — neutrals subtly tinted */
+  --neutral-0: oklch(1 0.005 264);
+  --neutral-50: oklch(0.97 0.01 264);
+  --neutral-100: oklch(0.93 0.01 264);
+  --neutral-200: oklch(0.87 0.01 264);
+  --neutral-400: oklch(0.7 0.01 264);
+  --neutral-600: oklch(0.5 0.01 264);
+  --neutral-800: oklch(0.25 0.01 264);
+  --neutral-900: oklch(0.16 0.01 264);
+}
+```
+
+## Dark Mode Rules
+
+Dark mode is **not** inverted light mode:
+
+| Aspect  | Light Mode                   | Dark Mode                                            |
+| ------- | ---------------------------- | ---------------------------------------------------- |
+| Depth   | Shadows create elevation     | Lighter surfaces create elevation                    |
+| Base    | `oklch(0.97+ …)`             | `oklch(0.15-0.18 …)` — NOT pure black                |
+| Accents | Full saturation              | Desaturate 10-20% to reduce glare                    |
+| Text    | Dark on light, high contrast | Light on dark, slightly reduced contrast for comfort |
+| Borders | Darker than surface          | Lighter than surface                                 |
+
+```css
+/* Dark surface elevation via lightness, not shadows */
+--surface-0: oklch(0.15 0.01 264); /* Base */
+--surface-1: oklch(0.18 0.01 264); /* Cards */
+--surface-2: oklch(0.22 0.01 264); /* Modals */
+--surface-3: oklch(0.26 0.01 264); /* Tooltips */
+```
+
+## 60-30-10 Rule
+
+Applied to **visual weight**, not pixel count:
+
+- 60% dominant (background, surface colors)
+- 30% secondary (text, icons, subtle accents)
+- 10% accent (CTAs, highlights, active states)
+
+Accent works _because_ it's rare — overuse kills its power.
+
+## Common Mistakes
+
+- **Alpha as palette**: Heavy `rgba()` / transparency means incomplete palette — define explicit overlay colors per context
+- **Gray text on colored background**: Use a darker shade of the background color or apply the text color at reduced opacity
+- **Same accent everywhere**: If everything is "primary blue," nothing stands out
+- **Ignoring contrast in dark mode**: WCAG 4.5:1 for body text, 3:1 for large text and UI components

package/dist/template/.opencode/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/dist/template/.opencode/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/dist/template/.opencode/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...")