picasso-skill 1.0.0 → 1.2.0

package/skills/picasso/references/sensory-design.md

@@ -12,47 +12,174 @@
 ### Why Sound
 Sound provides confirmation that an action occurred, draws attention to important state changes, and adds personality to the interface. It is underused on the web but highly effective when applied with restraint.
 
-### The Soundcn Pattern
-Use inline base64 audio data URIs with the Web Audio API. This avoids external file loading, CORS issues, and runtime fetching. Each sound is a self-contained TypeScript module.
+### Sourcing Sounds
+- **Kenney.nl** -- free CC0 game/UI sound packs. High quality, no attribution required.
+- **Freesound.org** -- filter by CC0 license for attribution-free use. Verify license on each clip.
+- **Tone.js synthesis** -- generate procedural sounds at runtime. No files to load. Good for simple tones, chimes, and click sounds. Use `Tone.Synth`, `Tone.MembraneSynth`, or `Tone.NoiseSynth` for UI feedback.
+- **Self-recorded** -- record short foley sounds and export as WAV/MP3 at 44.1kHz mono.
+
+For inline embedding, convert sounds to base64 data URIs to avoid CORS issues and runtime fetching. Each sound becomes a self-contained TypeScript module.
 
 ```typescript
 // sounds/click-soft.ts
-export const clickSoftSound = "data:audio/wav;base64,UklGR..."; // base64 WAV
+export const clickSoftSound = "data:audio/wav;base64,UklGR...";
+```
+
+### The useSound Hook (Production-Ready)
 
+This hook handles AudioContext lifecycle (including the browser autoplay policy that blocks AudioContext until a user gesture), caches decoded buffers so each sound is fetched and decoded only once, and exposes volume control via a GainNode.
+
+```typescript
 // hooks/use-sound.ts
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from "react";
 
-export function useSound(src: string) {
-  const audioContextRef = useRef<AudioContext | null>(null);
+// Shared AudioContext singleton -- one per page avoids resource waste.
+let sharedCtx: AudioContext | null = null;
+const bufferCache = new Map<string, AudioBuffer>();
 
-  const play = useCallback(() => {
-    if (!audioContextRef.current) {
-      audioContextRef.current = new AudioContext();
+function getAudioContext(): AudioContext {
+  if (!sharedCtx) {
+    sharedCtx = new AudioContext();
+  }
+  return sharedCtx;
+}
+
+// Resume AudioContext on first user gesture (required by Chrome, Safari, Firefox).
+// Call this once at app root.
+export function initAudioOnGesture(): void {
+  const resume = () => {
+    const ctx = getAudioContext();
+    if (ctx.state === "suspended") {
+      ctx.resume();
     }
-    const ctx = audioContextRef.current;
-    fetch(src)
-      .then(r => r.arrayBuffer())
-      .then(buf => ctx.decodeAudioData(buf))
-      .then(decoded => {
-        const source = ctx.createBufferSource();
-        source.buffer = decoded;
-        source.connect(ctx.destination);
-        source.start(0);
-      });
-  }, [src]);
-
-  return [play] as const;
+  };
+  const events = ["click", "touchstart", "keydown"] as const;
+  events.forEach((e) => document.addEventListener(e, resume, { once: false }));
 }
+
+interface UseSoundOptions {
+  volume?: number; // 0 to 1, default 0.4
+  /** For sound sprites: start offset in seconds */
+  offset?: number;
+  /** For sound sprites: duration in seconds */
+  duration?: number;
+}
+
+export function useSound(src: string, options: UseSoundOptions = {}) {
+  const { volume = 0.4, offset, duration } = options;
+  const gainRef = useRef<GainNode | null>(null);
+
+  const play = useCallback(async () => {
+    const ctx = getAudioContext();
+
+    // Resume if suspended (covers edge cases where gesture init missed)
+    if (ctx.state === "suspended") {
+      await ctx.resume();
+    }
+
+    // Fetch + decode only on first play, then cache
+    let buffer = bufferCache.get(src);
+    if (!buffer) {
+      const response = await fetch(src);
+      const arrayBuf = await response.arrayBuffer();
+      buffer = await ctx.decodeAudioData(arrayBuf);
+      bufferCache.set(src, buffer);
+    }
+
+    // GainNode for volume control
+    const gain = ctx.createGain();
+    gain.gain.value = volume;
+    gain.connect(ctx.destination);
+    gainRef.current = gain;
+
+    const source = ctx.createBufferSource();
+    source.buffer = buffer;
+    source.connect(gain);
+
+    if (offset !== undefined && duration !== undefined) {
+      source.start(0, offset, duration);
+    } else {
+      source.start(0);
+    }
+  }, [src, volume, offset, duration]);
+
+  const setVolume = useCallback(
+    (v: number) => {
+      if (gainRef.current) {
+        gainRef.current.gain.value = Math.max(0, Math.min(1, v));
+      }
+    },
+    []
+  );
+
+  return { play, setVolume } as const;
+}
+```
+
+### App Root Setup
+
+```tsx
+// app/layout.tsx or app entry
+import { initAudioOnGesture } from "@/hooks/use-sound";
+
+// Call once on mount
+useEffect(() => {
+  initAudioOnGesture();
+}, []);
 ```
 
-### Usage
+### Basic Usage
+
 ```tsx
 import { useSound } from "@/hooks/use-sound";
 import { clickSoftSound } from "@/sounds/click-soft";
 
-function Button() {
-  const [play] = useSound(clickSoftSound);
-  return <button onClick={() => { play(); handleAction(); }}>Save</button>;
+function SaveButton() {
+  const { play } = useSound(clickSoftSound, { volume: 0.3 });
+  return (
+    <button onClick={() => { play(); handleSave(); }}>
+      Save
+    </button>
+  );
+}
+```
+
+### Sound Sprite Pattern
+
+Pack multiple short sounds into a single audio file to reduce HTTP requests and simplify asset management. Reference each sound by its offset and duration within the file.
+
+```typescript
+// sounds/ui-sprite.ts
+export const uiSprite = "data:audio/wav;base64,UklGR...";
+
+// Offsets in seconds within the sprite file
+export const SPRITE_MAP = {
+  click:   { offset: 0.0,  duration: 0.08 },
+  success: { offset: 0.1,  duration: 0.15 },
+  error:   { offset: 0.3,  duration: 0.12 },
+  toggle:  { offset: 0.5,  duration: 0.06 },
+  whoosh:  { offset: 0.6,  duration: 0.20 },
+} as const;
+```
+
+```tsx
+import { useSound } from "@/hooks/use-sound";
+import { uiSprite, SPRITE_MAP } from "@/sounds/ui-sprite";
+
+function ToggleSwitch({ checked, onChange }: ToggleProps) {
+  const { play } = useSound(uiSprite, {
+    volume: 0.35,
+    offset: SPRITE_MAP.toggle.offset,
+    duration: SPRITE_MAP.toggle.duration,
+  });
+
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      onClick={() => { play(); onChange(!checked); }}
+    />
+  );
 }
 ```
 
@@ -70,27 +197,62 @@ function Button() {
 - Use the Web Audio API, not `<audio>` elements (lower latency)
 - Sound volume should be subtle by default (0.3-0.5 of max)
 - Never auto-play sounds on page load
-- Source sounds from CC0 collections (Kenney, Freesound)
+- Gate behind a user preference stored in localStorage or app settings
+- Pre-decode buffers when possible; never decode on every play
 
 ---
 
 ## 2. Haptic Feedback
 
-### The Vibration API
-```javascript
-// Check support
-if ('vibrate' in navigator) {
-  // Simple tap (10ms pulse)
-  navigator.vibrate(10);
+### The Vibration API (Android, some desktop browsers)
+
+```typescript
+// utils/haptics.ts
+export function hapticTap() {
+  navigator.vibrate?.(10);
+}
+
+export function hapticSuccess() {
+  navigator.vibrate?.([10, 50, 10]);
+}
+
+export function hapticError() {
+  navigator.vibrate?.(30);
+}
+
+export function hapticWarning() {
+  navigator.vibrate?.([10, 30, 10, 30, 10]);
+}
+```
+
+### iOS Haptic Considerations
+
+The Vibration API is not supported on iOS Safari. For web apps, iOS has no standard haptic API. Strategies for iOS haptic feedback:
+
+1. **Native bridge (Capacitor/React Native)** -- If the app runs in a native wrapper, call `UIImpactFeedbackGenerator` through the bridge. This provides the best haptics on iOS with three intensity levels: `.light`, `.medium`, `.heavy`.
+
+```typescript
+// For Capacitor-based apps
+import { Haptics, ImpactStyle } from "@capacitor/haptics";
+
+export async function hapticTapIOS() {
+  await Haptics.impact({ style: ImpactStyle.Light });
+}
 
-  // Success pattern (two short pulses)
-  navigator.vibrate([10, 50, 10]);
+export async function hapticSuccessIOS() {
+  await Haptics.notification({ type: "success" });
+}
+```
 
-  // Error pattern (one longer pulse)
-  navigator.vibrate(30);
+2. **Graceful degradation** -- For pure web apps on iOS, accept that haptics are unavailable. Never show broken behavior. Wrap all haptic calls behind a safe helper:
 
-  // Warning (three quick pulses)
-  navigator.vibrate([10, 30, 10, 30, 10]);
+```typescript
+export function haptic(pattern: number | number[]) {
+  if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+    navigator.vibrate(pattern);
+  }
+  // On iOS Safari this is a no-op. The visual and audio
+  // feedback channels carry the interaction.
 }
 ```
 
@@ -102,24 +264,106 @@ if ('vibrate' in navigator) {
 - **Drag and drop**: 10ms pulse on pickup and drop
 
 ### Rules
-- Gate behind feature detection (`'vibrate' in navigator`)
+- Gate behind feature detection (`'vibrate' in navigator` or Capacitor availability)
 - Respect `prefers-reduced-motion` by disabling haptics when motion is reduced
 - Keep durations very short (10-30ms for taps, never longer than 100ms)
 - Do not use haptics for every interaction, only pivotal moments
-- Mobile only: haptics have no effect on desktop
-
-### iOS Considerations
-The Vibration API has limited support on iOS Safari. For broader iOS support, use the experimental Haptic Feedback API or accept that haptics are Android-primary.
+- Test on real hardware; emulators do not produce haptic feedback
 
 ---
 
 ## 3. Multi-Sensory Integration
 
-The strongest UI moments combine visual, auditory, and haptic feedback simultaneously:
+The strongest UI moments combine visual, auditory, and haptic feedback simultaneously. This triple feedback creates a moment of certainty that a single visual change cannot match. Reserve it for milestone moments: order placed, task completed, level achieved, payment confirmed.
+
+### Integration Principles
+1. **Synchronize channels** -- sound, haptic, and animation should fire at the same instant. Do not stagger them.
+2. **Match intensity** -- a subtle visual pulse pairs with a quiet click and a light tap. A big celebration pairs with a brighter chime and stronger vibration.
+3. **Degrade gracefully** -- if sound is muted, the visual and haptic still work. If haptics are unavailable, sound and visual carry it. Each channel must stand on its own.
+4. **Respect preferences** -- check `prefers-reduced-motion`, sound toggle state, and haptic toggle state independently.
+
+### Complete Example: Task Completion Feedback
+
+```tsx
+import { useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useSound } from "@/hooks/use-sound";
+import { uiSprite, SPRITE_MAP } from "@/sounds/ui-sprite";
+import { hapticSuccess, haptic } from "@/utils/haptics";
+import { CheckIcon } from "lucide-react";
+
+interface TaskCompleteButtonProps {
+  completed: boolean;
+  onComplete: () => void;
+  soundEnabled?: boolean;
+}
+
+export function TaskCompleteButton({
+  completed,
+  onComplete,
+  soundEnabled = true,
+}: TaskCompleteButtonProps) {
+  const { play } = useSound(uiSprite, {
+    volume: 0.4,
+    offset: SPRITE_MAP.success.offset,
+    duration: SPRITE_MAP.success.duration,
+  });
+
+  const prefersReducedMotion =
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  const handleComplete = useCallback(() => {
+    if (completed) return;
+
+    // Fire all three channels simultaneously
+    onComplete();
+    if (soundEnabled) play();
+    hapticSuccess();
+  }, [completed, onComplete, soundEnabled, play]);
+
+  return (
+    <button
+      onClick={handleComplete}
+      className="relative flex items-center gap-2 rounded-lg bg-zinc-900
+                 px-4 py-2 text-sm font-medium text-white
+                 transition-colors hover:bg-zinc-800
+                 disabled:opacity-50"
+      disabled={completed}
+    >
+      <AnimatePresence mode="wait">
+        {completed ? (
+          <motion.span
+            key="done"
+            initial={prefersReducedMotion ? {} : { scale: 0, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ type: "spring", stiffness: 500, damping: 25 }}
+            className="flex items-center gap-2 text-emerald-400"
+          >
+            <CheckIcon className="h-4 w-4" />
+            Done
+          </motion.span>
+        ) : (
+          <motion.span
+            key="complete"
+            exit={prefersReducedMotion ? {} : { scale: 0.8, opacity: 0 }}
+            transition={{ duration: 0.1 }}
+          >
+            Mark Complete
+          </motion.span>
+        )}
+      </AnimatePresence>
+    </button>
+  );
+}
+```
+
+### Timeline of a Multi-Sensory Moment
 
-1. User taps "Complete" button
-2. **Visual**: checkmark animation scales in with a satisfying bounce
-3. **Sound**: soft success chime (100ms)
-4. **Haptic**: double-pulse pattern (10ms, 50ms gap, 10ms)
+| Time | Visual | Sound | Haptic |
+|------|--------|-------|--------|
+| 0ms | Button state changes, checkmark scales in with spring animation | Success chime begins (100-150ms clip) | Double-pulse fires: 10ms on, 50ms gap, 10ms on |
+| 150ms | Spring animation settles, color transition to emerald completes | Sound fades out naturally | Haptic complete |
+| 300ms | Final resting state | Silent | Idle |
 
-This triple feedback creates a moment of certainty that a single visual change cannot match. Use it sparingly, for milestone moments (order placed, task completed, level achieved).
+All three channels start at t=0 and resolve independently. The user perceives them as a single unified moment.

package/SKILL.md

@@ -1,202 +0,0 @@
----
-name: picasso
-description: >
-  The ultimate frontend design and UI engineering skill. Use this whenever the user asks to build, design, style, or improve any web interface, component, page, application, dashboard, landing page, artifact, poster, or visual output. Covers typography, color systems, spatial design, motion/animation, interaction design, responsive layouts, sound design, haptic feedback, icon systems, generative art, theming, React best practices, and DESIGN.md system generation. Also use when the user asks to audit, critique, polish, simplify, animate, or normalize a frontend. Triggers on any mention of "make it look good," "fix the design," "UI," "UX," "frontend," "component," "landing page," "dashboard," "artifact," "poster," "design system," "theme," "animation," "responsive," or any request to improve visual quality. Use this skill even when the user does not explicitly ask for design help but the task involves producing a visual interface.
----
-
-# Picasso
-
-The ultimate design skill for producing distinctive, production-grade frontend interfaces, visual artifacts, and design systems. This skill consolidates best practices from Anthropic's frontend-design, canvas-design, algorithmic-art, and theme-factory skills, Impeccable's 7-domain reference system, VoltAgent's DESIGN.md format, Vercel's React and typography standards, and specialized libraries for sound, haptics, icons, and text animation.
-
-Every output should look like it was built by a senior design engineer who spent days refining it, not generated by an AI in seconds.
-
----
-
-## Configurable Settings
-
-These three dials (1-10) control the overall character of the output. Adjust based on what is being built. The user can set these explicitly or they can be inferred from context.
-
-- **DESIGN_VARIANCE** (default: 6) — How experimental the layout is. 1-3: clean, centered, conventional. 4-6: considered asymmetry, intentional breaks. 7-10: avant-garde, overlapping elements, unconventional grids.
-- **MOTION_INTENSITY** (default: 5) — How much animation is present. 1-3: hover states and fades only. 4-6: staggered reveals, scroll-triggered, text morphing. 7-10: magnetic cursors, parallax, complex choreography.
-- **VISUAL_DENSITY** (default: 5) — How much content fits on one screen. 1-3: spacious, luxury, breathing room. 4-6: balanced, structured whitespace. 7-10: dense dashboards, data-heavy, compact.
-
-When the user says "make it premium" or "luxury feel," drop VISUAL_DENSITY to 2-3 and MOTION_INTENSITY to 4-5. When they say "dashboard" or "admin panel," raise VISUAL_DENSITY to 7-8. When they say "make it pop" or "wow factor," raise DESIGN_VARIANCE and MOTION_INTENSITY to 7-8.
-
----
-
-## Step 0: Read the Right References
-
-Before writing any code, read the reference files relevant to the task. Each covers a domain in depth with rules, examples, and anti-patterns. Load only what you need.
-
-| Reference File | When to Read |
-|---|---|
-| `references/typography.md` | Any task involving text, fonts, headings, or type hierarchy |
-| `references/color-and-contrast.md` | Color palettes, dark mode, accessibility, tinted neutrals |
-| `references/spatial-design.md` | Layout, spacing, grids, visual hierarchy, whitespace |
-| `references/motion-and-animation.md` | Transitions, scroll effects, text morphing, micro-interactions |
-| `references/interaction-design.md` | Forms, focus states, loading, empty states, error handling |
-| `references/responsive-design.md` | Mobile-first, fluid, container queries, touch targets |
-| `references/sensory-design.md` | UI sound effects, haptic feedback, multi-sensory interfaces |
-| `references/react-patterns.md` | React/Next.js component architecture, hooks, performance |
-| `references/anti-patterns.md` | Explicit list of what NOT to do (the most important reference) |
-| `references/design-system.md` | Generating DESIGN.md files, theming, systematic tokens |
-| `references/generative-art.md` | Algorithmic art, p5.js, seeded randomness, flow fields |
-| `references/component-patterns.md` | Standard component naming, taxonomy, and state patterns |
-
----
-
-## Step 1: Design Thinking
-
-Before writing a single line of code, answer these questions internally:
-
-**Purpose.** What problem does this interface solve? Who uses it? What is the single most important action?
-
-**Tone.** Commit to a specific aesthetic direction. Not "clean and modern" (that is meaningless). Pick something with teeth: brutalist, editorial, retro-terminal, luxury serif, toy-like, industrial, organic, Swiss grid, art deco, vaporwave, newspaper broadsheet, scientific journal, or something entirely original. The direction should be informed by the content, not applied generically.
-
-**Differentiation.** What makes this unforgettable? What is the one thing someone will remember after closing the tab? If there is no answer, the design is not ready.
-
-**Constraints.** Framework requirements, accessibility targets, performance budgets, existing design tokens.
-
----
-
-## Step 2: Aesthetic Execution
-
-### Typography
-
-Choose fonts that are distinctive, not default. Never use Inter, Roboto, Arial, or system fonts as primary choices. Pair a display font with a body font. Use a modular type scale (1.25 or 1.333 ratio). Set line heights between 1.4 and 1.6 for body text. Use OpenType features (ligatures, tabular numbers, small caps) when the font supports them. See `references/typography.md` for the full system.
-
-### Color
-
-Build palettes with intention. Use OKLCH for perceptually uniform color manipulation. Always tint neutrals (never use pure gray or pure black). Dominant color with sharp accent outperforms evenly distributed palettes. Test contrast ratios: 4.5:1 minimum for body text, 3:1 for large text and UI elements. See `references/color-and-contrast.md`.
-
-### Spatial Composition
-
-Use a spacing scale (4px base: 4, 8, 12, 16, 24, 32, 48, 64, 96). Asymmetric layouts, overlapping elements, diagonal flow, and grid-breaking moments create visual interest. Generous negative space communicates confidence. Dense layouts need careful rhythm. See `references/spatial-design.md`.
-
-### Backgrounds and Visual Depth
-
-Never default to flat solid colors. Create atmosphere with gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, or subtle backdrop filters. Depth comes from elevation systems: consistent shadow scales, surface hierarchy, and z-index discipline.
-
-### Motion
-
-One well-orchestrated page load with staggered reveals (using animation-delay) creates more impact than scattered micro-interactions. Use CSS transitions for simple state changes. Use `framer-motion` or the Motion library for React when choreography matters. Never use bounce or elastic easing (it looks dated). Respect `prefers-reduced-motion`. See `references/motion-and-animation.md`.
-
-### Text Animation
-
-For text morphing effects (counters, status changes, tab labels), use `torph` (dependency-free, works with React/Vue/Svelte). Import as `import { TextMorph } from 'torph/react'` and wrap any text that changes dynamically.
-
-### Sound
-
-For UI sound feedback (clicks, notifications, transitions), use the soundcn pattern: inline base64 audio data URIs with a `useSound` hook via Web Audio API. Zero dependencies. See `references/sensory-design.md`.
-
-### Haptics
-
-For mobile web, use the WebHaptics pattern via the Vibration API (`navigator.vibrate()`) to provide tactile feedback on button presses, toggles, and destructive actions. Always gate behind feature detection and user preference. See `references/sensory-design.md`.
-
-### Icons
-
-Use Lucide React as the default icon library (`lucide-react`). For broader searches across 200K+ icons from 150+ collections, use the `better-icons` CLI pattern: search by keyword, retrieve SVG, sync to project. Prefer outline style for UI, solid for emphasis.
-
-### Avatars and Identity
-
-For deterministic avatar generation from strings (usernames, emails, UUIDs), use the Facehash pattern: a React component that generates unique face avatars. Same input always produces the same face. Zero external assets.
-
----
-
-## Step 3: Implementation Standards
-
-### Single-File Artifacts
-
-When building for claude.ai artifacts (HTML or React), everything goes in one file. No external CSS files, no separate JS. Inline everything. For HTML artifacts, import external scripts only from `https://cdnjs.cloudflare.com`. For React artifacts, use only available libraries (lucide-react, recharts, d3, Three.js r128, Tone, shadcn/ui, Tailwind core utilities, lodash, mathjs, papaparse, Chart.js).
-
-### React Best Practices
-
-Follow these rules (see `references/react-patterns.md` for details):
-
-- Server Components by default, `'use client'` only when needed
-- Colocate state with the component that uses it
-- Prefer composition over prop drilling
-- Use `Suspense` boundaries with meaningful fallbacks
-- Never store derived state, compute it during render
-- Use semantic HTML elements, not `div` soup
-- Memoize expensive computations, not everything
-- Default export for page/route components, named exports for utilities
-
-### CSS Variables for Theming
-
-Always define a CSS variable system for colors, spacing, typography, and shadows. This makes themes swappable and dark mode trivial.
-
-```css
-:root {
-  --color-surface: #fafaf9;
-  --color-text: #1c1917;
-  --color-accent: #dc2626;
-  --radius: 8px;
-  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
-}
-```
-
-### Accessibility Defaults
-
-Every interface must include: visible focus indicators (never `outline: none` without replacement), sufficient color contrast, keyboard navigability, ARIA labels on interactive elements without visible text, and `alt` text on meaningful images. Do not treat accessibility as optional.
-
----
-
-## Step 4: Audit and Polish
-
-Before delivering any interface, run this mental checklist:
-
-1. **Typography audit.** Is there a clear type hierarchy? Are fonts loaded and rendering? Is body text readable at default zoom?
-2. **Color audit.** Does the palette feel cohesive? Do accents draw the eye to the right places? Does it work in both light and dark contexts?
-3. **Spatial audit.** Is spacing consistent? Are elements aligned to an invisible grid? Is there breathing room?
-4. **Interaction audit.** Do all interactive elements have hover, focus, and active states? Are transitions smooth? Is there loading feedback?
-5. **Responsive audit.** Does it work on 375px wide screens? Does it scale gracefully to ultrawide?
-6. **Motion audit.** Does the page load feel choreographed? Are transitions purposeful? Does `prefers-reduced-motion` disable non-essential animation?
-7. **Accessibility audit.** Can you tab through the entire interface? Are contrast ratios sufficient? Do screen readers make sense of the structure?
-
----
-
-## Step 5: Design System Generation
-
-When asked to create a design system or DESIGN.md, follow the VoltAgent/Stitch format. See `references/design-system.md` for the complete template covering: visual theme and atmosphere, color palette with semantic roles, typography hierarchy, component styling (buttons, cards, inputs, navigation with states), layout principles, depth and elevation system, explicit dos and don'ts, responsive behavior, and an agent prompt guide.
-
----
-
-## Step 6: Generative and Canvas Art
-
-When the task involves algorithmic art, generative visuals, or static poster/print design, see `references/generative-art.md`. The process: write an algorithmic philosophy (4-6 paragraphs), then express it through p5.js code with seeded randomness, parameter controls, and seed navigation.
-
----
-
-## Commands
-
-These optional directives can be used to steer design refinement:
-
-| Command | Effect |
-|---|---|
-| `/audit` | Technical quality check: accessibility, performance, responsive |
-| `/critique` | UX design review: hierarchy, clarity, emotional resonance |
-| `/polish` | Final pass: refine spacing, transitions, copy |
-| `/simplify` | Strip to essence, remove visual noise |
-| `/animate` | Add purposeful motion and transitions |
-| `/bolder` | Amplify timid designs with stronger visual choices |
-| `/quieter` | Tone down overly aggressive designs |
-| `/normalize` | Align with design system standards |
-| `/theme` | Generate or apply a color/font theme |
-| `/sound` | Add UI sound effects to interactions |
-| `/haptics` | Add haptic feedback for mobile web |
-| `/redesign` | Audit an existing project, identify design problems, fix them systematically |
-| `/soft` | Apply premium soft aesthetic: generous whitespace, depth, smooth spring animations |
-| `/minimalist` | Apply editorial minimalism: monochrome, crisp borders, inspired by Linear/Notion |
-| `/brutalist` | Apply raw mechanical aesthetic: Swiss typography meets CRT terminal |
-| `/stitch` | Generate a Google Stitch-compatible DESIGN.md for the current project |
-
----
-
-## The Non-Negotiables
-
-1. No design should ever look like "AI made this." No purple gradients on white. No Inter font. No centered everything. No cards nested in cards. No gray text on colored backgrounds.
-2. Every design must have a clear aesthetic point of view. If it could belong to any product, it belongs to none.
-3. Match implementation complexity to vision. Maximalist designs need elaborate code. Minimalist designs need surgical precision. Both require the same level of care.
-4. Text is always a design element, never an afterthought.
-5. Every detail matters. The shadow radius, the letter spacing, the hover transition duration, the border color in dark mode. These are not small decisions.