picasso-skill 2.5.0 → 2.6.0

package/agents/picasso.md

@@ -169,7 +169,7 @@ Do NOT jump to code. Present a **Design Brief** -- a short, opinionated creative
 
 After the user confirms the brief, load the SPECIFIC reference files for what they selected. Do not load all 30+ references. Load only what's relevant:
 
-- Selected motion Tier 2+? Load `motion-and-animation.md` + `micro-interactions.md` + `animation-performance.md`
+- Selected motion Tier 2+? Load `motion-and-animation.md` + `micro-interactions.md`
 - Selected sounds? Load `sensory-design.md` (Section 1: UI Sound Design)
 - Selected haptics? Load `sensory-design.md` (Section 2: Haptic Feedback)
 - Selected animated icons? Load `micro-interactions.md` (Section 5: Toggle and Switch Animations)
@@ -288,10 +288,8 @@ skills/picasso/references/typography.md              # Fonts, scales, pairing
 skills/picasso/references/color-and-contrast.md      # OKLCH, tinted neutrals
 skills/picasso/references/spatial-design.md          # Spacing, grids, hierarchy
 skills/picasso/references/depth-and-elevation.md     # Shadows, z-index, layering
-skills/picasso/references/motion-and-animation.md    # Easing, staggering, duration
+skills/picasso/references/motion-and-animation.md    # Easing, staggering, duration, performance (compositor props, will-change, contain)
 skills/picasso/references/micro-interactions.md      # Scroll animations, gestures, View Transitions
-skills/picasso/references/animation-performance.md   # Compositor props, will-change, contain
-skills/picasso/references/interaction-design.md      # Forms, focus, states, Popover API
 skills/picasso/references/navigation-patterns.md     # Breadcrumbs, sidebar, tabs, bottom bar
 skills/picasso/references/tables-and-forms.md        # Sortable tables, validation, multi-step
 skills/picasso/references/loading-and-states.md      # Skeletons, empty states, error boundaries

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"

package/references/accessibility-wcag.md

@@ -86,6 +86,9 @@ Move focus to `<h1>` of new view (add `tabindex="-1"`) or main content landmark.
 <main id="main" tabindex="-1">...</main>
 ```
 
+### Focus Indicator Rule
+Never remove focus outlines without replacement. Use `:focus-visible` (not `:focus`) to show focus rings only for keyboard navigation, not mouse clicks.
+
 ### Focus Trapping
 Contain Tab/Shift+Tab within overlays. Use `inert` attribute on background content (modern browsers) or manage via JS. On last focusable element, Tab wraps to first.
 

package/references/code-typography.md

@@ -1,16 +1,5 @@
 # Code Typography Reference
 
-## Table of Contents
-1. Monospace Font Selection
-2. Code Block Design
-3. Syntax Highlighting Accessibility
-4. Copy-to-Clipboard
-5. Responsive Code Blocks
-6. Inline Code Styling
-7. Diff Views
-8. Terminal Output
-9. Common Mistakes
-
 ---
 
 ## 1. Monospace Font Selection
@@ -19,204 +8,85 @@
 |---|---|---|---|
 | JetBrains Mono | Yes | Clean, geometric | General purpose, IDEs |
 | Fira Code | Yes | Slightly rounded | Tutorials, docs |
-| Source Code Pro | No | Adobe, professional | Enterprise, clean look |
+| Source Code Pro | No | Adobe, professional | Enterprise |
 | IBM Plex Mono | No | Corporate, legible | Documentation |
 | Geist Mono | No | Vercel, modern | Next.js projects |
 | Cascadia Code | Yes | Microsoft, playful | Terminals |
 
-```css
-code, pre, .mono {
-  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
-  font-feature-settings: 'liga' 1, 'calt' 1; /* enable ligatures */
-  font-variant-ligatures: common-ligatures;
-}
-```
-
-Ligatures: `=>` becomes ⇒, `!==` becomes ≢, `>=` becomes ≥. Enable for display, disable for editing if users copy code.
+Always specify a modern monospace font first, then fallback to `monospace`. Enable ligatures with `font-feature-settings: 'liga' 1, 'calt' 1` for display; disable for editing if users copy code.
 
 ---
 
 ## 2. Code Block Design
 
-```css
-pre {
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1rem 1.25rem;
-  font-size: 0.875rem;    /* 14px — slightly smaller than body */
-  line-height: 1.65;       /* Looser than body text for readability */
-  overflow-x: auto;
-  tab-size: 2;
-  -moz-tab-size: 2;
-}
-
-/* Dark mode code blocks on light sites */
-[data-theme="light"] pre {
-  background: oklch(0.14 0.02 230);
-  color: oklch(0.90 0.01 230);
-}
-```
-
-Line numbers (optional):
-```css
-pre.line-numbers {
-  counter-reset: line;
-  padding-left: 3.5rem;
-  position: relative;
-}
-pre.line-numbers .line::before {
-  counter-increment: line;
-  content: counter(line);
-  position: absolute;
-  left: 1rem;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-  user-select: none; /* don't copy line numbers */
-}
-```
+- Background: `var(--surface-1)` with 1px border, 8px radius
+- Font size: 0.875rem (14px), line-height: 1.65 (looser than body for readability)
+- `overflow-x: auto; tab-size: 2`
+- Dark code blocks on light sites: `oklch(0.14 0.02 230)` background
+- Line numbers: use CSS counters with `user-select: none` so they don't get copied
 
 ---
 
 ## 3. Syntax Highlighting Accessibility
 
-Every token color must have **minimum 3:1 contrast** against the code block background. Don't rely on color alone — use font-weight or font-style for emphasis.
+Every token color must have **minimum 3:1 contrast** against the code block background. Don't rely on color alone; use font-weight or font-style for emphasis.
 
-| Token Type | Suggested OKLCH (dark bg) | Purpose |
+| Token Type | Suggested OKLCH (dark bg) | Style |
 |---|---|---|
-| Keywords | `oklch(0.75 0.15 300)` | purple-ish, bold |
-| Strings | `oklch(0.72 0.14 150)` | green |
-| Numbers | `oklch(0.75 0.12 60)` | amber |
-| Comments | `oklch(0.50 0.01 230)` | muted, italic |
-| Functions | `oklch(0.78 0.10 230)` | blue |
-| Variables | `oklch(0.85 0.01 230)` | near-white |
-
-```css
-.token-keyword { color: oklch(0.75 0.15 300); font-weight: 600; }
-.token-string { color: oklch(0.72 0.14 150); }
-.token-comment { color: oklch(0.50 0.01 230); font-style: italic; }
-```
+| Keywords | `oklch(0.75 0.15 300)` | bold |
+| Strings | `oklch(0.72 0.14 150)` | normal |
+| Numbers | `oklch(0.75 0.12 60)` | normal |
+| Comments | `oklch(0.50 0.01 230)` | italic |
+| Functions | `oklch(0.78 0.10 230)` | normal |
+| Variables | `oklch(0.85 0.01 230)` | normal |
 
 ---
 
 ## 4. Copy-to-Clipboard
 
-Position: top-right corner of the code block. Show on hover. Provide visual feedback.
-
-```jsx
-function CopyButton({ code }) {
-  const [copied, setCopied] = useState(false);
-
-  return (
-    <button
-      onClick={() => {
-        navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
-      }}
-      className="absolute top-2 right-2 p-1.5 rounded-md bg-white/5 hover:bg-white/10 text-xs text-muted"
-      aria-label="Copy code"
-    >
-      {copied ? 'Copied' : 'Copy'}
-    </button>
-  );
-}
-```
+Position top-right, show on hover, visual feedback ("Copied" for 2s). Use `navigator.clipboard.writeText()`. Add `aria-label="Copy code"`.
 
 ---
 
 ## 5. Responsive Code Blocks
 
-Code blocks should **scroll horizontally** on mobile, never wrap. Terminal output CAN wrap.
-
-```css
-pre {
-  overflow-x: auto;
-  white-space: pre;         /* code: no wrap */
-  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
-}
-
-pre.terminal {
-  white-space: pre-wrap;    /* terminal: wrap is OK */
-  word-break: break-all;
-}
-
-/* Hide scrollbar but keep functionality */
-pre::-webkit-scrollbar { height: 4px; }
-pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-```
-
-On very small screens (< 375px), consider reducing code font-size to 12px.
+- Code: `white-space: pre; overflow-x: auto` (never wrap)
+- Terminal output: `white-space: pre-wrap` (wrapping OK)
+- Thin scrollbar: 4px height, subtle thumb color
+- Below 375px, consider reducing to 12px font size
 
 ---
 
 ## 6. Inline Code Styling
 
-Inline code needs subtle visual distinction from body text:
-
-```css
-code:not(pre code) {
-  background: var(--surface-2);
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-  font-size: 0.9em;        /* slightly smaller than surrounding text */
-  font-weight: 500;
-  border: 1px solid var(--border);
-}
-```
-
-Never use inline code for emphasis. It's for code references (`useState`, `border-radius`, `GET /api/users`), not for highlighting words.
+Subtle distinction from body text: light background, 0.15em/0.4em padding, 4px radius, 0.9em font-size, 1px border. Never use inline code for emphasis; it's for code references (`useState`, `GET /api/users`).
 
 ---
 
 ## 7. Diff Views
 
-Use color + icon, not color alone (colorblind users):
-
-```css
-.diff-add {
-  background: oklch(0.62 0.19 150 / 0.1);
-  border-left: 3px solid oklch(0.62 0.19 150);
-}
-.diff-add::before { content: '+'; color: oklch(0.62 0.19 150); }
-
-.diff-remove {
-  background: oklch(0.55 0.22 25 / 0.1);
-  border-left: 3px solid oklch(0.55 0.22 25);
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-.diff-remove::before { content: '-'; color: oklch(0.55 0.22 25); }
-```
+Use color + icon (not color alone, for colorblind users):
+- Added: green-tinted background + left border + `+` prefix
+- Removed: red-tinted background + left border + `-` prefix + `line-through` + reduced opacity
 
 ---
 
 ## 8. Terminal Output
 
-Terminal/console styling should feel distinct from code:
-
-```css
-.terminal {
-  background: oklch(0.08 0.01 230);
-  color: oklch(0.80 0.01 150); /* slight green tint for terminal feel */
-  font-family: 'JetBrains Mono', monospace;
-  padding: 1rem;
-  border-radius: 8px;
-}
-.terminal .prompt { color: oklch(0.65 0.10 230); } /* blue prompt */
-.terminal .output { color: oklch(0.75 0.01 230); } /* neutral output */
-.terminal .error { color: oklch(0.65 0.22 25); }   /* red errors */
-```
+Terminal styling should feel distinct from code blocks:
+- Darker background: `oklch(0.08 0.01 230)`
+- Slight green tint for text: `oklch(0.80 0.01 150)`
+- Blue prompt, neutral output, red errors
 
 ---
 
 ## 9. Common Mistakes
 
-- **Code font too large.** 14px for blocks, 0.9em for inline. Larger fights with body text.
-- **No horizontal scroll on code blocks.** Wrapping code breaks readability. Always `overflow-x: auto`.
-- **Syntax colors with < 3:1 contrast.** Comments especially — they tend to be too faint.
-- **Color-only diff indication.** Always add + / - markers or icons alongside color.
-- **Copying includes line numbers.** Use `user-select: none` on line number elements.
-- **Same styling for code blocks and terminal.** They serve different purposes. Terminal gets darker bg, green tint.
-- **`font-family: monospace` without named fonts.** Browsers default to Courier New which looks dated. Always specify a modern monospace font first.
-- **No copy button.** Users shouldn't have to triple-click and drag to copy code.
+- Code font too large (14px for blocks, 0.9em for inline)
+- No horizontal scroll on code blocks
+- Syntax colors with < 3:1 contrast (especially comments)
+- Color-only diff indication (add +/- markers)
+- Copying includes line numbers (use `user-select: none`)
+- Same styling for code blocks and terminal (different purposes)
+- `font-family: monospace` without named fonts (defaults to Courier New)
+- No copy button