monomind 1.18.15 → 2.0.0

package/.claude/skills/monodesign/reference/component-system.md

@@ -1,358 +0,0 @@
-# Component System
-
-Build production-quality component libraries with consistent visual language, design tokens, developer-ready CSS, and proper accessibility.
-
-## Token-First Approach
-
-Every component is built on semantic tokens. Never hard-code values — always reference the token system. Use the OKLCH token system from `tokens.css` as the foundation; extend it with semantic aliases per project.
-
-```css
-:root {
-  /* Semantic aliases (project-specific — map to OKLCH tokens) */
-  --bg-primary: var(--color-cream);
-  --bg-elevated: var(--color-paper);
-  --text-primary: var(--color-ink);
-  --text-secondary: var(--color-charcoal);
-  --text-muted: var(--color-ash);
-  --border-subtle: var(--color-mist);
-  --interactive: var(--color-accent);
-  --interactive-hover: var(--color-accent-hover);
-}
-
-[data-theme="dark"] {
-  --bg-primary: oklch(10% 0.002 350);
-  --bg-elevated: oklch(15% 0.003 350);
-  --text-primary: oklch(94% 0 0);
-  --text-secondary: oklch(75% 0 0);
-  --text-muted: oklch(55% 0 0);
-  --border-subtle: oklch(22% 0 0);
-}
-```
-
-## Theme System
-
-Every new project gets light/dark/system toggle. Never default to one without a scene sentence that forces the answer (see shared design laws).
-
-```html
-<!-- Theme toggle — place in header navigation -->
-<div class="theme-toggle" role="radiogroup" aria-label="Color theme">
-  <button class="theme-toggle-option" data-theme="light" aria-checked="false">Light</button>
-  <button class="theme-toggle-option" data-theme="dark" aria-checked="false">Dark</button>
-  <button class="theme-toggle-option" data-theme="system" aria-checked="true">System</button>
-</div>
-```
-
-```javascript
-class ThemeManager {
-  constructor() {
-    this.current = localStorage.getItem('theme') || 'system';
-    this.apply(this.current);
-    document.querySelector('.theme-toggle')?.addEventListener('click', (e) => {
-      const btn = e.target.closest('.theme-toggle-option');
-      if (btn) this.apply(btn.dataset.theme);
-    });
-  }
-
-  apply(theme) {
-    if (theme === 'system') {
-      document.documentElement.removeAttribute('data-theme');
-      localStorage.removeItem('theme');
-    } else {
-      document.documentElement.setAttribute('data-theme', theme);
-      localStorage.setItem('theme', theme);
-    }
-    this.current = theme;
-    document.querySelectorAll('.theme-toggle-option').forEach(btn =>
-      btn.setAttribute('aria-checked', String(btn.dataset.theme === theme))
-    );
-  }
-}
-document.addEventListener('DOMContentLoaded', () => new ThemeManager());
-```
-
-## Core Components
-
-### Button
-
-```css
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-body);
-  font-weight: 500;
-  text-decoration: none;
-  border: none;
-  cursor: pointer;
-  transition: background-color var(--duration-fast) var(--ease-out),
-              transform var(--duration-fast) var(--ease-out),
-              box-shadow var(--duration-fast) var(--ease-out);
-  user-select: none;
-
-  &:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-/* Sizes */
-.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
-.btn--md  { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); }
-.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); }
-
-/* Primary — solid accent fill */
-.btn--primary {
-  background-color: var(--color-accent);
-  color: var(--color-paper);
-  border-radius: var(--radius-none); /* editorial: no rounding */
-
-  &:hover:not(:disabled) {
-    background-color: var(--color-accent-hover);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-}
-
-/* Secondary — outlined */
-.btn--secondary {
-  background-color: transparent;
-  color: var(--color-accent);
-  border: 1.5px solid var(--color-accent);
-  border-radius: var(--radius-none);
-
-  &:hover:not(:disabled) {
-    background-color: var(--color-accent-dim);
-  }
-}
-
-/* Ghost — no border */
-.btn--ghost {
-  background-color: transparent;
-  color: var(--text-secondary);
-
-  &:hover:not(:disabled) {
-    background-color: var(--color-mist);
-    color: var(--text-primary);
-  }
-}
-```
-
-### Form Input
-
-```css
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.form-label {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--text-secondary);
-  letter-spacing: 0.01em;
-}
-
-.form-input {
-  padding: var(--space-3) var(--space-4);
-  border: 1.5px solid var(--border-subtle);
-  background-color: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: var(--font-size-base);
-  font-family: var(--font-body);
-  border-radius: var(--radius-sm);
-  transition: border-color var(--duration-fast) var(--ease-out),
-              box-shadow var(--duration-fast) var(--ease-out);
-
-  &::placeholder { color: var(--text-muted); }
-
-  &:focus {
-    outline: none;
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 3px var(--color-accent-dim);
-  }
-
-  &[aria-invalid="true"] {
-    border-color: oklch(50% 0.2 25);
-  }
-}
-
-.form-error {
-  font-size: var(--font-size-sm);
-  color: oklch(50% 0.2 25);
-}
-```
-
-### Card
-
-Cards are not the default layout answer — use them only when content requires clear grouping. Never nest cards.
-
-```css
-.card {
-  background-color: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  transition: box-shadow var(--duration-base) var(--ease-out),
-              transform var(--duration-base) var(--ease-out);
-
-  &:where([href], [tabindex], [role="button"]):hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-  }
-}
-
-.card__media {
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-
-  img { width: 100%; height: 100%; object-fit: cover; }
-}
-
-.card__body {
-  padding: var(--space-6);
-}
-
-.card__title {
-  font-size: var(--font-size-xl);
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--space-2);
-}
-```
-
-### Navigation
-
-```css
-.nav {
-  display: flex;
-  align-items: center;
-  gap: var(--space-8);
-  padding: var(--space-4) var(--space-8);
-}
-
-.nav__link {
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-decoration: none;
-  letter-spacing: 0.02em;
-  position: relative;
-  transition: color var(--duration-fast) var(--ease-out);
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0; bottom: -2px;
-    width: 100%; height: 1px;
-    background-color: var(--color-accent);
-    transform: scaleX(0);
-    transform-origin: right;
-    transition: transform var(--duration-base) var(--ease-out);
-  }
-
-  &:hover, &[aria-current="page"] {
-    color: var(--text-primary);
-  }
-
-  &:hover::after, &[aria-current="page"]::after {
-    transform: scaleX(1);
-    transform-origin: left;
-  }
-}
-```
-
-## Responsive Layout System
-
-Mobile-first. Grid collapses from desktop to tablet to mobile. Use CSS Grid for 2D layouts, Flexbox for 1D.
-
-```css
-.container {
-  width: 100%;
-  margin-inline: auto;
-  padding-inline: var(--space-4);
-}
-
-@media (min-width: 640px)  { .container { max-width: 640px;  padding-inline: var(--space-6); } }
-@media (min-width: 768px)  { .container { max-width: 768px;  } }
-@media (min-width: 1024px) { .container { max-width: 1024px; padding-inline: var(--space-8); } }
-@media (min-width: 1280px) { .container { max-width: 1280px; } }
-@media (min-width: 1536px) { .container { max-width: 1400px; } }
-
-/* Auto-responsive grid — no breakpoint classes needed */
-.grid-auto {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
-  gap: var(--space-6);
-}
-
-/* Explicit column grid */
-.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
-.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
-
-@media (max-width: 768px) {
-  .grid-2, .grid-3 { grid-template-columns: 1fr; }
-}
-
-/* Sidebar layout */
-.layout-sidebar {
-  display: grid;
-  grid-template-columns: 1fr 320px;
-  gap: var(--space-12);
-  align-items: start;
-}
-
-@media (max-width: 1024px) {
-  .layout-sidebar { grid-template-columns: 1fr; }
-}
-```
-
-## Accessibility Baseline
-
-Required on every component:
-- 4.5:1 contrast for body text; 3:1 for large text (≥24px or 18.5px bold)
-- 44×44px minimum touch target
-- Focus-visible on all interactive elements — never `outline: none` without replacement
-- Keyboard navigation: tab order matches visual order
-- All images have `alt` text; decorative images have `alt=""`
-- Form inputs have associated `<label>` elements (not just placeholder text)
-- Error messages use `aria-describedby`, not just color
-
-## Component States Required
-
-For every interactive component, define all states before shipping:
-
-| State | Required behavior |
-|---|---|
-| Default | Base appearance |
-| Hover | Visible feedback (not just cursor change) |
-| Focus-visible | Distinct ring; keyboard users need this |
-| Active | Pressed indication |
-| Disabled | Reduced opacity + `cursor: not-allowed` |
-| Loading | Spinner or skeleton; disable interaction |
-| Error | Red border/icon + error message |
-| Success | Confirmation feedback |
-| Empty | Helpful empty state with action |
-
-## File Structure
-
-```
-styles/
-├── tokens.css          # Design tokens (OKLCH palette, spacing, motion)
-├── reset.css           # Opinionated reset
-├── typography.css      # Type hierarchy classes
-├── layout.css          # Container, grid, section patterns
-├── components.css      # All component styles
-├── utilities.css       # Helper classes (.sr-only, .visually-hidden)
-└── main.css            # Import orchestration
-
-scripts/
-├── theme-manager.js    # Light/dark/system toggle
-└── main.js             # App init
-```

package/.claude/skills/monodesign/reference/copy-formulas.md

@@ -1,160 +0,0 @@
-# Copy Formulas
-
-Persuasive writing frameworks for UI copy — CTAs, empty states, error messages, onboarding, landing sections, and confirmations. Use during `clarify` workflows.
-
----
-
-## Core Frameworks
-
-### PAS (Problem → Agitate → Solution)
-
-**Best for:** Error messages, empty states, pain-point sections.
-
-```
-Problem:  Name the specific issue.
-Agitate:  Show the consequence if unresolved.
-Solution: Offer the direct fix.
-```
-
-**Template:** "[Pain point]? Without [solution], [consequence]. [Action] to fix this."
-
-**UI examples:**
-- Empty state: "No data yet. Without a connected account, nothing here will populate. Connect your first account →"
-- Error: "Payment failed. Your card may have been declined or expired. Try a different card →"
-
----
-
-### AIDA (Attention → Interest → Desire → Action)
-
-**Best for:** CTAs, landing hero copy, onboarding headlines.
-
-```
-Attention: Bold statement or provocative question.
-Interest:  The relevant benefit detail.
-Desire:    Proof or stakes.
-Action:    The direct CTA.
-```
-
-**Template:** "[Bold statement]. [Benefit]. [Proof/stakes]. [CTA]."
-
-**UI examples:**
-- Hero: "Ship faster. 10,000+ teams cut deploy time in half. Start free →"
-- Onboarding: "Your workspace is ready. Connect your tools and invite your team to see everything in one place. Get started →"
-
----
-
-### FAB (Feature → Advantage → Benefit)
-
-**Best for:** Feature callouts, tooltip copy, product UI explanations.
-
-```
-Feature:   What it does.
-Advantage: Why that matters.
-Benefit:   What the user gains.
-```
-
-**Template:** "[Feature] lets you [advantage], so you can [benefit]."
-
-**UI examples:**
-- Tooltip: "Batch export sends all files at once, so you spend less time waiting."
-- Feature highlight: "Auto-save preserves your work every 30 seconds, so you never lose a draft."
-
----
-
-### BAB (Before → After → Bridge)
-
-**Best for:** Onboarding flows, upgrade prompts, transformation moments.
-
-```
-Before: The current pain state.
-After:  The desired state.
-Bridge: Your feature is the path between them.
-```
-
-**Template:** "[Pain before]. [Desired state after]. [Feature] is how you get there."
-
----
-
-### Cost of Inaction
-
-**Best for:** Upgrade prompts, warning states, deadline-driven copy.
-
-```
-Status quo: What happens if nothing changes.
-Loss:       Quantify or qualify the cost.
-Time:       The consequence compounds.
-```
-
-**Template:** "Without [action], you're losing [cost] every [timeframe]."
-
----
-
-## UI Copy Patterns by Surface
-
-| Surface | Primary formula | Tone | Key rule |
-|---------|-----------------|------|----------|
-| Empty state | PAS | Helpful | Give an action, not just a message |
-| Error message | PAS | Direct | State cause + how to fix |
-| CTA button | AIDA (action only) | Active | Imperative verb first |
-| Onboarding headline | AIDA | Confident | No "welcome to" openers |
-| Feature tooltip | FAB | Informative | One sentence max |
-| Confirmation dialog | Direct | Neutral | Restate what will happen |
-| Success feedback | Direct | Warm | Specific, not generic ("Saved!" not "Done") |
-| Upgrade prompt | BAB | Aspirational | Show the after, not just the price |
-| Destructive warning | Direct + Cost of Inaction | Serious | Name the exact thing being deleted |
-
----
-
-## Headline Patterns
-
-### Action-forward
-- "Stop [bad thing]"
-- "Get [desired result] in [timeframe]"
-- "The [adjective] way to [action]"
-- "[Number] [things] in [timeframe]"
-
-### Contrast
-- "[Old way] is [problem]. [New way] is [benefit]."
-- "Don't [bad action] — [good action] instead."
-- "From [pain state] to [desired state]."
-
-### Social proof
-- "[N]+ teams use [product] to [outcome]"
-- "Trusted by [category] at [notable company]"
-
----
-
-## UI Copy Anti-Patterns
-
-**Never:**
-- Start a CTA with "Click here" or "Learn more" — be specific about the outcome
-- Use passive voice in error messages ("An error was encountered") — say what happened
-- Hedge: "This might help", "You may want to", "Perhaps consider" — be direct
-- Restate the heading in the first sentence of body copy
-- Use em dashes — use commas, colons, or periods instead (monodesign rule)
-- Write "Successfully saved" when "Saved" says the same thing in half the words
-- Put error messages only at the top of a form — repeat them near the field
-
-**Destructive action dialogs — exact pattern:**
-```
-Heading:   Delete "[specific item name]"?
-Body:      This will permanently delete the project and all its files. This cannot be undone.
-Buttons:   [Cancel]   [Delete project]  ← destructive verb, not just "OK" or "Confirm"
-```
-
----
-
-## Copy Length Rules
-
-| Element | Max words |
-|---------|-----------|
-| CTA button label | 5 |
-| Alert/toast message | 15 |
-| Empty state description | 25 |
-| Error message (cause + fix) | 30 |
-| Tooltip / helper text | 20 |
-| Confirmation dialog body | 40 |
-| Feature callout subtitle | 20 |
-| Onboarding step description | 30 |
-
-Short copy is a skill. Every word that isn't earning its place is costing user attention.