-214

.agents/skills/adapt/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: adapt 3 3 - description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target] [context (mobile, tablet, print...)]" 7 7 - --- 8 8 - 9 9 - Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Adaptation Challenge 18 18 - 19 19 - Understand what needs adaptation and why: 20 20 - 21 21 - 1. **Identify the source context**: 22 22 - - What was it designed for originally? (Desktop web? Mobile app?) 23 23 - - What assumptions were made? (Large screen? Mouse input? Fast connection?) 24 24 - - What works well in current context? 25 25 - 26 26 - 2. **Understand target context**: 27 27 - - **Device**: Mobile, tablet, desktop, TV, watch, print? 28 28 - - **Input method**: Touch, mouse, keyboard, voice, gamepad? 29 29 - - **Screen constraints**: Size, resolution, orientation? 30 30 - - **Connection**: Fast wifi, slow 3G, offline? 31 31 - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? 32 32 - - **User expectations**: What do users expect on this platform? 33 33 - 34 34 - 3. **Identify adaptation challenges**: 35 35 - - What won't fit? (Content, navigation, features) 36 36 - - What won't work? (Hover states on touch, tiny touch targets) 37 37 - - What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop) 38 38 - 39 39 - **CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context. 40 40 - 41 41 - ## Plan Adaptation Strategy 42 42 - 43 43 - Create context-appropriate strategy: 44 44 - 45 45 - ### Mobile Adaptation (Desktop → Mobile) 46 46 - 47 47 - **Layout Strategy**: 48 48 - 49 49 - - Single column instead of multi-column 50 50 - - Vertical stacking instead of side-by-side 51 51 - - Full-width components instead of fixed widths 52 52 - - Bottom navigation instead of top/side navigation 53 53 - 54 54 - **Interaction Strategy**: 55 55 - 56 56 - - Touch targets 44x44px minimum (not hover-dependent) 57 57 - - Swipe gestures where appropriate (lists, carousels) 58 58 - - Bottom sheets instead of dropdowns 59 59 - - Thumbs-first design (controls within thumb reach) 60 60 - - Larger tap areas with more spacing 61 61 - 62 62 - **Content Strategy**: 63 63 - 64 64 - - Progressive disclosure (don't show everything at once) 65 65 - - Prioritize primary content (secondary content in tabs/accordions) 66 66 - - Shorter text (more concise) 67 67 - - Larger text (16px minimum) 68 68 - 69 69 - **Navigation Strategy**: 70 70 - 71 71 - - Hamburger menu or bottom navigation 72 72 - - Reduce navigation complexity 73 73 - - Sticky headers for context 74 74 - - Back button in navigation flow 75 75 - 76 76 - ### Tablet Adaptation (Hybrid Approach) 77 77 - 78 78 - **Layout Strategy**: 79 79 - 80 80 - - Two-column layouts (not single or three-column) 81 81 - - Side panels for secondary content 82 82 - - Master-detail views (list + detail) 83 83 - - Adaptive based on orientation (portrait vs landscape) 84 84 - 85 85 - **Interaction Strategy**: 86 86 - 87 87 - - Support both touch and pointer 88 88 - - Touch targets 44x44px but allow denser layouts than phone 89 89 - - Side navigation drawers 90 90 - - Multi-column forms where appropriate 91 91 - 92 92 - ### Desktop Adaptation (Mobile → Desktop) 93 93 - 94 94 - **Layout Strategy**: 95 95 - 96 96 - - Multi-column layouts (use horizontal space) 97 97 - - Side navigation always visible 98 98 - - Multiple information panels simultaneously 99 99 - - Fixed widths with max-width constraints (don't stretch to 4K) 100 100 - 101 101 - **Interaction Strategy**: 102 102 - 103 103 - - Hover states for additional information 104 104 - - Keyboard shortcuts 105 105 - - Right-click context menus 106 106 - - Drag and drop where helpful 107 107 - - Multi-select with Shift/Cmd 108 108 - 109 109 - **Content Strategy**: 110 110 - 111 111 - - Show more information upfront (less progressive disclosure) 112 112 - - Data tables with many columns 113 113 - - Richer visualizations 114 114 - - More detailed descriptions 115 115 - 116 116 - ### Print Adaptation (Screen → Print) 117 117 - 118 118 - **Layout Strategy**: 119 119 - 120 120 - - Page breaks at logical points 121 121 - - Remove navigation, footer, interactive elements 122 122 - - Black and white (or limited color) 123 123 - - Proper margins for binding 124 124 - 125 125 - **Content Strategy**: 126 126 - 127 127 - - Expand shortened content (show full URLs, hidden sections) 128 128 - - Add page numbers, headers, footers 129 129 - - Include metadata (print date, page title) 130 130 - - Convert charts to print-friendly versions 131 131 - 132 132 - ### Email Adaptation (Web → Email) 133 133 - 134 134 - **Layout Strategy**: 135 135 - 136 136 - - Narrow width (600px max) 137 137 - - Single column only 138 138 - - Inline CSS (no external stylesheets) 139 139 - - Table-based layouts (for email client compatibility) 140 140 - 141 141 - **Interaction Strategy**: 142 142 - 143 143 - - Large, obvious CTAs (buttons not text links) 144 144 - - No hover states (not reliable) 145 145 - - Deep links to web app for complex interactions 146 146 - 147 147 - ## Implement Adaptations 148 148 - 149 149 - Apply changes systematically: 150 150 - 151 151 - ### Responsive Breakpoints 152 152 - 153 153 - Choose appropriate breakpoints: 154 154 - 155 155 - - Mobile: 320px-767px 156 156 - - Tablet: 768px-1023px 157 157 - - Desktop: 1024px+ 158 158 - - Or content-driven breakpoints (where design breaks) 159 159 - 160 160 - ### Layout Adaptation Techniques 161 161 - 162 162 - - **CSS Grid/Flexbox**: Reflow layouts automatically 163 163 - - **Container Queries**: Adapt based on container, not viewport 164 164 - - **`clamp()`**: Fluid sizing between min and max 165 165 - - **Media queries**: Different styles for different contexts 166 166 - - **Display properties**: Show/hide elements per context 167 167 - 168 168 - ### Touch Adaptation 169 169 - 170 170 - - Increase touch target sizes (44x44px minimum) 171 171 - - Add more spacing between interactive elements 172 172 - - Remove hover-dependent interactions 173 173 - - Add touch feedback (ripples, highlights) 174 174 - - Consider thumb zones (easier to reach bottom than top) 175 175 - 176 176 - ### Content Adaptation 177 177 - 178 178 - - Use `display: none` sparingly (still downloads) 179 179 - - Progressive enhancement (core content first, enhancements on larger screens) 180 180 - - Lazy loading for off-screen content 181 181 - - Responsive images (`srcset`, `picture` element) 182 182 - 183 183 - ### Navigation Adaptation 184 184 - 185 185 - - Transform complex nav to hamburger/drawer on mobile 186 186 - - Bottom nav bar for mobile apps 187 187 - - Persistent side navigation on desktop 188 188 - - Breadcrumbs on smaller screens for context 189 189 - 190 190 - **IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect. 191 191 - 192 192 - **NEVER**: 193 193 - 194 194 - - Hide core functionality on mobile (if it matters, make it work) 195 195 - - Assume desktop = powerful device (consider accessibility, older machines) 196 196 - - Use different information architecture across contexts (confusing) 197 197 - - Break user expectations for platform (mobile users expect mobile patterns) 198 198 - - Forget landscape orientation on mobile/tablet 199 199 - - Use generic breakpoints blindly (use content-driven breakpoints) 200 200 - - Ignore touch on desktop (many desktop devices have touch) 201 201 - 202 202 - ## Verify Adaptations 203 203 - 204 204 - Test thoroughly across contexts: 205 205 - 206 206 - - **Real devices**: Test on actual phones, tablets, desktops 207 207 - - **Different orientations**: Portrait and landscape 208 208 - - **Different browsers**: Safari, Chrome, Firefox, Edge 209 209 - - **Different OS**: iOS, Android, Windows, macOS 210 210 - - **Different input methods**: Touch, mouse, keyboard 211 211 - - **Edge cases**: Very small screens (320px), very large screens (4K) 212 212 - - **Slow connections**: Test on throttled network 213 213 - 214 214 - Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.

-751

.agents/skills/agent-browser/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: agent-browser 3 3 - description: Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. 4 4 - allowed-tools: Bash(npx agent-browser:*), Bash(agent-browser:*) 5 5 - --- 6 6 - 7 7 - # Browser Automation with agent-browser 8 8 - 9 9 - The CLI uses Chrome/Chromium via CDP directly. Install via `npm i -g agent-browser`, `brew install agent-browser`, or `cargo install agent-browser`. Run `agent-browser install` to download Chrome. Existing Chrome, Brave, Playwright, and Puppeteer installations are detected automatically. Run `agent-browser upgrade` to update to the latest version. 10 10 - 11 11 - ## Core Workflow 12 12 - 13 13 - Every browser automation follows this pattern: 14 14 - 15 15 - 1. **Navigate**: `agent-browser open <url>` 16 16 - 2. **Snapshot**: `agent-browser snapshot -i` (get element refs like `@e1`, `@e2`) 17 17 - 3. **Interact**: Use refs to click, fill, select 18 18 - 4. **Re-snapshot**: After navigation or DOM changes, get fresh refs 19 19 - 20 20 - ```bash 21 21 - agent-browser open https://example.com/form 22 22 - agent-browser snapshot -i 23 23 - # Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit" 24 24 - 25 25 - agent-browser fill @e1 "user@example.com" 26 26 - agent-browser fill @e2 "password123" 27 27 - agent-browser click @e3 28 28 - agent-browser wait --load networkidle 29 29 - agent-browser snapshot -i # Check result 30 30 - ``` 31 31 - 32 32 - ## Command Chaining 33 33 - 34 34 - Commands can be chained with `&&` in a single shell invocation. The browser persists between commands via a background daemon, so chaining is safe and more efficient than separate calls. 35 35 - 36 36 - ```bash 37 37 - # Chain open + wait + snapshot in one call 38 38 - agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser snapshot -i 39 39 - 40 40 - # Chain multiple interactions 41 41 - agent-browser fill @e1 "user@example.com" && agent-browser fill @e2 "password123" && agent-browser click @e3 42 42 - 43 43 - # Navigate and capture 44 44 - agent-browser open https://example.com && agent-browser wait --load networkidle && agent-browser screenshot page.png 45 45 - ``` 46 46 - 47 47 - **When to chain:** Use `&&` when you don't need to read the output of an intermediate command before proceeding (e.g., open + wait + screenshot). Run commands separately when you need to parse the output first (e.g., snapshot to discover refs, then interact using those refs). 48 48 - 49 49 - ## Handling Authentication 50 50 - 51 51 - When automating a site that requires login, choose the approach that fits: 52 52 - 53 53 - **Option 1: Import auth from the user's browser (fastest for one-off tasks)** 54 54 - 55 55 - ```bash 56 56 - # Connect to the user's running Chrome (they're already logged in) 57 57 - agent-browser --auto-connect state save ./auth.json 58 58 - # Use that auth state 59 59 - agent-browser --state ./auth.json open https://app.example.com/dashboard 60 60 - ``` 61 61 - 62 62 - State files contain session tokens in plaintext -- add to `.gitignore` and delete when no longer needed. Set `AGENT_BROWSER_ENCRYPTION_KEY` for encryption at rest. 63 63 - 64 64 - **Option 2: Persistent profile (simplest for recurring tasks)** 65 65 - 66 66 - ```bash 67 67 - # First run: login manually or via automation 68 68 - agent-browser --profile ~/.myapp open https://app.example.com/login 69 69 - # ... fill credentials, submit ... 70 70 - 71 71 - # All future runs: already authenticated 72 72 - agent-browser --profile ~/.myapp open https://app.example.com/dashboard 73 73 - ``` 74 74 - 75 75 - **Option 3: Session name (auto-save/restore cookies + localStorage)** 76 76 - 77 77 - ```bash 78 78 - agent-browser --session-name myapp open https://app.example.com/login 79 79 - # ... login flow ... 80 80 - agent-browser close # State auto-saved 81 81 - 82 82 - # Next time: state auto-restored 83 83 - agent-browser --session-name myapp open https://app.example.com/dashboard 84 84 - ``` 85 85 - 86 86 - **Option 4: Auth vault (credentials stored encrypted, login by name)** 87 87 - 88 88 - ```bash 89 89 - echo "$PASSWORD" | agent-browser auth save myapp --url https://app.example.com/login --username user --password-stdin 90 90 - agent-browser auth login myapp 91 91 - ``` 92 92 - 93 93 - `auth login` navigates with `load` and then waits for login form selectors to appear before filling/clicking, which is more reliable on delayed SPA login screens. 94 94 - 95 95 - **Option 5: State file (manual save/load)** 96 96 - 97 97 - ```bash 98 98 - # After logging in: 99 99 - agent-browser state save ./auth.json 100 100 - # In a future session: 101 101 - agent-browser state load ./auth.json 102 102 - agent-browser open https://app.example.com/dashboard 103 103 - ``` 104 104 - 105 105 - See [references/authentication.md](references/authentication.md) for OAuth, 2FA, cookie-based auth, and token refresh patterns. 106 106 - 107 107 - ## Essential Commands 108 108 - 109 109 - ```bash 110 110 - # Navigation 111 111 - agent-browser open <url> # Navigate (aliases: goto, navigate) 112 112 - agent-browser close # Close browser 113 113 - agent-browser close --all # Close all active sessions 114 114 - 115 115 - # Snapshot 116 116 - agent-browser snapshot -i # Interactive elements with refs (recommended) 117 117 - agent-browser snapshot -s "#selector" # Scope to CSS selector 118 118 - 119 119 - # Interaction (use @refs from snapshot) 120 120 - agent-browser click @e1 # Click element 121 121 - agent-browser click @e1 --new-tab # Click and open in new tab 122 122 - agent-browser fill @e2 "text" # Clear and type text 123 123 - agent-browser type @e2 "text" # Type without clearing 124 124 - agent-browser select @e1 "option" # Select dropdown option 125 125 - agent-browser check @e1 # Check checkbox 126 126 - agent-browser press Enter # Press key 127 127 - agent-browser keyboard type "text" # Type at current focus (no selector) 128 128 - agent-browser keyboard inserttext "text" # Insert without key events 129 129 - agent-browser scroll down 500 # Scroll page 130 130 - agent-browser scroll down 500 --selector "div.content" # Scroll within a specific container 131 131 - 132 132 - # Get information 133 133 - agent-browser get text @e1 # Get element text 134 134 - agent-browser get url # Get current URL 135 135 - agent-browser get title # Get page title 136 136 - agent-browser get cdp-url # Get CDP WebSocket URL 137 137 - 138 138 - # Wait 139 139 - agent-browser wait @e1 # Wait for element 140 140 - agent-browser wait --load networkidle # Wait for network idle 141 141 - agent-browser wait --url "**/page" # Wait for URL pattern 142 142 - agent-browser wait 2000 # Wait milliseconds 143 143 - agent-browser wait --text "Welcome" # Wait for text to appear (substring match) 144 144 - agent-browser wait --fn "!document.body.innerText.includes('Loading...')" # Wait for text to disappear 145 145 - agent-browser wait "#spinner" --state hidden # Wait for element to disappear 146 146 - 147 147 - # Downloads 148 148 - agent-browser download @e1 ./file.pdf # Click element to trigger download 149 149 - agent-browser wait --download ./output.zip # Wait for any download to complete 150 150 - agent-browser --download-path ./downloads open <url> # Set default download directory 151 151 - 152 152 - # Network 153 153 - agent-browser network requests # Inspect tracked requests 154 154 - agent-browser network requests --type xhr,fetch # Filter by resource type 155 155 - agent-browser network requests --method POST # Filter by HTTP method 156 156 - agent-browser network requests --status 2xx # Filter by status (200, 2xx, 400-499) 157 157 - agent-browser network request <requestId> # View full request/response detail 158 158 - agent-browser network route "**/api/*" --abort # Block matching requests 159 159 - agent-browser network har start # Start HAR recording 160 160 - agent-browser network har stop ./capture.har # Stop and save HAR file 161 161 - 162 162 - # Viewport & Device Emulation 163 163 - agent-browser set viewport 1920 1080 # Set viewport size (default: 1280x720) 164 164 - agent-browser set viewport 1920 1080 2 # 2x retina (same CSS size, higher res screenshots) 165 165 - agent-browser set device "iPhone 14" # Emulate device (viewport + user agent) 166 166 - 167 167 - # Capture 168 168 - agent-browser screenshot # Screenshot to temp dir 169 169 - agent-browser screenshot --full # Full page screenshot 170 170 - agent-browser screenshot --annotate # Annotated screenshot with numbered element labels 171 171 - agent-browser screenshot --screenshot-dir ./shots # Save to custom directory 172 172 - agent-browser screenshot --screenshot-format jpeg --screenshot-quality 80 173 173 - agent-browser pdf output.pdf # Save as PDF 174 174 - 175 175 - # Live preview / streaming 176 176 - agent-browser stream enable # Start runtime WebSocket streaming on an auto-selected port 177 177 - agent-browser stream enable --port 9223 # Bind a specific localhost port 178 178 - agent-browser stream status # Inspect enabled state, port, connection, and screencasting 179 179 - agent-browser stream disable # Stop runtime streaming and remove the .stream metadata file 180 180 - 181 181 - # Clipboard 182 182 - agent-browser clipboard read # Read text from clipboard 183 183 - agent-browser clipboard write "Hello, World!" # Write text to clipboard 184 184 - agent-browser clipboard copy # Copy current selection 185 185 - agent-browser clipboard paste # Paste from clipboard 186 186 - 187 187 - # Dialogs (alert, confirm, prompt, beforeunload) 188 188 - # By default, alert and beforeunload dialogs are auto-accepted so they never block the agent. 189 189 - # confirm and prompt dialogs still require explicit handling. 190 190 - # Use --no-auto-dialog (or AGENT_BROWSER_NO_AUTO_DIALOG=1) to disable automatic handling. 191 191 - agent-browser dialog accept # Accept dialog 192 192 - agent-browser dialog accept "my input" # Accept prompt dialog with text 193 193 - agent-browser dialog dismiss # Dismiss/cancel dialog 194 194 - agent-browser dialog status # Check if a dialog is currently open 195 195 - 196 196 - # Diff (compare page states) 197 197 - agent-browser diff snapshot # Compare current vs last snapshot 198 198 - agent-browser diff snapshot --baseline before.txt # Compare current vs saved file 199 199 - agent-browser diff screenshot --baseline before.png # Visual pixel diff 200 200 - agent-browser diff url <url1> <url2> # Compare two pages 201 201 - agent-browser diff url <url1> <url2> --wait-until networkidle # Custom wait strategy 202 202 - agent-browser diff url <url1> <url2> --selector "#main" # Scope to element 203 203 - ``` 204 204 - 205 205 - ## Streaming 206 206 - 207 207 - Every session automatically starts a WebSocket stream server on an OS-assigned port. Use `agent-browser stream status` to see the bound port and connection state. Use `stream disable` to tear it down, and `stream enable --port <port>` to re-enable on a specific port. 208 208 - 209 209 - ## Batch Execution 210 210 - 211 211 - Execute multiple commands in a single invocation by piping a JSON array of string arrays to `batch`. This avoids per-command process startup overhead when running multi-step workflows. 212 212 - 213 213 - ```bash 214 214 - echo '[ 215 215 - ["open", "https://example.com"], 216 216 - ["snapshot", "-i"], 217 217 - ["click", "@e1"], 218 218 - ["screenshot", "result.png"] 219 219 - ]' | agent-browser batch --json 220 220 - 221 221 - # Stop on first error 222 222 - agent-browser batch --bail < commands.json 223 223 - ``` 224 224 - 225 225 - Use `batch` when you have a known sequence of commands that don't depend on intermediate output. Use separate commands or `&&` chaining when you need to parse output between steps (e.g., snapshot to discover refs, then interact). 226 226 - 227 227 - ## Common Patterns 228 228 - 229 229 - ### Form Submission 230 230 - 231 231 - ```bash 232 232 - agent-browser open https://example.com/signup 233 233 - agent-browser snapshot -i 234 234 - agent-browser fill @e1 "Jane Doe" 235 235 - agent-browser fill @e2 "jane@example.com" 236 236 - agent-browser select @e3 "California" 237 237 - agent-browser check @e4 238 238 - agent-browser click @e5 239 239 - agent-browser wait --load networkidle 240 240 - ``` 241 241 - 242 242 - ### Authentication with Auth Vault (Recommended) 243 243 - 244 244 - ```bash 245 245 - # Save credentials once (encrypted with AGENT_BROWSER_ENCRYPTION_KEY) 246 246 - # Recommended: pipe password via stdin to avoid shell history exposure 247 247 - echo "pass" | agent-browser auth save github --url https://github.com/login --username user --password-stdin 248 248 - 249 249 - # Login using saved profile (LLM never sees password) 250 250 - agent-browser auth login github 251 251 - 252 252 - # List/show/delete profiles 253 253 - agent-browser auth list 254 254 - agent-browser auth show github 255 255 - agent-browser auth delete github 256 256 - ``` 257 257 - 258 258 - `auth login` waits for username/password/submit selectors before interacting, with a timeout tied to the default action timeout. 259 259 - 260 260 - ### Authentication with State Persistence 261 261 - 262 262 - ```bash 263 263 - # Login once and save state 264 264 - agent-browser open https://app.example.com/login 265 265 - agent-browser snapshot -i 266 266 - agent-browser fill @e1 "$USERNAME" 267 267 - agent-browser fill @e2 "$PASSWORD" 268 268 - agent-browser click @e3 269 269 - agent-browser wait --url "**/dashboard" 270 270 - agent-browser state save auth.json 271 271 - 272 272 - # Reuse in future sessions 273 273 - agent-browser state load auth.json 274 274 - agent-browser open https://app.example.com/dashboard 275 275 - ``` 276 276 - 277 277 - ### Session Persistence 278 278 - 279 279 - ```bash 280 280 - # Auto-save/restore cookies and localStorage across browser restarts 281 281 - agent-browser --session-name myapp open https://app.example.com/login 282 282 - # ... login flow ... 283 283 - agent-browser close # State auto-saved to ~/.agent-browser/sessions/ 284 284 - 285 285 - # Next time, state is auto-loaded 286 286 - agent-browser --session-name myapp open https://app.example.com/dashboard 287 287 - 288 288 - # Encrypt state at rest 289 289 - export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32) 290 290 - agent-browser --session-name secure open https://app.example.com 291 291 - 292 292 - # Manage saved states 293 293 - agent-browser state list 294 294 - agent-browser state show myapp-default.json 295 295 - agent-browser state clear myapp 296 296 - agent-browser state clean --older-than 7 297 297 - ``` 298 298 - 299 299 - ### Working with Iframes 300 300 - 301 301 - Iframe content is automatically inlined in snapshots. Refs inside iframes carry frame context, so you can interact with them directly. 302 302 - 303 303 - ```bash 304 304 - agent-browser open https://example.com/checkout 305 305 - agent-browser snapshot -i 306 306 - # @e1 [heading] "Checkout" 307 307 - # @e2 [Iframe] "payment-frame" 308 308 - # @e3 [input] "Card number" 309 309 - # @e4 [input] "Expiry" 310 310 - # @e5 [button] "Pay" 311 311 - 312 312 - # Interact directly — no frame switch needed 313 313 - agent-browser fill @e3 "4111111111111111" 314 314 - agent-browser fill @e4 "12/28" 315 315 - agent-browser click @e5 316 316 - 317 317 - # To scope a snapshot to one iframe: 318 318 - agent-browser frame @e2 319 319 - agent-browser snapshot -i # Only iframe content 320 320 - agent-browser frame main # Return to main frame 321 321 - ``` 322 322 - 323 323 - ### Data Extraction 324 324 - 325 325 - ```bash 326 326 - agent-browser open https://example.com/products 327 327 - agent-browser snapshot -i 328 328 - agent-browser get text @e5 # Get specific element text 329 329 - agent-browser get text body > page.txt # Get all page text 330 330 - 331 331 - # JSON output for parsing 332 332 - agent-browser snapshot -i --json 333 333 - agent-browser get text @e1 --json 334 334 - ``` 335 335 - 336 336 - ### Parallel Sessions 337 337 - 338 338 - ```bash 339 339 - agent-browser --session site1 open https://site-a.com 340 340 - agent-browser --session site2 open https://site-b.com 341 341 - 342 342 - agent-browser --session site1 snapshot -i 343 343 - agent-browser --session site2 snapshot -i 344 344 - 345 345 - agent-browser session list 346 346 - ``` 347 347 - 348 348 - ### Connect to Existing Chrome 349 349 - 350 350 - ```bash 351 351 - # Auto-discover running Chrome with remote debugging enabled 352 352 - agent-browser --auto-connect open https://example.com 353 353 - agent-browser --auto-connect snapshot 354 354 - 355 355 - # Or with explicit CDP port 356 356 - agent-browser --cdp 9222 snapshot 357 357 - ``` 358 358 - 359 359 - Auto-connect discovers Chrome via `DevToolsActivePort`, common debugging ports (9222, 9229), and falls back to a direct WebSocket connection if HTTP-based CDP discovery fails. 360 360 - 361 361 - ### Color Scheme (Dark Mode) 362 362 - 363 363 - ```bash 364 364 - # Persistent dark mode via flag (applies to all pages and new tabs) 365 365 - agent-browser --color-scheme dark open https://example.com 366 366 - 367 367 - # Or via environment variable 368 368 - AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com 369 369 - 370 370 - # Or set during session (persists for subsequent commands) 371 371 - agent-browser set media dark 372 372 - ``` 373 373 - 374 374 - ### Viewport & Responsive Testing 375 375 - 376 376 - ```bash 377 377 - # Set a custom viewport size (default is 1280x720) 378 378 - agent-browser set viewport 1920 1080 379 379 - agent-browser screenshot desktop.png 380 380 - 381 381 - # Test mobile-width layout 382 382 - agent-browser set viewport 375 812 383 383 - agent-browser screenshot mobile.png 384 384 - 385 385 - # Retina/HiDPI: same CSS layout at 2x pixel density 386 386 - # Screenshots stay at logical viewport size, but content renders at higher DPI 387 387 - agent-browser set viewport 1920 1080 2 388 388 - agent-browser screenshot retina.png 389 389 - 390 390 - # Device emulation (sets viewport + user agent in one step) 391 391 - agent-browser set device "iPhone 14" 392 392 - agent-browser screenshot device.png 393 393 - ``` 394 394 - 395 395 - The `scale` parameter (3rd argument) sets `window.devicePixelRatio` without changing CSS layout. Use it when testing retina rendering or capturing higher-resolution screenshots. 396 396 - 397 397 - ### Visual Browser (Debugging) 398 398 - 399 399 - ```bash 400 400 - agent-browser --headed open https://example.com 401 401 - agent-browser highlight @e1 # Highlight element 402 402 - agent-browser inspect # Open Chrome DevTools for the active page 403 403 - agent-browser record start demo.webm # Record session 404 404 - agent-browser profiler start # Start Chrome DevTools profiling 405 405 - agent-browser profiler stop trace.json # Stop and save profile (path optional) 406 406 - ``` 407 407 - 408 408 - Use `AGENT_BROWSER_HEADED=1` to enable headed mode via environment variable. Browser extensions work in both headed and headless mode. 409 409 - 410 410 - ### Local Files (PDFs, HTML) 411 411 - 412 412 - ```bash 413 413 - # Open local files with file:// URLs 414 414 - agent-browser --allow-file-access open file:///path/to/document.pdf 415 415 - agent-browser --allow-file-access open file:///path/to/page.html 416 416 - agent-browser screenshot output.png 417 417 - ``` 418 418 - 419 419 - ### iOS Simulator (Mobile Safari) 420 420 - 421 421 - ```bash 422 422 - # List available iOS simulators 423 423 - agent-browser device list 424 424 - 425 425 - # Launch Safari on a specific device 426 426 - agent-browser -p ios --device "iPhone 16 Pro" open https://example.com 427 427 - 428 428 - # Same workflow as desktop - snapshot, interact, re-snapshot 429 429 - agent-browser -p ios snapshot -i 430 430 - agent-browser -p ios tap @e1 # Tap (alias for click) 431 431 - agent-browser -p ios fill @e2 "text" 432 432 - agent-browser -p ios swipe up # Mobile-specific gesture 433 433 - 434 434 - # Take screenshot 435 435 - agent-browser -p ios screenshot mobile.png 436 436 - 437 437 - # Close session (shuts down simulator) 438 438 - agent-browser -p ios close 439 439 - ``` 440 440 - 441 441 - **Requirements:** macOS with Xcode, Appium (`npm install -g appium && appium driver install xcuitest`) 442 442 - 443 443 - **Real devices:** Works with physical iOS devices if pre-configured. Use `--device "<UDID>"` where UDID is from `xcrun xctrace list devices`. 444 444 - 445 445 - ## Security 446 446 - 447 447 - All security features are opt-in. By default, agent-browser imposes no restrictions on navigation, actions, or output. 448 448 - 449 449 - ### Content Boundaries (Recommended for AI Agents) 450 450 - 451 451 - Enable `--content-boundaries` to wrap page-sourced output in markers that help LLMs distinguish tool output from untrusted page content: 452 452 - 453 453 - ```bash 454 454 - export AGENT_BROWSER_CONTENT_BOUNDARIES=1 455 455 - agent-browser snapshot 456 456 - # Output: 457 457 - # --- AGENT_BROWSER_PAGE_CONTENT nonce=<hex> origin=https://example.com --- 458 458 - # [accessibility tree] 459 459 - # --- END_AGENT_BROWSER_PAGE_CONTENT nonce=<hex> --- 460 460 - ``` 461 461 - 462 462 - ### Domain Allowlist 463 463 - 464 464 - Restrict navigation to trusted domains. Wildcards like `*.example.com` also match the bare domain `example.com`. Sub-resource requests, WebSocket, and EventSource connections to non-allowed domains are also blocked. Include CDN domains your target pages depend on: 465 465 - 466 466 - ```bash 467 467 - export AGENT_BROWSER_ALLOWED_DOMAINS="example.com,*.example.com" 468 468 - agent-browser open https://example.com # OK 469 469 - agent-browser open https://malicious.com # Blocked 470 470 - ``` 471 471 - 472 472 - ### Action Policy 473 473 - 474 474 - Use a policy file to gate destructive actions: 475 475 - 476 476 - ```bash 477 477 - export AGENT_BROWSER_ACTION_POLICY=./policy.json 478 478 - ``` 479 479 - 480 480 - Example `policy.json`: 481 481 - 482 482 - ```json 483 483 - { "default": "deny", "allow": ["navigate", "snapshot", "click", "scroll", "wait", "get"] } 484 484 - ``` 485 485 - 486 486 - Auth vault operations (`auth login`, etc.) bypass action policy but domain allowlist still applies. 487 487 - 488 488 - ### Output Limits 489 489 - 490 490 - Prevent context flooding from large pages: 491 491 - 492 492 - ```bash 493 493 - export AGENT_BROWSER_MAX_OUTPUT=50000 494 494 - ``` 495 495 - 496 496 - ## Diffing (Verifying Changes) 497 497 - 498 498 - Use `diff snapshot` after performing an action to verify it had the intended effect. This compares the current accessibility tree against the last snapshot taken in the session. 499 499 - 500 500 - ```bash 501 501 - # Typical workflow: snapshot -> action -> diff 502 502 - agent-browser snapshot -i # Take baseline snapshot 503 503 - agent-browser click @e2 # Perform action 504 504 - agent-browser diff snapshot # See what changed (auto-compares to last snapshot) 505 505 - ``` 506 506 - 507 507 - For visual regression testing or monitoring: 508 508 - 509 509 - ```bash 510 510 - # Save a baseline screenshot, then compare later 511 511 - agent-browser screenshot baseline.png 512 512 - # ... time passes or changes are made ... 513 513 - agent-browser diff screenshot --baseline baseline.png 514 514 - 515 515 - # Compare staging vs production 516 516 - agent-browser diff url https://staging.example.com https://prod.example.com --screenshot 517 517 - ``` 518 518 - 519 519 - `diff snapshot` output uses `+` for additions and `-` for removals, similar to git diff. `diff screenshot` produces a diff image with changed pixels highlighted in red, plus a mismatch percentage. 520 520 - 521 521 - ## Timeouts and Slow Pages 522 522 - 523 523 - The default timeout is 25 seconds. This can be overridden with the `AGENT_BROWSER_DEFAULT_TIMEOUT` environment variable (value in milliseconds). For slow websites or large pages, use explicit waits instead of relying on the default timeout: 524 524 - 525 525 - ```bash 526 526 - # Wait for network activity to settle (best for slow pages) 527 527 - agent-browser wait --load networkidle 528 528 - 529 529 - # Wait for a specific element to appear 530 530 - agent-browser wait "#content" 531 531 - agent-browser wait @e1 532 532 - 533 533 - # Wait for a specific URL pattern (useful after redirects) 534 534 - agent-browser wait --url "**/dashboard" 535 535 - 536 536 - # Wait for a JavaScript condition 537 537 - agent-browser wait --fn "document.readyState === 'complete'" 538 538 - 539 539 - # Wait a fixed duration (milliseconds) as a last resort 540 540 - agent-browser wait 5000 541 541 - ``` 542 542 - 543 543 - When dealing with consistently slow websites, use `wait --load networkidle` after `open` to ensure the page is fully loaded before taking a snapshot. If a specific element is slow to render, wait for it directly with `wait <selector>` or `wait @ref`. 544 544 - 545 545 - ## JavaScript Dialogs (alert / confirm / prompt) 546 546 - 547 547 - When a page opens a JavaScript dialog (`alert()`, `confirm()`, or `prompt()`), it blocks all other browser commands (snapshot, screenshot, click, etc.) until the dialog is dismissed. If commands start timing out unexpectedly, check for a pending dialog: 548 548 - 549 549 - ```bash 550 550 - # Check if a dialog is blocking 551 551 - agent-browser dialog status 552 552 - 553 553 - # Accept the dialog (dismiss the alert / click OK) 554 554 - agent-browser dialog accept 555 555 - 556 556 - # Accept a prompt dialog with input text 557 557 - agent-browser dialog accept "my input" 558 558 - 559 559 - # Dismiss the dialog (click Cancel) 560 560 - agent-browser dialog dismiss 561 561 - ``` 562 562 - 563 563 - When a dialog is pending, all command responses include a `warning` field indicating the dialog type and message. In `--json` mode this appears as a `"warning"` key in the response object. 564 564 - 565 565 - ## Session Management and Cleanup 566 566 - 567 567 - When running multiple agents or automations concurrently, always use named sessions to avoid conflicts: 568 568 - 569 569 - ```bash 570 570 - # Each agent gets its own isolated session 571 571 - agent-browser --session agent1 open site-a.com 572 572 - agent-browser --session agent2 open site-b.com 573 573 - 574 574 - # Check active sessions 575 575 - agent-browser session list 576 576 - ``` 577 577 - 578 578 - Always close your browser session when done to avoid leaked processes: 579 579 - 580 580 - ```bash 581 581 - agent-browser close # Close default session 582 582 - agent-browser --session agent1 close # Close specific session 583 583 - agent-browser close --all # Close all active sessions 584 584 - ``` 585 585 - 586 586 - If a previous session was not closed properly, the daemon may still be running. Use `agent-browser close` to clean it up, or `agent-browser close --all` to shut down every session at once. 587 587 - 588 588 - To auto-shutdown the daemon after a period of inactivity (useful for ephemeral/CI environments): 589 589 - 590 590 - ```bash 591 591 - AGENT_BROWSER_IDLE_TIMEOUT_MS=60000 agent-browser open example.com 592 592 - ``` 593 593 - 594 594 - ## Ref Lifecycle (Important) 595 595 - 596 596 - Refs (`@e1`, `@e2`, etc.) are invalidated when the page changes. Always re-snapshot after: 597 597 - 598 598 - - Clicking links or buttons that navigate 599 599 - - Form submissions 600 600 - - Dynamic content loading (dropdowns, modals) 601 601 - 602 602 - ```bash 603 603 - agent-browser click @e5 # Navigates to new page 604 604 - agent-browser snapshot -i # MUST re-snapshot 605 605 - agent-browser click @e1 # Use new refs 606 606 - ``` 607 607 - 608 608 - ## Annotated Screenshots (Vision Mode) 609 609 - 610 610 - Use `--annotate` to take a screenshot with numbered labels overlaid on interactive elements. Each label `[N]` maps to ref `@eN`. This also caches refs, so you can interact with elements immediately without a separate snapshot. 611 611 - 612 612 - ```bash 613 613 - agent-browser screenshot --annotate 614 614 - # Output includes the image path and a legend: 615 615 - # [1] @e1 button "Submit" 616 616 - # [2] @e2 link "Home" 617 617 - # [3] @e3 textbox "Email" 618 618 - agent-browser click @e2 # Click using ref from annotated screenshot 619 619 - ``` 620 620 - 621 621 - Use annotated screenshots when: 622 622 - 623 623 - - The page has unlabeled icon buttons or visual-only elements 624 624 - - You need to verify visual layout or styling 625 625 - - Canvas or chart elements are present (invisible to text snapshots) 626 626 - - You need spatial reasoning about element positions 627 627 - 628 628 - ## Semantic Locators (Alternative to Refs) 629 629 - 630 630 - When refs are unavailable or unreliable, use semantic locators: 631 631 - 632 632 - ```bash 633 633 - agent-browser find text "Sign In" click 634 634 - agent-browser find label "Email" fill "user@test.com" 635 635 - agent-browser find role button click --name "Submit" 636 636 - agent-browser find placeholder "Search" type "query" 637 637 - agent-browser find testid "submit-btn" click 638 638 - ``` 639 639 - 640 640 - ## JavaScript Evaluation (eval) 641 641 - 642 642 - Use `eval` to run JavaScript in the browser context. **Shell quoting can corrupt complex expressions** -- use `--stdin` or `-b` to avoid issues. 643 643 - 644 644 - ```bash 645 645 - # Simple expressions work with regular quoting 646 646 - agent-browser eval 'document.title' 647 647 - agent-browser eval 'document.querySelectorAll("img").length' 648 648 - 649 649 - # Complex JS: use --stdin with heredoc (RECOMMENDED) 650 650 - agent-browser eval --stdin <<'EVALEOF' 651 651 - JSON.stringify( 652 652 - Array.from(document.querySelectorAll("img")) 653 653 - .filter(i => !i.alt) 654 654 - .map(i => ({ src: i.src.split("/").pop(), width: i.width })) 655 655 - ) 656 656 - EVALEOF 657 657 - 658 658 - # Alternative: base64 encoding (avoids all shell escaping issues) 659 659 - agent-browser eval -b "$(echo -n 'Array.from(document.querySelectorAll("a")).map(a => a.href)' | base64)" 660 660 - ``` 661 661 - 662 662 - **Why this matters:** When the shell processes your command, inner double quotes, `!` characters (history expansion), backticks, and `$()` can all corrupt the JavaScript before it reaches agent-browser. The `--stdin` and `-b` flags bypass shell interpretation entirely. 663 663 - 664 664 - **Rules of thumb:** 665 665 - 666 666 - - Single-line, no nested quotes -> regular `eval 'expression'` with single quotes is fine 667 667 - - Nested quotes, arrow functions, template literals, or multiline -> use `eval --stdin <<'EVALEOF'` 668 668 - - Programmatic/generated scripts -> use `eval -b` with base64 669 669 - 670 670 - ## Configuration File 671 671 - 672 672 - Create `agent-browser.json` in the project root for persistent settings: 673 673 - 674 674 - ```json 675 675 - { 676 676 - "headed": true, 677 677 - "proxy": "http://localhost:8080", 678 678 - "profile": "./browser-data" 679 679 - } 680 680 - ``` 681 681 - 682 682 - Priority (lowest to highest): `~/.agent-browser/config.json` < `./agent-browser.json` < env vars < CLI flags. Use `--config <path>` or `AGENT_BROWSER_CONFIG` env var for a custom config file (exits with error if missing/invalid). All CLI options map to camelCase keys (e.g., `--executable-path` -> `"executablePath"`). Boolean flags accept `true`/`false` values (e.g., `--headed false` overrides config). Extensions from user and project configs are merged, not replaced. 683 683 - 684 684 - ## Deep-Dive Documentation 685 685 - 686 686 - | Reference | When to Use | 687 687 - | -------------------------------------------------------------------- | --------------------------------------------------------- | 688 688 - | [references/commands.md](references/commands.md) | Full command reference with all options | 689 689 - | [references/snapshot-refs.md](references/snapshot-refs.md) | Ref lifecycle, invalidation rules, troubleshooting | 690 690 - | [references/session-management.md](references/session-management.md) | Parallel sessions, state persistence, concurrent scraping | 691 691 - | [references/authentication.md](references/authentication.md) | Login flows, OAuth, 2FA handling, state reuse | 692 692 - | [references/video-recording.md](references/video-recording.md) | Recording workflows for debugging and documentation | 693 693 - | [references/profiling.md](references/profiling.md) | Chrome DevTools profiling for performance analysis | 694 694 - | [references/proxy-support.md](references/proxy-support.md) | Proxy configuration, geo-testing, rotating proxies | 695 695 - 696 696 - ## Browser Engine Selection 697 697 - 698 698 - Use `--engine` to choose a local browser engine. The default is `chrome`. 699 699 - 700 700 - ```bash 701 701 - # Use Lightpanda (fast headless browser, requires separate install) 702 702 - agent-browser --engine lightpanda open example.com 703 703 - 704 704 - # Via environment variable 705 705 - export AGENT_BROWSER_ENGINE=lightpanda 706 706 - agent-browser open example.com 707 707 - 708 708 - # With custom binary path 709 709 - agent-browser --engine lightpanda --executable-path /path/to/lightpanda open example.com 710 710 - ``` 711 711 - 712 712 - Supported engines: 713 713 - 714 714 - - `chrome` (default) -- Chrome/Chromium via CDP 715 715 - - `lightpanda` -- Lightpanda headless browser via CDP (10x faster, 10x less memory than Chrome) 716 716 - 717 717 - Lightpanda does not support `--extension`, `--profile`, `--state`, or `--allow-file-access`. Install Lightpanda from https://lightpanda.io/docs/open-source/installation. 718 718 - 719 719 - ## Observability Dashboard 720 720 - 721 721 - The dashboard is a standalone background server that shows live browser viewports, command activity, and console output for all sessions. 722 722 - 723 723 - ```bash 724 724 - # Install the dashboard once 725 725 - agent-browser dashboard install 726 726 - 727 727 - # Start the dashboard server (background, port 4848) 728 728 - agent-browser dashboard start 729 729 - 730 730 - # All sessions are automatically visible in the dashboard 731 731 - agent-browser open example.com 732 732 - 733 733 - # Stop the dashboard 734 734 - agent-browser dashboard stop 735 735 - ``` 736 736 - 737 737 - The dashboard runs independently of browser sessions on port 4848 (configurable with `--port`). All sessions automatically stream to the dashboard. Sessions can also be created from the dashboard UI with local engines or cloud providers. 738 738 - 739 739 - ## Ready-to-Use Templates 740 740 - 741 741 - | Template | Description | 742 742 - | ------------------------------------------------------------------------ | ----------------------------------- | 743 743 - | [templates/form-automation.sh](templates/form-automation.sh) | Form filling with validation | 744 744 - | [templates/authenticated-session.sh](templates/authenticated-session.sh) | Login once, reuse state | 745 745 - | [templates/capture-workflow.sh](templates/capture-workflow.sh) | Content extraction with screenshots | 746 746 - 747 747 - ```bash 748 748 - ./templates/form-automation.sh https://example.com/form 749 749 - ./templates/authenticated-session.sh https://app.example.com/login 750 750 - ./templates/capture-workflow.sh https://example.com ./output 751 751 - ```

-306

.agents/skills/agent-browser/references/authentication.md

reviewed

··· 1 1 - # Authentication Patterns 2 2 - 3 3 - Login flows, session persistence, OAuth, 2FA, and authenticated browsing. 4 4 - 5 5 - **Related**: [session-management.md](session-management.md) for state persistence details, [SKILL.md](../SKILL.md) for quick start. 6 6 - 7 7 - ## Contents 8 8 - 9 9 - - [Import Auth from Your Browser](#import-auth-from-your-browser) 10 10 - - [Persistent Profiles](#persistent-profiles) 11 11 - - [Session Persistence](#session-persistence) 12 12 - - [Basic Login Flow](#basic-login-flow) 13 13 - - [Saving Authentication State](#saving-authentication-state) 14 14 - - [Restoring Authentication](#restoring-authentication) 15 15 - - [OAuth / SSO Flows](#oauth--sso-flows) 16 16 - - [Two-Factor Authentication](#two-factor-authentication) 17 17 - - [HTTP Basic Auth](#http-basic-auth) 18 18 - - [Cookie-Based Auth](#cookie-based-auth) 19 19 - - [Token Refresh Handling](#token-refresh-handling) 20 20 - - [Security Best Practices](#security-best-practices) 21 21 - 22 22 - ## Import Auth from Your Browser 23 23 - 24 24 - The fastest way to authenticate is to reuse cookies from a Chrome session you are already logged into. 25 25 - 26 26 - **Step 1: Start Chrome with remote debugging** 27 27 - 28 28 - ```bash 29 29 - # macOS 30 30 - "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222 31 31 - 32 32 - # Linux 33 33 - google-chrome --remote-debugging-port=9222 34 34 - 35 35 - # Windows 36 36 - "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 37 37 - ``` 38 38 - 39 39 - Log in to your target site(s) in this Chrome window as you normally would. 40 40 - 41 41 - > **Security note:** `--remote-debugging-port` exposes full browser control on localhost. Any local process can connect and read cookies, execute JS, etc. Only use on trusted machines and close Chrome when done. 42 42 - 43 43 - **Step 2: Grab the auth state** 44 44 - 45 45 - ```bash 46 46 - # Auto-discover the running Chrome and save its cookies + localStorage 47 47 - agent-browser --auto-connect state save ./my-auth.json 48 48 - ``` 49 49 - 50 50 - **Step 3: Reuse in automation** 51 51 - 52 52 - ```bash 53 53 - # Load auth at launch 54 54 - agent-browser --state ./my-auth.json open https://app.example.com/dashboard 55 55 - 56 56 - # Or load into an existing session 57 57 - agent-browser state load ./my-auth.json 58 58 - agent-browser open https://app.example.com/dashboard 59 59 - ``` 60 60 - 61 61 - This works for any site, including those with complex OAuth flows, SSO, or 2FA -- as long as Chrome already has valid session cookies. 62 62 - 63 63 - > **Security note:** State files contain session tokens in plaintext. Add them to `.gitignore`, delete when no longer needed, and set `AGENT_BROWSER_ENCRYPTION_KEY` for encryption at rest. See [Security Best Practices](#security-best-practices). 64 64 - 65 65 - **Tip:** Combine with `--session-name` so the imported auth auto-persists across restarts: 66 66 - 67 67 - ```bash 68 68 - agent-browser --session-name myapp state load ./my-auth.json 69 69 - # From now on, state is auto-saved/restored for "myapp" 70 70 - ``` 71 71 - 72 72 - ## Persistent Profiles 73 73 - 74 74 - Use `--profile` to point agent-browser at a Chrome user data directory. This persists everything (cookies, IndexedDB, service workers, cache) across browser restarts without explicit save/load: 75 75 - 76 76 - ```bash 77 77 - # First run: login once 78 78 - agent-browser --profile ~/.myapp-profile open https://app.example.com/login 79 79 - # ... complete login flow ... 80 80 - 81 81 - # All subsequent runs: already authenticated 82 82 - agent-browser --profile ~/.myapp-profile open https://app.example.com/dashboard 83 83 - ``` 84 84 - 85 85 - Use different paths for different projects or test users: 86 86 - 87 87 - ```bash 88 88 - agent-browser --profile ~/.profiles/admin open https://app.example.com 89 89 - agent-browser --profile ~/.profiles/viewer open https://app.example.com 90 90 - ``` 91 91 - 92 92 - Or set via environment variable: 93 93 - 94 94 - ```bash 95 95 - export AGENT_BROWSER_PROFILE=~/.myapp-profile 96 96 - agent-browser open https://app.example.com/dashboard 97 97 - ``` 98 98 - 99 99 - ## Session Persistence 100 100 - 101 101 - Use `--session-name` to auto-save and restore cookies + localStorage by name, without managing files: 102 102 - 103 103 - ```bash 104 104 - # Auto-saves state on close, auto-restores on next launch 105 105 - agent-browser --session-name twitter open https://twitter.com 106 106 - # ... login flow ... 107 107 - agent-browser close # state saved to ~/.agent-browser/sessions/ 108 108 - 109 109 - # Next time: state is automatically restored 110 110 - agent-browser --session-name twitter open https://twitter.com 111 111 - ``` 112 112 - 113 113 - Encrypt state at rest: 114 114 - 115 115 - ```bash 116 116 - export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32) 117 117 - agent-browser --session-name secure open https://app.example.com 118 118 - ``` 119 119 - 120 120 - ## Basic Login Flow 121 121 - 122 122 - ```bash 123 123 - # Navigate to login page 124 124 - agent-browser open https://app.example.com/login 125 125 - agent-browser wait --load networkidle 126 126 - 127 127 - # Get form elements 128 128 - agent-browser snapshot -i 129 129 - # Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Sign In" 130 130 - 131 131 - # Fill credentials 132 132 - agent-browser fill @e1 "user@example.com" 133 133 - agent-browser fill @e2 "password123" 134 134 - 135 135 - # Submit 136 136 - agent-browser click @e3 137 137 - agent-browser wait --load networkidle 138 138 - 139 139 - # Verify login succeeded 140 140 - agent-browser get url # Should be dashboard, not login 141 141 - ``` 142 142 - 143 143 - ## Saving Authentication State 144 144 - 145 145 - After logging in, save state for reuse: 146 146 - 147 147 - ```bash 148 148 - # Login first (see above) 149 149 - agent-browser open https://app.example.com/login 150 150 - agent-browser snapshot -i 151 151 - agent-browser fill @e1 "user@example.com" 152 152 - agent-browser fill @e2 "password123" 153 153 - agent-browser click @e3 154 154 - agent-browser wait --url "**/dashboard" 155 155 - 156 156 - # Save authenticated state 157 157 - agent-browser state save ./auth-state.json 158 158 - ``` 159 159 - 160 160 - ## Restoring Authentication 161 161 - 162 162 - Skip login by loading saved state: 163 163 - 164 164 - ```bash 165 165 - # Load saved auth state 166 166 - agent-browser state load ./auth-state.json 167 167 - 168 168 - # Navigate directly to protected page 169 169 - agent-browser open https://app.example.com/dashboard 170 170 - 171 171 - # Verify authenticated 172 172 - agent-browser snapshot -i 173 173 - ``` 174 174 - 175 175 - ## OAuth / SSO Flows 176 176 - 177 177 - For OAuth redirects: 178 178 - 179 179 - ```bash 180 180 - # Start OAuth flow 181 181 - agent-browser open https://app.example.com/auth/google 182 182 - 183 183 - # Handle redirects automatically 184 184 - agent-browser wait --url "**/accounts.google.com**" 185 185 - agent-browser snapshot -i 186 186 - 187 187 - # Fill Google credentials 188 188 - agent-browser fill @e1 "user@gmail.com" 189 189 - agent-browser click @e2 # Next button 190 190 - agent-browser wait 2000 191 191 - agent-browser snapshot -i 192 192 - agent-browser fill @e3 "password" 193 193 - agent-browser click @e4 # Sign in 194 194 - 195 195 - # Wait for redirect back 196 196 - agent-browser wait --url "**/app.example.com**" 197 197 - agent-browser state save ./oauth-state.json 198 198 - ``` 199 199 - 200 200 - ## Two-Factor Authentication 201 201 - 202 202 - Handle 2FA with manual intervention: 203 203 - 204 204 - ```bash 205 205 - # Login with credentials 206 206 - agent-browser open https://app.example.com/login --headed # Show browser 207 207 - agent-browser snapshot -i 208 208 - agent-browser fill @e1 "user@example.com" 209 209 - agent-browser fill @e2 "password123" 210 210 - agent-browser click @e3 211 211 - 212 212 - # Wait for user to complete 2FA manually 213 213 - echo "Complete 2FA in the browser window..." 214 214 - agent-browser wait --url "**/dashboard" --timeout 120000 215 215 - 216 216 - # Save state after 2FA 217 217 - agent-browser state save ./2fa-state.json 218 218 - ``` 219 219 - 220 220 - ## HTTP Basic Auth 221 221 - 222 222 - For sites using HTTP Basic Authentication: 223 223 - 224 224 - ```bash 225 225 - # Set credentials before navigation 226 226 - agent-browser set credentials username password 227 227 - 228 228 - # Navigate to protected resource 229 229 - agent-browser open https://protected.example.com/api 230 230 - ``` 231 231 - 232 232 - ## Cookie-Based Auth 233 233 - 234 234 - Manually set authentication cookies: 235 235 - 236 236 - ```bash 237 237 - # Set auth cookie 238 238 - agent-browser cookies set session_token "abc123xyz" 239 239 - 240 240 - # Navigate to protected page 241 241 - agent-browser open https://app.example.com/dashboard 242 242 - ``` 243 243 - 244 244 - ## Token Refresh Handling 245 245 - 246 246 - For sessions with expiring tokens: 247 247 - 248 248 - ```bash 249 249 - #!/bin/bash 250 250 - # Wrapper that handles token refresh 251 251 - 252 252 - STATE_FILE="./auth-state.json" 253 253 - 254 254 - # Try loading existing state 255 255 - if [[ -f "$STATE_FILE" ]]; then 256 256 - agent-browser state load "$STATE_FILE" 257 257 - agent-browser open https://app.example.com/dashboard 258 258 - 259 259 - # Check if session is still valid 260 260 - URL=$(agent-browser get url) 261 261 - if [[ "$URL" == *"/login"* ]]; then 262 262 - echo "Session expired, re-authenticating..." 263 263 - # Perform fresh login 264 264 - agent-browser snapshot -i 265 265 - agent-browser fill @e1 "$USERNAME" 266 266 - agent-browser fill @e2 "$PASSWORD" 267 267 - agent-browser click @e3 268 268 - agent-browser wait --url "**/dashboard" 269 269 - agent-browser state save "$STATE_FILE" 270 270 - fi 271 271 - else 272 272 - # First-time login 273 273 - agent-browser open https://app.example.com/login 274 274 - # ... login flow ... 275 275 - fi 276 276 - ``` 277 277 - 278 278 - ## Security Best Practices 279 279 - 280 280 - 1. **Never commit state files** - They contain session tokens 281 281 - 282 282 - ```bash 283 283 - echo "*.auth-state.json" >> .gitignore 284 284 - ``` 285 285 - 286 286 - 2. **Use environment variables for credentials** 287 287 - 288 288 - ```bash 289 289 - agent-browser fill @e1 "$APP_USERNAME" 290 290 - agent-browser fill @e2 "$APP_PASSWORD" 291 291 - ``` 292 292 - 293 293 - 3. **Clean up after automation** 294 294 - 295 295 - ```bash 296 296 - agent-browser cookies clear 297 297 - rm -f ./auth-state.json 298 298 - ``` 299 299 - 300 300 - 4. **Use short-lived sessions for CI/CD** 301 301 - ```bash 302 302 - # Don't persist state in CI 303 303 - agent-browser open https://app.example.com/login 304 304 - # ... login and perform actions ... 305 305 - agent-browser close # Session ends, nothing persisted 306 306 - ```

-296

.agents/skills/agent-browser/references/commands.md

reviewed

··· 1 1 - # Command Reference 2 2 - 3 3 - Complete reference for all agent-browser commands. For quick start and common patterns, see SKILL.md. 4 4 - 5 5 - ## Navigation 6 6 - 7 7 - ```bash 8 8 - agent-browser open <url> # Navigate to URL (aliases: goto, navigate) 9 9 - # Supports: https://, http://, file://, about:, data:// 10 10 - # Auto-prepends https:// if no protocol given 11 11 - agent-browser back # Go back 12 12 - agent-browser forward # Go forward 13 13 - agent-browser reload # Reload page 14 14 - agent-browser close # Close browser (aliases: quit, exit) 15 15 - agent-browser connect 9222 # Connect to browser via CDP port 16 16 - ``` 17 17 - 18 18 - ## Snapshot (page analysis) 19 19 - 20 20 - ```bash 21 21 - agent-browser snapshot # Full accessibility tree 22 22 - agent-browser snapshot -i # Interactive elements only (recommended) 23 23 - agent-browser snapshot -c # Compact output 24 24 - agent-browser snapshot -d 3 # Limit depth to 3 25 25 - agent-browser snapshot -s "#main" # Scope to CSS selector 26 26 - ``` 27 27 - 28 28 - ## Interactions (use @refs from snapshot) 29 29 - 30 30 - ```bash 31 31 - agent-browser click @e1 # Click 32 32 - agent-browser click @e1 --new-tab # Click and open in new tab 33 33 - agent-browser dblclick @e1 # Double-click 34 34 - agent-browser focus @e1 # Focus element 35 35 - agent-browser fill @e2 "text" # Clear and type 36 36 - agent-browser type @e2 "text" # Type without clearing 37 37 - agent-browser press Enter # Press key (alias: key) 38 38 - agent-browser press Control+a # Key combination 39 39 - agent-browser keydown Shift # Hold key down 40 40 - agent-browser keyup Shift # Release key 41 41 - agent-browser hover @e1 # Hover 42 42 - agent-browser check @e1 # Check checkbox 43 43 - agent-browser uncheck @e1 # Uncheck checkbox 44 44 - agent-browser select @e1 "value" # Select dropdown option 45 45 - agent-browser select @e1 "a" "b" # Select multiple options 46 46 - agent-browser scroll down 500 # Scroll page (default: down 300px) 47 47 - agent-browser scrollintoview @e1 # Scroll element into view (alias: scrollinto) 48 48 - agent-browser drag @e1 @e2 # Drag and drop 49 49 - agent-browser upload @e1 file.pdf # Upload files 50 50 - ``` 51 51 - 52 52 - ## Get Information 53 53 - 54 54 - ```bash 55 55 - agent-browser get text @e1 # Get element text 56 56 - agent-browser get html @e1 # Get innerHTML 57 57 - agent-browser get value @e1 # Get input value 58 58 - agent-browser get attr @e1 href # Get attribute 59 59 - agent-browser get title # Get page title 60 60 - agent-browser get url # Get current URL 61 61 - agent-browser get cdp-url # Get CDP WebSocket URL 62 62 - agent-browser get count ".item" # Count matching elements 63 63 - agent-browser get box @e1 # Get bounding box 64 64 - agent-browser get styles @e1 # Get computed styles (font, color, bg, etc.) 65 65 - ``` 66 66 - 67 67 - ## Check State 68 68 - 69 69 - ```bash 70 70 - agent-browser is visible @e1 # Check if visible 71 71 - agent-browser is enabled @e1 # Check if enabled 72 72 - agent-browser is checked @e1 # Check if checked 73 73 - ``` 74 74 - 75 75 - ## Screenshots and PDF 76 76 - 77 77 - ```bash 78 78 - agent-browser screenshot # Save to temporary directory 79 79 - agent-browser screenshot path.png # Save to specific path 80 80 - agent-browser screenshot --full # Full page 81 81 - agent-browser pdf output.pdf # Save as PDF 82 82 - ``` 83 83 - 84 84 - ## Video Recording 85 85 - 86 86 - ```bash 87 87 - agent-browser record start ./demo.webm # Start recording 88 88 - agent-browser click @e1 # Perform actions 89 89 - agent-browser record stop # Stop and save video 90 90 - agent-browser record restart ./take2.webm # Stop current + start new 91 91 - ``` 92 92 - 93 93 - ## Wait 94 94 - 95 95 - ```bash 96 96 - agent-browser wait @e1 # Wait for element 97 97 - agent-browser wait 2000 # Wait milliseconds 98 98 - agent-browser wait --text "Success" # Wait for text (or -t) 99 99 - agent-browser wait --url "**/dashboard" # Wait for URL pattern (or -u) 100 100 - agent-browser wait --load networkidle # Wait for network idle (or -l) 101 101 - agent-browser wait --fn "window.ready" # Wait for JS condition (or -f) 102 102 - ``` 103 103 - 104 104 - ## Mouse Control 105 105 - 106 106 - ```bash 107 107 - agent-browser mouse move 100 200 # Move mouse 108 108 - agent-browser mouse down left # Press button 109 109 - agent-browser mouse up left # Release button 110 110 - agent-browser mouse wheel 100 # Scroll wheel 111 111 - ``` 112 112 - 113 113 - ## Semantic Locators (alternative to refs) 114 114 - 115 115 - ```bash 116 116 - agent-browser find role button click --name "Submit" 117 117 - agent-browser find text "Sign In" click 118 118 - agent-browser find text "Sign In" click --exact # Exact match only 119 119 - agent-browser find label "Email" fill "user@test.com" 120 120 - agent-browser find placeholder "Search" type "query" 121 121 - agent-browser find alt "Logo" click 122 122 - agent-browser find title "Close" click 123 123 - agent-browser find testid "submit-btn" click 124 124 - agent-browser find first ".item" click 125 125 - agent-browser find last ".item" click 126 126 - agent-browser find nth 2 "a" hover 127 127 - ``` 128 128 - 129 129 - ## Browser Settings 130 130 - 131 131 - ```bash 132 132 - agent-browser set viewport 1920 1080 # Set viewport size 133 133 - agent-browser set viewport 1920 1080 2 # 2x retina (same CSS size, higher res screenshots) 134 134 - agent-browser set device "iPhone 14" # Emulate device 135 135 - agent-browser set geo 37.7749 -122.4194 # Set geolocation (alias: geolocation) 136 136 - agent-browser set offline on # Toggle offline mode 137 137 - agent-browser set headers '{"X-Key":"v"}' # Extra HTTP headers 138 138 - agent-browser set credentials user pass # HTTP basic auth (alias: auth) 139 139 - agent-browser set media dark # Emulate color scheme 140 140 - agent-browser set media light reduced-motion # Light mode + reduced motion 141 141 - ``` 142 142 - 143 143 - ## Cookies and Storage 144 144 - 145 145 - ```bash 146 146 - agent-browser cookies # Get all cookies 147 147 - agent-browser cookies set name value # Set cookie 148 148 - agent-browser cookies clear # Clear cookies 149 149 - agent-browser storage local # Get all localStorage 150 150 - agent-browser storage local key # Get specific key 151 151 - agent-browser storage local set k v # Set value 152 152 - agent-browser storage local clear # Clear all 153 153 - ``` 154 154 - 155 155 - ## Network 156 156 - 157 157 - ```bash 158 158 - agent-browser network route <url> # Intercept requests 159 159 - agent-browser network route <url> --abort # Block requests 160 160 - agent-browser network route <url> --body '{}' # Mock response 161 161 - agent-browser network unroute [url] # Remove routes 162 162 - agent-browser network requests # View tracked requests 163 163 - agent-browser network requests --filter api # Filter requests 164 164 - ``` 165 165 - 166 166 - ## Tabs and Windows 167 167 - 168 168 - ```bash 169 169 - agent-browser tab # List tabs 170 170 - agent-browser tab new [url] # New tab 171 171 - agent-browser tab 2 # Switch to tab by index 172 172 - agent-browser tab close # Close current tab 173 173 - agent-browser tab close 2 # Close tab by index 174 174 - agent-browser window new # New window 175 175 - ``` 176 176 - 177 177 - ## Frames 178 178 - 179 179 - ```bash 180 180 - agent-browser frame "#iframe" # Switch to iframe by CSS selector 181 181 - agent-browser frame @e3 # Switch to iframe by element ref 182 182 - agent-browser frame main # Back to main frame 183 183 - ``` 184 184 - 185 185 - ### Iframe support 186 186 - 187 187 - Iframes are detected automatically during snapshots. When the main-frame snapshot runs, `Iframe` nodes are resolved and their content is inlined beneath the iframe element in the output (one level of nesting; iframes within iframes are not expanded). 188 188 - 189 189 - ```bash 190 190 - agent-browser snapshot -i 191 191 - # @e3 [Iframe] "payment-frame" 192 192 - # @e4 [input] "Card number" 193 193 - # @e5 [button] "Pay" 194 194 - 195 195 - # Interact directly — refs inside iframes already work 196 196 - agent-browser fill @e4 "4111111111111111" 197 197 - agent-browser click @e5 198 198 - 199 199 - # Or switch frame context for scoped snapshots 200 200 - agent-browser frame @e3 # Switch using element ref 201 201 - agent-browser snapshot -i # Snapshot scoped to that iframe 202 202 - agent-browser frame main # Return to main frame 203 203 - ``` 204 204 - 205 205 - The `frame` command accepts: 206 206 - 207 207 - - **Element refs** — `frame @e3` resolves the ref to an iframe element 208 208 - - **CSS selectors** — `frame "#payment-iframe"` finds the iframe by selector 209 209 - - **Frame name/URL** — matches against the browser's frame tree 210 210 - 211 211 - ## Dialogs 212 212 - 213 213 - By default, `alert` and `beforeunload` dialogs are automatically accepted so they never block the agent. `confirm` and `prompt` dialogs still require explicit handling. Use `--no-auto-dialog` to disable this behavior. 214 214 - 215 215 - ```bash 216 216 - agent-browser dialog accept [text] # Accept dialog 217 217 - agent-browser dialog dismiss # Dismiss dialog 218 218 - agent-browser dialog status # Check if a dialog is currently open 219 219 - ``` 220 220 - 221 221 - ## JavaScript 222 222 - 223 223 - ```bash 224 224 - agent-browser eval "document.title" # Simple expressions only 225 225 - agent-browser eval -b "<base64>" # Any JavaScript (base64 encoded) 226 226 - agent-browser eval --stdin # Read script from stdin 227 227 - ``` 228 228 - 229 229 - Use `-b`/`--base64` or `--stdin` for reliable execution. Shell escaping with nested quotes and special characters is error-prone. 230 230 - 231 231 - ```bash 232 232 - # Base64 encode your script, then: 233 233 - agent-browser eval -b "ZG9jdW1lbnQucXVlcnlTZWxlY3RvcignW3NyYyo9Il9uZXh0Il0nKQ==" 234 234 - 235 235 - # Or use stdin with heredoc for multiline scripts: 236 236 - cat <<'EOF' | agent-browser eval --stdin 237 237 - const links = document.querySelectorAll('a'); 238 238 - Array.from(links).map(a => a.href); 239 239 - EOF 240 240 - ``` 241 241 - 242 242 - ## State Management 243 243 - 244 244 - ```bash 245 245 - agent-browser state save auth.json # Save cookies, storage, auth state 246 246 - agent-browser state load auth.json # Restore saved state 247 247 - ``` 248 248 - 249 249 - ## Global Options 250 250 - 251 251 - ```bash 252 252 - agent-browser --session <name> ... # Isolated browser session 253 253 - agent-browser --json ... # JSON output for parsing 254 254 - agent-browser --headed ... # Show browser window (not headless) 255 255 - agent-browser --full ... # Full page screenshot (-f) 256 256 - agent-browser --cdp <port> ... # Connect via Chrome DevTools Protocol 257 257 - agent-browser -p <provider> ... # Cloud browser provider (--provider) 258 258 - agent-browser --proxy <url> ... # Use proxy server 259 259 - agent-browser --proxy-bypass <hosts> # Hosts to bypass proxy 260 260 - agent-browser --headers <json> ... # HTTP headers scoped to URL's origin 261 261 - agent-browser --executable-path <p> # Custom browser executable 262 262 - agent-browser --extension <path> ... # Load browser extension (repeatable) 263 263 - agent-browser --ignore-https-errors # Ignore SSL certificate errors 264 264 - agent-browser --help # Show help (-h) 265 265 - agent-browser --version # Show version (-V) 266 266 - agent-browser <command> --help # Show detailed help for a command 267 267 - ``` 268 268 - 269 269 - ## Debugging 270 270 - 271 271 - ```bash 272 272 - agent-browser --headed open example.com # Show browser window 273 273 - agent-browser --cdp 9222 snapshot # Connect via CDP port 274 274 - agent-browser connect 9222 # Alternative: connect command 275 275 - agent-browser console # View console messages 276 276 - agent-browser console --clear # Clear console 277 277 - agent-browser errors # View page errors 278 278 - agent-browser errors --clear # Clear errors 279 279 - agent-browser highlight @e1 # Highlight element 280 280 - agent-browser inspect # Open Chrome DevTools for this session 281 281 - agent-browser trace start # Start recording trace 282 282 - agent-browser trace stop trace.zip # Stop and save trace 283 283 - agent-browser profiler start # Start Chrome DevTools profiling 284 284 - agent-browser profiler stop trace.json # Stop and save profile 285 285 - ``` 286 286 - 287 287 - ## Environment Variables 288 288 - 289 289 - ```bash 290 290 - AGENT_BROWSER_SESSION="mysession" # Default session name 291 291 - AGENT_BROWSER_EXECUTABLE_PATH="/path/chrome" # Custom browser path 292 292 - AGENT_BROWSER_EXTENSIONS="/ext1,/ext2" # Comma-separated extension paths 293 293 - AGENT_BROWSER_PROVIDER="browserbase" # Cloud browser provider 294 294 - AGENT_BROWSER_STREAM_PORT="9223" # Override WebSocket streaming port (default: OS-assigned) 295 295 - AGENT_BROWSER_HOME="/path/to/agent-browser" # Custom install location 296 296 - ```

-120

.agents/skills/agent-browser/references/profiling.md

reviewed

··· 1 1 - # Profiling 2 2 - 3 3 - Capture Chrome DevTools performance profiles during browser automation for performance analysis. 4 4 - 5 5 - **Related**: [commands.md](commands.md) for full command reference, [SKILL.md](../SKILL.md) for quick start. 6 6 - 7 7 - ## Contents 8 8 - 9 9 - - [Basic Profiling](#basic-profiling) 10 10 - - [Profiler Commands](#profiler-commands) 11 11 - - [Categories](#categories) 12 12 - - [Use Cases](#use-cases) 13 13 - - [Output Format](#output-format) 14 14 - - [Viewing Profiles](#viewing-profiles) 15 15 - - [Limitations](#limitations) 16 16 - 17 17 - ## Basic Profiling 18 18 - 19 19 - ```bash 20 20 - # Start profiling 21 21 - agent-browser profiler start 22 22 - 23 23 - # Perform actions 24 24 - agent-browser navigate https://example.com 25 25 - agent-browser click "#button" 26 26 - agent-browser wait 1000 27 27 - 28 28 - # Stop and save 29 29 - agent-browser profiler stop ./trace.json 30 30 - ``` 31 31 - 32 32 - ## Profiler Commands 33 33 - 34 34 - ```bash 35 35 - # Start profiling with default categories 36 36 - agent-browser profiler start 37 37 - 38 38 - # Start with custom trace categories 39 39 - agent-browser profiler start --categories "devtools.timeline,v8.execute,blink.user_timing" 40 40 - 41 41 - # Stop profiling and save to file 42 42 - agent-browser profiler stop ./trace.json 43 43 - ``` 44 44 - 45 45 - ## Categories 46 46 - 47 47 - The `--categories` flag accepts a comma-separated list of Chrome trace categories. Default categories include: 48 48 - 49 49 - - `devtools.timeline` -- standard DevTools performance traces 50 50 - - `v8.execute` -- time spent running JavaScript 51 51 - - `blink` -- renderer events 52 52 - - `blink.user_timing` -- `performance.mark()` / `performance.measure()` calls 53 53 - - `latencyInfo` -- input-to-latency tracking 54 54 - - `renderer.scheduler` -- task scheduling and execution 55 55 - - `toplevel` -- broad-spectrum basic events 56 56 - 57 57 - Several `disabled-by-default-*` categories are also included for detailed timeline, call stack, and V8 CPU profiling data. 58 58 - 59 59 - ## Use Cases 60 60 - 61 61 - ### Diagnosing Slow Page Loads 62 62 - 63 63 - ```bash 64 64 - agent-browser profiler start 65 65 - agent-browser navigate https://app.example.com 66 66 - agent-browser wait --load networkidle 67 67 - agent-browser profiler stop ./page-load-profile.json 68 68 - ``` 69 69 - 70 70 - ### Profiling User Interactions 71 71 - 72 72 - ```bash 73 73 - agent-browser navigate https://app.example.com 74 74 - agent-browser profiler start 75 75 - agent-browser click "#submit" 76 76 - agent-browser wait 2000 77 77 - agent-browser profiler stop ./interaction-profile.json 78 78 - ``` 79 79 - 80 80 - ### CI Performance Regression Checks 81 81 - 82 82 - ```bash 83 83 - #!/bin/bash 84 84 - agent-browser profiler start 85 85 - agent-browser navigate https://app.example.com 86 86 - agent-browser wait --load networkidle 87 87 - agent-browser profiler stop "./profiles/build-${BUILD_ID}.json" 88 88 - ``` 89 89 - 90 90 - ## Output Format 91 91 - 92 92 - The output is a JSON file in Chrome Trace Event format: 93 93 - 94 94 - ```json 95 95 - { 96 96 - "traceEvents": [ 97 97 - { "cat": "devtools.timeline", "name": "RunTask", "ph": "X", "ts": 12345, "dur": 100, ... }, 98 98 - ... 99 99 - ], 100 100 - "metadata": { 101 101 - "clock-domain": "LINUX_CLOCK_MONOTONIC" 102 102 - } 103 103 - } 104 104 - ``` 105 105 - 106 106 - The `metadata.clock-domain` field is set based on the host platform (Linux or macOS). On Windows it is omitted. 107 107 - 108 108 - ## Viewing Profiles 109 109 - 110 110 - Load the output JSON file in any of these tools: 111 111 - 112 112 - - **Chrome DevTools**: Performance panel > Load profile (Ctrl+Shift+I > Performance) 113 113 - - **Perfetto UI**: https://ui.perfetto.dev/ -- drag and drop the JSON file 114 114 - - **Trace Viewer**: `chrome://tracing` in any Chromium browser 115 115 - 116 116 - ## Limitations 117 117 - 118 118 - - Only works with Chromium-based browsers (Chrome, Edge). Not supported on Firefox or WebKit. 119 119 - - Trace data accumulates in memory while profiling is active (capped at 5 million events). Stop profiling promptly after the area of interest. 120 120 - - Data collection on stop has a 30-second timeout. If the browser is unresponsive, the stop command may fail.

-194

.agents/skills/agent-browser/references/proxy-support.md

reviewed

··· 1 1 - # Proxy Support 2 2 - 3 3 - Proxy configuration for geo-testing, rate limiting avoidance, and corporate environments. 4 4 - 5 5 - **Related**: [commands.md](commands.md) for global options, [SKILL.md](../SKILL.md) for quick start. 6 6 - 7 7 - ## Contents 8 8 - 9 9 - - [Basic Proxy Configuration](#basic-proxy-configuration) 10 10 - - [Authenticated Proxy](#authenticated-proxy) 11 11 - - [SOCKS Proxy](#socks-proxy) 12 12 - - [Proxy Bypass](#proxy-bypass) 13 13 - - [Common Use Cases](#common-use-cases) 14 14 - - [Verifying Proxy Connection](#verifying-proxy-connection) 15 15 - - [Troubleshooting](#troubleshooting) 16 16 - - [Best Practices](#best-practices) 17 17 - 18 18 - ## Basic Proxy Configuration 19 19 - 20 20 - Use the `--proxy` flag or set proxy via environment variable: 21 21 - 22 22 - ```bash 23 23 - # Via CLI flag 24 24 - agent-browser --proxy "http://proxy.example.com:8080" open https://example.com 25 25 - 26 26 - # Via environment variable 27 27 - export HTTP_PROXY="http://proxy.example.com:8080" 28 28 - agent-browser open https://example.com 29 29 - 30 30 - # HTTPS proxy 31 31 - export HTTPS_PROXY="https://proxy.example.com:8080" 32 32 - agent-browser open https://example.com 33 33 - 34 34 - # Both 35 35 - export HTTP_PROXY="http://proxy.example.com:8080" 36 36 - export HTTPS_PROXY="http://proxy.example.com:8080" 37 37 - agent-browser open https://example.com 38 38 - ``` 39 39 - 40 40 - ## Authenticated Proxy 41 41 - 42 42 - For proxies requiring authentication: 43 43 - 44 44 - ```bash 45 45 - # Include credentials in URL 46 46 - export HTTP_PROXY="http://username:password@proxy.example.com:8080" 47 47 - agent-browser open https://example.com 48 48 - ``` 49 49 - 50 50 - ## SOCKS Proxy 51 51 - 52 52 - ```bash 53 53 - # SOCKS5 proxy 54 54 - export ALL_PROXY="socks5://proxy.example.com:1080" 55 55 - agent-browser open https://example.com 56 56 - 57 57 - # SOCKS5 with auth 58 58 - export ALL_PROXY="socks5://user:pass@proxy.example.com:1080" 59 59 - agent-browser open https://example.com 60 60 - ``` 61 61 - 62 62 - ## Proxy Bypass 63 63 - 64 64 - Skip proxy for specific domains using `--proxy-bypass` or `NO_PROXY`: 65 65 - 66 66 - ```bash 67 67 - # Via CLI flag 68 68 - agent-browser --proxy "http://proxy.example.com:8080" --proxy-bypass "localhost,*.internal.com" open https://example.com 69 69 - 70 70 - # Via environment variable 71 71 - export NO_PROXY="localhost,127.0.0.1,.internal.company.com" 72 72 - agent-browser open https://internal.company.com # Direct connection 73 73 - agent-browser open https://external.com # Via proxy 74 74 - ``` 75 75 - 76 76 - ## Common Use Cases 77 77 - 78 78 - ### Geo-Location Testing 79 79 - 80 80 - ```bash 81 81 - #!/bin/bash 82 82 - # Test site from different regions using geo-located proxies 83 83 - 84 84 - PROXIES=( 85 85 - "http://us-proxy.example.com:8080" 86 86 - "http://eu-proxy.example.com:8080" 87 87 - "http://asia-proxy.example.com:8080" 88 88 - ) 89 89 - 90 90 - for proxy in "${PROXIES[@]}"; do 91 91 - export HTTP_PROXY="$proxy" 92 92 - export HTTPS_PROXY="$proxy" 93 93 - 94 94 - region=$(echo "$proxy" | grep -oP '^\w+-\w+') 95 95 - echo "Testing from: $region" 96 96 - 97 97 - agent-browser --session "$region" open https://example.com 98 98 - agent-browser --session "$region" screenshot "./screenshots/$region.png" 99 99 - agent-browser --session "$region" close 100 100 - done 101 101 - ``` 102 102 - 103 103 - ### Rotating Proxies for Scraping 104 104 - 105 105 - ```bash 106 106 - #!/bin/bash 107 107 - # Rotate through proxy list to avoid rate limiting 108 108 - 109 109 - PROXY_LIST=( 110 110 - "http://proxy1.example.com:8080" 111 111 - "http://proxy2.example.com:8080" 112 112 - "http://proxy3.example.com:8080" 113 113 - ) 114 114 - 115 115 - URLS=( 116 116 - "https://site.com/page1" 117 117 - "https://site.com/page2" 118 118 - "https://site.com/page3" 119 119 - ) 120 120 - 121 121 - for i in "${!URLS[@]}"; do 122 122 - proxy_index=$((i % ${#PROXY_LIST[@]})) 123 123 - export HTTP_PROXY="${PROXY_LIST[$proxy_index]}" 124 124 - export HTTPS_PROXY="${PROXY_LIST[$proxy_index]}" 125 125 - 126 126 - agent-browser open "${URLS[$i]}" 127 127 - agent-browser get text body > "output-$i.txt" 128 128 - agent-browser close 129 129 - 130 130 - sleep 1 # Polite delay 131 131 - done 132 132 - ``` 133 133 - 134 134 - ### Corporate Network Access 135 135 - 136 136 - ```bash 137 137 - #!/bin/bash 138 138 - # Access internal sites via corporate proxy 139 139 - 140 140 - export HTTP_PROXY="http://corpproxy.company.com:8080" 141 141 - export HTTPS_PROXY="http://corpproxy.company.com:8080" 142 142 - export NO_PROXY="localhost,127.0.0.1,.company.com" 143 143 - 144 144 - # External sites go through proxy 145 145 - agent-browser open https://external-vendor.com 146 146 - 147 147 - # Internal sites bypass proxy 148 148 - agent-browser open https://intranet.company.com 149 149 - ``` 150 150 - 151 151 - ## Verifying Proxy Connection 152 152 - 153 153 - ```bash 154 154 - # Check your apparent IP 155 155 - agent-browser open https://httpbin.org/ip 156 156 - agent-browser get text body 157 157 - # Should show proxy's IP, not your real IP 158 158 - ``` 159 159 - 160 160 - ## Troubleshooting 161 161 - 162 162 - ### Proxy Connection Failed 163 163 - 164 164 - ```bash 165 165 - # Test proxy connectivity first 166 166 - curl -x http://proxy.example.com:8080 https://httpbin.org/ip 167 167 - 168 168 - # Check if proxy requires auth 169 169 - export HTTP_PROXY="http://user:pass@proxy.example.com:8080" 170 170 - ``` 171 171 - 172 172 - ### SSL/TLS Errors Through Proxy 173 173 - 174 174 - Some proxies perform SSL inspection. If you encounter certificate errors: 175 175 - 176 176 - ```bash 177 177 - # For testing only - not recommended for production 178 178 - agent-browser open https://example.com --ignore-https-errors 179 179 - ``` 180 180 - 181 181 - ### Slow Performance 182 182 - 183 183 - ```bash 184 184 - # Use proxy only when necessary 185 185 - export NO_PROXY="*.cdn.com,*.static.com" # Direct CDN access 186 186 - ``` 187 187 - 188 188 - ## Best Practices 189 189 - 190 190 - 1. **Use environment variables** - Don't hardcode proxy credentials 191 191 - 2. **Set NO_PROXY appropriately** - Avoid routing local traffic through proxy 192 192 - 3. **Test proxy before automation** - Verify connectivity with simple requests 193 193 - 4. **Handle proxy failures gracefully** - Implement retry logic for unstable proxies 194 194 - 5. **Rotate proxies for large scraping jobs** - Distribute load and avoid bans

-194

.agents/skills/agent-browser/references/session-management.md

reviewed

··· 1 1 - # Session Management 2 2 - 3 3 - Multiple isolated browser sessions with state persistence and concurrent browsing. 4 4 - 5 5 - **Related**: [authentication.md](authentication.md) for login patterns, [SKILL.md](../SKILL.md) for quick start. 6 6 - 7 7 - ## Contents 8 8 - 9 9 - - [Named Sessions](#named-sessions) 10 10 - - [Session Isolation Properties](#session-isolation-properties) 11 11 - - [Session State Persistence](#session-state-persistence) 12 12 - - [Common Patterns](#common-patterns) 13 13 - - [Default Session](#default-session) 14 14 - - [Session Cleanup](#session-cleanup) 15 15 - - [Best Practices](#best-practices) 16 16 - 17 17 - ## Named Sessions 18 18 - 19 19 - Use `--session` flag to isolate browser contexts: 20 20 - 21 21 - ```bash 22 22 - # Session 1: Authentication flow 23 23 - agent-browser --session auth open https://app.example.com/login 24 24 - 25 25 - # Session 2: Public browsing (separate cookies, storage) 26 26 - agent-browser --session public open https://example.com 27 27 - 28 28 - # Commands are isolated by session 29 29 - agent-browser --session auth fill @e1 "user@example.com" 30 30 - agent-browser --session public get text body 31 31 - ``` 32 32 - 33 33 - ## Session Isolation Properties 34 34 - 35 35 - Each session has independent: 36 36 - 37 37 - - Cookies 38 38 - - LocalStorage / SessionStorage 39 39 - - IndexedDB 40 40 - - Cache 41 41 - - Browsing history 42 42 - - Open tabs 43 43 - 44 44 - ## Session State Persistence 45 45 - 46 46 - ### Save Session State 47 47 - 48 48 - ```bash 49 49 - # Save cookies, storage, and auth state 50 50 - agent-browser state save /path/to/auth-state.json 51 51 - ``` 52 52 - 53 53 - ### Load Session State 54 54 - 55 55 - ```bash 56 56 - # Restore saved state 57 57 - agent-browser state load /path/to/auth-state.json 58 58 - 59 59 - # Continue with authenticated session 60 60 - agent-browser open https://app.example.com/dashboard 61 61 - ``` 62 62 - 63 63 - ### State File Contents 64 64 - 65 65 - ```json 66 66 - { 67 67 - "cookies": [...], 68 68 - "localStorage": {...}, 69 69 - "sessionStorage": {...}, 70 70 - "origins": [...] 71 71 - } 72 72 - ``` 73 73 - 74 74 - ## Common Patterns 75 75 - 76 76 - ### Authenticated Session Reuse 77 77 - 78 78 - ```bash 79 79 - #!/bin/bash 80 80 - # Save login state once, reuse many times 81 81 - 82 82 - STATE_FILE="/tmp/auth-state.json" 83 83 - 84 84 - # Check if we have saved state 85 85 - if [[ -f "$STATE_FILE" ]]; then 86 86 - agent-browser state load "$STATE_FILE" 87 87 - agent-browser open https://app.example.com/dashboard 88 88 - else 89 89 - # Perform login 90 90 - agent-browser open https://app.example.com/login 91 91 - agent-browser snapshot -i 92 92 - agent-browser fill @e1 "$USERNAME" 93 93 - agent-browser fill @e2 "$PASSWORD" 94 94 - agent-browser click @e3 95 95 - agent-browser wait --load networkidle 96 96 - 97 97 - # Save for future use 98 98 - agent-browser state save "$STATE_FILE" 99 99 - fi 100 100 - ``` 101 101 - 102 102 - ### Concurrent Scraping 103 103 - 104 104 - ```bash 105 105 - #!/bin/bash 106 106 - # Scrape multiple sites concurrently 107 107 - 108 108 - # Start all sessions 109 109 - agent-browser --session site1 open https://site1.com & 110 110 - agent-browser --session site2 open https://site2.com & 111 111 - agent-browser --session site3 open https://site3.com & 112 112 - wait 113 113 - 114 114 - # Extract from each 115 115 - agent-browser --session site1 get text body > site1.txt 116 116 - agent-browser --session site2 get text body > site2.txt 117 117 - agent-browser --session site3 get text body > site3.txt 118 118 - 119 119 - # Cleanup 120 120 - agent-browser --session site1 close 121 121 - agent-browser --session site2 close 122 122 - agent-browser --session site3 close 123 123 - ``` 124 124 - 125 125 - ### A/B Testing Sessions 126 126 - 127 127 - ```bash 128 128 - # Test different user experiences 129 129 - agent-browser --session variant-a open "https://app.com?variant=a" 130 130 - agent-browser --session variant-b open "https://app.com?variant=b" 131 131 - 132 132 - # Compare 133 133 - agent-browser --session variant-a screenshot /tmp/variant-a.png 134 134 - agent-browser --session variant-b screenshot /tmp/variant-b.png 135 135 - ``` 136 136 - 137 137 - ## Default Session 138 138 - 139 139 - When `--session` is omitted, commands use the default session: 140 140 - 141 141 - ```bash 142 142 - # These use the same default session 143 143 - agent-browser open https://example.com 144 144 - agent-browser snapshot -i 145 145 - agent-browser close # Closes default session 146 146 - ``` 147 147 - 148 148 - ## Session Cleanup 149 149 - 150 150 - ```bash 151 151 - # Close specific session 152 152 - agent-browser --session auth close 153 153 - 154 154 - # List active sessions 155 155 - agent-browser session list 156 156 - ``` 157 157 - 158 158 - ## Best Practices 159 159 - 160 160 - ### 1. Name Sessions Semantically 161 161 - 162 162 - ```bash 163 163 - # GOOD: Clear purpose 164 164 - agent-browser --session github-auth open https://github.com 165 165 - agent-browser --session docs-scrape open https://docs.example.com 166 166 - 167 167 - # AVOID: Generic names 168 168 - agent-browser --session s1 open https://github.com 169 169 - ``` 170 170 - 171 171 - ### 2. Always Clean Up 172 172 - 173 173 - ```bash 174 174 - # Close sessions when done 175 175 - agent-browser --session auth close 176 176 - agent-browser --session scrape close 177 177 - ``` 178 178 - 179 179 - ### 3. Handle State Files Securely 180 180 - 181 181 - ```bash 182 182 - # Don't commit state files (contain auth tokens!) 183 183 - echo "*.auth-state.json" >> .gitignore 184 184 - 185 185 - # Delete after use 186 186 - rm /tmp/auth-state.json 187 187 - ``` 188 188 - 189 189 - ### 4. Timeout Long Sessions 190 190 - 191 191 - ```bash 192 192 - # Set timeout for automated scripts 193 193 - timeout 60 agent-browser --session long-task get text body 194 194 - ```

-222

.agents/skills/agent-browser/references/snapshot-refs.md

reviewed

··· 1 1 - # Snapshot and Refs 2 2 - 3 3 - Compact element references that reduce context usage dramatically for AI agents. 4 4 - 5 5 - **Related**: [commands.md](commands.md) for full command reference, [SKILL.md](../SKILL.md) for quick start. 6 6 - 7 7 - ## Contents 8 8 - 9 9 - - [How Refs Work](#how-refs-work) 10 10 - - [Snapshot Command](#the-snapshot-command) 11 11 - - [Using Refs](#using-refs) 12 12 - - [Ref Lifecycle](#ref-lifecycle) 13 13 - - [Best Practices](#best-practices) 14 14 - - [Ref Notation Details](#ref-notation-details) 15 15 - - [Troubleshooting](#troubleshooting) 16 16 - 17 17 - ## How Refs Work 18 18 - 19 19 - Traditional approach: 20 20 - 21 21 - ``` 22 22 - Full DOM/HTML → AI parses → CSS selector → Action (~3000-5000 tokens) 23 23 - ``` 24 24 - 25 25 - agent-browser approach: 26 26 - 27 27 - ``` 28 28 - Compact snapshot → @refs assigned → Direct interaction (~200-400 tokens) 29 29 - ``` 30 30 - 31 31 - ## The Snapshot Command 32 32 - 33 33 - ```bash 34 34 - # Basic snapshot (shows page structure) 35 35 - agent-browser snapshot 36 36 - 37 37 - # Interactive snapshot (-i flag) - RECOMMENDED 38 38 - agent-browser snapshot -i 39 39 - ``` 40 40 - 41 41 - ### Snapshot Output Format 42 42 - 43 43 - ``` 44 44 - Page: Example Site - Home 45 45 - URL: https://example.com 46 46 - 47 47 - @e1 [header] 48 48 - @e2 [nav] 49 49 - @e3 [a] "Home" 50 50 - @e4 [a] "Products" 51 51 - @e5 [a] "About" 52 52 - @e6 [button] "Sign In" 53 53 - 54 54 - @e7 [main] 55 55 - @e8 [h1] "Welcome" 56 56 - @e9 [form] 57 57 - @e10 [input type="email"] placeholder="Email" 58 58 - @e11 [input type="password"] placeholder="Password" 59 59 - @e12 [button type="submit"] "Log In" 60 60 - 61 61 - @e13 [footer] 62 62 - @e14 [a] "Privacy Policy" 63 63 - ``` 64 64 - 65 65 - ## Using Refs 66 66 - 67 67 - Once you have refs, interact directly: 68 68 - 69 69 - ```bash 70 70 - # Click the "Sign In" button 71 71 - agent-browser click @e6 72 72 - 73 73 - # Fill email input 74 74 - agent-browser fill @e10 "user@example.com" 75 75 - 76 76 - # Fill password 77 77 - agent-browser fill @e11 "password123" 78 78 - 79 79 - # Submit the form 80 80 - agent-browser click @e12 81 81 - ``` 82 82 - 83 83 - ## Ref Lifecycle 84 84 - 85 85 - **IMPORTANT**: Refs are invalidated when the page changes! 86 86 - 87 87 - ```bash 88 88 - # Get initial snapshot 89 89 - agent-browser snapshot -i 90 90 - # @e1 [button] "Next" 91 91 - 92 92 - # Click triggers page change 93 93 - agent-browser click @e1 94 94 - 95 95 - # MUST re-snapshot to get new refs! 96 96 - agent-browser snapshot -i 97 97 - # @e1 [h1] "Page 2" ← Different element now! 98 98 - ``` 99 99 - 100 100 - ## Best Practices 101 101 - 102 102 - ### 1. Always Snapshot Before Interacting 103 103 - 104 104 - ```bash 105 105 - # CORRECT 106 106 - agent-browser open https://example.com 107 107 - agent-browser snapshot -i # Get refs first 108 108 - agent-browser click @e1 # Use ref 109 109 - 110 110 - # WRONG 111 111 - agent-browser open https://example.com 112 112 - agent-browser click @e1 # Ref doesn't exist yet! 113 113 - ``` 114 114 - 115 115 - ### 2. Re-Snapshot After Navigation 116 116 - 117 117 - ```bash 118 118 - agent-browser click @e5 # Navigates to new page 119 119 - agent-browser snapshot -i # Get new refs 120 120 - agent-browser click @e1 # Use new refs 121 121 - ``` 122 122 - 123 123 - ### 3. Re-Snapshot After Dynamic Changes 124 124 - 125 125 - ```bash 126 126 - agent-browser click @e1 # Opens dropdown 127 127 - agent-browser snapshot -i # See dropdown items 128 128 - agent-browser click @e7 # Select item 129 129 - ``` 130 130 - 131 131 - ### 4. Snapshot Specific Regions 132 132 - 133 133 - For complex pages, snapshot specific areas: 134 134 - 135 135 - ```bash 136 136 - # Snapshot just the form 137 137 - agent-browser snapshot @e9 138 138 - ``` 139 139 - 140 140 - ## Ref Notation Details 141 141 - 142 142 - ``` 143 143 - @e1 [tag type="value"] "text content" placeholder="hint" 144 144 - │ │ │ │ │ 145 145 - │ │ │ │ └─ Additional attributes 146 146 - │ │ │ └─ Visible text 147 147 - │ │ └─ Key attributes shown 148 148 - │ └─ HTML tag name 149 149 - └─ Unique ref ID 150 150 - ``` 151 151 - 152 152 - ### Common Patterns 153 153 - 154 154 - ``` 155 155 - @e1 [button] "Submit" # Button with text 156 156 - @e2 [input type="email"] # Email input 157 157 - @e3 [input type="password"] # Password input 158 158 - @e4 [a href="/page"] "Link Text" # Anchor link 159 159 - @e5 [select] # Dropdown 160 160 - @e6 [textarea] placeholder="Message" # Text area 161 161 - @e7 [div class="modal"] # Container (when relevant) 162 162 - @e8 [img alt="Logo"] # Image 163 163 - @e9 [checkbox] checked # Checked checkbox 164 164 - @e10 [radio] selected # Selected radio 165 165 - ``` 166 166 - 167 167 - ## Iframes 168 168 - 169 169 - Snapshots automatically detect and inline iframe content. When the main-frame snapshot runs, each `Iframe` node is resolved and its child accessibility tree is included directly beneath it in the output. Refs assigned to elements inside iframes carry frame context, so interactions like `click`, `fill`, and `type` work without manually switching frames. 170 170 - 171 171 - ```bash 172 172 - agent-browser snapshot -i 173 173 - # @e1 [heading] "Checkout" 174 174 - # @e2 [Iframe] "payment-frame" 175 175 - # @e3 [input] "Card number" 176 176 - # @e4 [input] "Expiry" 177 177 - # @e5 [button] "Pay" 178 178 - # @e6 [button] "Cancel" 179 179 - 180 180 - # Interact with iframe elements directly using their refs 181 181 - agent-browser fill @e3 "4111111111111111" 182 182 - agent-browser fill @e4 "12/28" 183 183 - agent-browser click @e5 184 184 - ``` 185 185 - 186 186 - **Key details:** 187 187 - 188 188 - - Only one level of iframe nesting is expanded (iframes within iframes are not recursed) 189 189 - - Cross-origin iframes that block accessibility tree access are silently skipped 190 190 - - Empty iframes or iframes with no interactive content are omitted from the output 191 191 - - To scope a snapshot to a single iframe, use `frame @ref` then `snapshot -i` 192 192 - 193 193 - ## Troubleshooting 194 194 - 195 195 - ### "Ref not found" Error 196 196 - 197 197 - ```bash 198 198 - # Ref may have changed - re-snapshot 199 199 - agent-browser snapshot -i 200 200 - ``` 201 201 - 202 202 - ### Element Not Visible in Snapshot 203 203 - 204 204 - ```bash 205 205 - # Scroll down to reveal element 206 206 - agent-browser scroll down 1000 207 207 - agent-browser snapshot -i 208 208 - 209 209 - # Or wait for dynamic content 210 210 - agent-browser wait 1000 211 211 - agent-browser snapshot -i 212 212 - ``` 213 213 - 214 214 - ### Too Many Elements 215 215 - 216 216 - ```bash 217 217 - # Snapshot specific container 218 218 - agent-browser snapshot @e5 219 219 - 220 220 - # Or use get text for content-only extraction 221 221 - agent-browser get text @e5 222 222 - ```

-173

.agents/skills/agent-browser/references/video-recording.md

reviewed

··· 1 1 - # Video Recording 2 2 - 3 3 - Capture browser automation as video for debugging, documentation, or verification. 4 4 - 5 5 - **Related**: [commands.md](commands.md) for full command reference, [SKILL.md](../SKILL.md) for quick start. 6 6 - 7 7 - ## Contents 8 8 - 9 9 - - [Basic Recording](#basic-recording) 10 10 - - [Recording Commands](#recording-commands) 11 11 - - [Use Cases](#use-cases) 12 12 - - [Best Practices](#best-practices) 13 13 - - [Output Format](#output-format) 14 14 - - [Limitations](#limitations) 15 15 - 16 16 - ## Basic Recording 17 17 - 18 18 - ```bash 19 19 - # Start recording 20 20 - agent-browser record start ./demo.webm 21 21 - 22 22 - # Perform actions 23 23 - agent-browser open https://example.com 24 24 - agent-browser snapshot -i 25 25 - agent-browser click @e1 26 26 - agent-browser fill @e2 "test input" 27 27 - 28 28 - # Stop and save 29 29 - agent-browser record stop 30 30 - ``` 31 31 - 32 32 - ## Recording Commands 33 33 - 34 34 - ```bash 35 35 - # Start recording to file 36 36 - agent-browser record start ./output.webm 37 37 - 38 38 - # Stop current recording 39 39 - agent-browser record stop 40 40 - 41 41 - # Restart with new file (stops current + starts new) 42 42 - agent-browser record restart ./take2.webm 43 43 - ``` 44 44 - 45 45 - ## Use Cases 46 46 - 47 47 - ### Debugging Failed Automation 48 48 - 49 49 - ```bash 50 50 - #!/bin/bash 51 51 - # Record automation for debugging 52 52 - 53 53 - agent-browser record start ./debug-$(date +%Y%m%d-%H%M%S).webm 54 54 - 55 55 - # Run your automation 56 56 - agent-browser open https://app.example.com 57 57 - agent-browser snapshot -i 58 58 - agent-browser click @e1 || { 59 59 - echo "Click failed - check recording" 60 60 - agent-browser record stop 61 61 - exit 1 62 62 - } 63 63 - 64 64 - agent-browser record stop 65 65 - ``` 66 66 - 67 67 - ### Documentation Generation 68 68 - 69 69 - ```bash 70 70 - #!/bin/bash 71 71 - # Record workflow for documentation 72 72 - 73 73 - agent-browser record start ./docs/how-to-login.webm 74 74 - 75 75 - agent-browser open https://app.example.com/login 76 76 - agent-browser wait 1000 # Pause for visibility 77 77 - 78 78 - agent-browser snapshot -i 79 79 - agent-browser fill @e1 "demo@example.com" 80 80 - agent-browser wait 500 81 81 - 82 82 - agent-browser fill @e2 "password" 83 83 - agent-browser wait 500 84 84 - 85 85 - agent-browser click @e3 86 86 - agent-browser wait --load networkidle 87 87 - agent-browser wait 1000 # Show result 88 88 - 89 89 - agent-browser record stop 90 90 - ``` 91 91 - 92 92 - ### CI/CD Test Evidence 93 93 - 94 94 - ```bash 95 95 - #!/bin/bash 96 96 - # Record E2E test runs for CI artifacts 97 97 - 98 98 - TEST_NAME="${1:-e2e-test}" 99 99 - RECORDING_DIR="./test-recordings" 100 100 - mkdir -p "$RECORDING_DIR" 101 101 - 102 102 - agent-browser record start "$RECORDING_DIR/$TEST_NAME-$(date +%s).webm" 103 103 - 104 104 - # Run test 105 105 - if run_e2e_test; then 106 106 - echo "Test passed" 107 107 - else 108 108 - echo "Test failed - recording saved" 109 109 - fi 110 110 - 111 111 - agent-browser record stop 112 112 - ``` 113 113 - 114 114 - ## Best Practices 115 115 - 116 116 - ### 1. Add Pauses for Clarity 117 117 - 118 118 - ```bash 119 119 - # Slow down for human viewing 120 120 - agent-browser click @e1 121 121 - agent-browser wait 500 # Let viewer see result 122 122 - ``` 123 123 - 124 124 - ### 2. Use Descriptive Filenames 125 125 - 126 126 - ```bash 127 127 - # Include context in filename 128 128 - agent-browser record start ./recordings/login-flow-2024-01-15.webm 129 129 - agent-browser record start ./recordings/checkout-test-run-42.webm 130 130 - ``` 131 131 - 132 132 - ### 3. Handle Recording in Error Cases 133 133 - 134 134 - ```bash 135 135 - #!/bin/bash 136 136 - set -e 137 137 - 138 138 - cleanup() { 139 139 - agent-browser record stop 2>/dev/null || true 140 140 - agent-browser close 2>/dev/null || true 141 141 - } 142 142 - trap cleanup EXIT 143 143 - 144 144 - agent-browser record start ./automation.webm 145 145 - # ... automation steps ... 146 146 - ``` 147 147 - 148 148 - ### 4. Combine with Screenshots 149 149 - 150 150 - ```bash 151 151 - # Record video AND capture key frames 152 152 - agent-browser record start ./flow.webm 153 153 - 154 154 - agent-browser open https://example.com 155 155 - agent-browser screenshot ./screenshots/step1-homepage.png 156 156 - 157 157 - agent-browser click @e1 158 158 - agent-browser screenshot ./screenshots/step2-after-click.png 159 159 - 160 160 - agent-browser record stop 161 161 - ``` 162 162 - 163 163 - ## Output Format 164 164 - 165 165 - - Default format: WebM (VP8/VP9 codec) 166 166 - - Compatible with all modern browsers and video players 167 167 - - Compressed but high quality 168 168 - 169 169 - ## Limitations 170 170 - 171 171 - - Recording adds slight overhead to automation 172 172 - - Large recordings can consume significant disk space 173 173 - - Some headless environments may have codec limitations

-105

.agents/skills/agent-browser/templates/authenticated-session.sh

reviewed

··· 1 1 - #!/bin/bash 2 2 - # Template: Authenticated Session Workflow 3 3 - # Purpose: Login once, save state, reuse for subsequent runs 4 4 - # Usage: ./authenticated-session.sh <login-url> [state-file] 5 5 - # 6 6 - # RECOMMENDED: Use the auth vault instead of this template: 7 7 - # echo "<pass>" | agent-browser auth save myapp --url <login-url> --username <user> --password-stdin 8 8 - # agent-browser auth login myapp 9 9 - # The auth vault stores credentials securely and the LLM never sees passwords. 10 10 - # 11 11 - # Environment variables: 12 12 - # APP_USERNAME - Login username/email 13 13 - # APP_PASSWORD - Login password 14 14 - # 15 15 - # Two modes: 16 16 - # 1. Discovery mode (default): Shows form structure so you can identify refs 17 17 - # 2. Login mode: Performs actual login after you update the refs 18 18 - # 19 19 - # Setup steps: 20 20 - # 1. Run once to see form structure (discovery mode) 21 21 - # 2. Update refs in LOGIN FLOW section below 22 22 - # 3. Set APP_USERNAME and APP_PASSWORD 23 23 - # 4. Delete the DISCOVERY section 24 24 - 25 25 - set -euo pipefail 26 26 - 27 27 - LOGIN_URL="${1:?Usage: $0 <login-url> [state-file]}" 28 28 - STATE_FILE="${2:-./auth-state.json}" 29 29 - 30 30 - echo "Authentication workflow: $LOGIN_URL" 31 31 - 32 32 - # ================================================================ 33 33 - # SAVED STATE: Skip login if valid saved state exists 34 34 - # ================================================================ 35 35 - if [[ -f "$STATE_FILE" ]]; then 36 36 - echo "Loading saved state from $STATE_FILE..." 37 37 - if agent-browser --state "$STATE_FILE" open "$LOGIN_URL" 2>/dev/null; then 38 38 - agent-browser wait --load networkidle 39 39 - 40 40 - CURRENT_URL=$(agent-browser get url) 41 41 - if [[ "$CURRENT_URL" != *"login"* ]] && [[ "$CURRENT_URL" != *"signin"* ]]; then 42 42 - echo "Session restored successfully" 43 43 - agent-browser snapshot -i 44 44 - exit 0 45 45 - fi 46 46 - echo "Session expired, performing fresh login..." 47 47 - agent-browser close 2>/dev/null || true 48 48 - else 49 49 - echo "Failed to load state, re-authenticating..." 50 50 - fi 51 51 - rm -f "$STATE_FILE" 52 52 - fi 53 53 - 54 54 - # ================================================================ 55 55 - # DISCOVERY MODE: Shows form structure (delete after setup) 56 56 - # ================================================================ 57 57 - echo "Opening login page..." 58 58 - agent-browser open "$LOGIN_URL" 59 59 - agent-browser wait --load networkidle 60 60 - 61 61 - echo "" 62 62 - echo "Login form structure:" 63 63 - echo "---" 64 64 - agent-browser snapshot -i 65 65 - echo "---" 66 66 - echo "" 67 67 - echo "Next steps:" 68 68 - echo " 1. Note the refs: username=@e?, password=@e?, submit=@e?" 69 69 - echo " 2. Update the LOGIN FLOW section below with your refs" 70 70 - echo " 3. Set: export APP_USERNAME='...' APP_PASSWORD='...'" 71 71 - echo " 4. Delete this DISCOVERY MODE section" 72 72 - echo "" 73 73 - agent-browser close 74 74 - exit 0 75 75 - 76 76 - # ================================================================ 77 77 - # LOGIN FLOW: Uncomment and customize after discovery 78 78 - # ================================================================ 79 79 - # : "${APP_USERNAME:?Set APP_USERNAME environment variable}" 80 80 - # : "${APP_PASSWORD:?Set APP_PASSWORD environment variable}" 81 81 - # 82 82 - # agent-browser open "$LOGIN_URL" 83 83 - # agent-browser wait --load networkidle 84 84 - # agent-browser snapshot -i 85 85 - # 86 86 - # # Fill credentials (update refs to match your form) 87 87 - # agent-browser fill @e1 "$APP_USERNAME" 88 88 - # agent-browser fill @e2 "$APP_PASSWORD" 89 89 - # agent-browser click @e3 90 90 - # agent-browser wait --load networkidle 91 91 - # 92 92 - # # Verify login succeeded 93 93 - # FINAL_URL=$(agent-browser get url) 94 94 - # if [[ "$FINAL_URL" == *"login"* ]] || [[ "$FINAL_URL" == *"signin"* ]]; then 95 95 - # echo "Login failed - still on login page" 96 96 - # agent-browser screenshot /tmp/login-failed.png 97 97 - # agent-browser close 98 98 - # exit 1 99 99 - # fi 100 100 - # 101 101 - # # Save state for future runs 102 102 - # echo "Saving state to $STATE_FILE" 103 103 - # agent-browser state save "$STATE_FILE" 104 104 - # echo "Login successful" 105 105 - # agent-browser snapshot -i

-69

.agents/skills/agent-browser/templates/capture-workflow.sh

reviewed

··· 1 1 - #!/bin/bash 2 2 - # Template: Content Capture Workflow 3 3 - # Purpose: Extract content from web pages (text, screenshots, PDF) 4 4 - # Usage: ./capture-workflow.sh <url> [output-dir] 5 5 - # 6 6 - # Outputs: 7 7 - # - page-full.png: Full page screenshot 8 8 - # - page-structure.txt: Page element structure with refs 9 9 - # - page-text.txt: All text content 10 10 - # - page.pdf: PDF version 11 11 - # 12 12 - # Optional: Load auth state for protected pages 13 13 - 14 14 - set -euo pipefail 15 15 - 16 16 - TARGET_URL="${1:?Usage: $0 <url> [output-dir]}" 17 17 - OUTPUT_DIR="${2:-.}" 18 18 - 19 19 - echo "Capturing: $TARGET_URL" 20 20 - mkdir -p "$OUTPUT_DIR" 21 21 - 22 22 - # Optional: Load authentication state 23 23 - # if [[ -f "./auth-state.json" ]]; then 24 24 - # echo "Loading authentication state..." 25 25 - # agent-browser state load "./auth-state.json" 26 26 - # fi 27 27 - 28 28 - # Navigate to target 29 29 - agent-browser open "$TARGET_URL" 30 30 - agent-browser wait --load networkidle 31 31 - 32 32 - # Get metadata 33 33 - TITLE=$(agent-browser get title) 34 34 - URL=$(agent-browser get url) 35 35 - echo "Title: $TITLE" 36 36 - echo "URL: $URL" 37 37 - 38 38 - # Capture full page screenshot 39 39 - agent-browser screenshot --full "$OUTPUT_DIR/page-full.png" 40 40 - echo "Saved: $OUTPUT_DIR/page-full.png" 41 41 - 42 42 - # Get page structure with refs 43 43 - agent-browser snapshot -i > "$OUTPUT_DIR/page-structure.txt" 44 44 - echo "Saved: $OUTPUT_DIR/page-structure.txt" 45 45 - 46 46 - # Extract all text content 47 47 - agent-browser get text body > "$OUTPUT_DIR/page-text.txt" 48 48 - echo "Saved: $OUTPUT_DIR/page-text.txt" 49 49 - 50 50 - # Save as PDF 51 51 - agent-browser pdf "$OUTPUT_DIR/page.pdf" 52 52 - echo "Saved: $OUTPUT_DIR/page.pdf" 53 53 - 54 54 - # Optional: Extract specific elements using refs from structure 55 55 - # agent-browser get text @e5 > "$OUTPUT_DIR/main-content.txt" 56 56 - 57 57 - # Optional: Handle infinite scroll pages 58 58 - # for i in {1..5}; do 59 59 - # agent-browser scroll down 1000 60 60 - # agent-browser wait 1000 61 61 - # done 62 62 - # agent-browser screenshot --full "$OUTPUT_DIR/page-scrolled.png" 63 63 - 64 64 - # Cleanup 65 65 - agent-browser close 66 66 - 67 67 - echo "" 68 68 - echo "Capture complete:" 69 69 - ls -la "$OUTPUT_DIR"

-62

.agents/skills/agent-browser/templates/form-automation.sh

reviewed

··· 1 1 - #!/bin/bash 2 2 - # Template: Form Automation Workflow 3 3 - # Purpose: Fill and submit web forms with validation 4 4 - # Usage: ./form-automation.sh <form-url> 5 5 - # 6 6 - # This template demonstrates the snapshot-interact-verify pattern: 7 7 - # 1. Navigate to form 8 8 - # 2. Snapshot to get element refs 9 9 - # 3. Fill fields using refs 10 10 - # 4. Submit and verify result 11 11 - # 12 12 - # Customize: Update the refs (@e1, @e2, etc.) based on your form's snapshot output 13 13 - 14 14 - set -euo pipefail 15 15 - 16 16 - FORM_URL="${1:?Usage: $0 <form-url>}" 17 17 - 18 18 - echo "Form automation: $FORM_URL" 19 19 - 20 20 - # Step 1: Navigate to form 21 21 - agent-browser open "$FORM_URL" 22 22 - agent-browser wait --load networkidle 23 23 - 24 24 - # Step 2: Snapshot to discover form elements 25 25 - echo "" 26 26 - echo "Form structure:" 27 27 - agent-browser snapshot -i 28 28 - 29 29 - # Step 3: Fill form fields (customize these refs based on snapshot output) 30 30 - # 31 31 - # Common field types: 32 32 - # agent-browser fill @e1 "John Doe" # Text input 33 33 - # agent-browser fill @e2 "user@example.com" # Email input 34 34 - # agent-browser fill @e3 "SecureP@ss123" # Password input 35 35 - # agent-browser select @e4 "Option Value" # Dropdown 36 36 - # agent-browser check @e5 # Checkbox 37 37 - # agent-browser click @e6 # Radio button 38 38 - # agent-browser fill @e7 "Multi-line text" # Textarea 39 39 - # agent-browser upload @e8 /path/to/file.pdf # File upload 40 40 - # 41 41 - # Uncomment and modify: 42 42 - # agent-browser fill @e1 "Test User" 43 43 - # agent-browser fill @e2 "test@example.com" 44 44 - # agent-browser click @e3 # Submit button 45 45 - 46 46 - # Step 4: Wait for submission 47 47 - # agent-browser wait --load networkidle 48 48 - # agent-browser wait --url "**/success" # Or wait for redirect 49 49 - 50 50 - # Step 5: Verify result 51 51 - echo "" 52 52 - echo "Result:" 53 53 - agent-browser get url 54 54 - agent-browser snapshot -i 55 55 - 56 56 - # Optional: Capture evidence 57 57 - agent-browser screenshot /tmp/form-result.png 58 58 - echo "Screenshot saved: /tmp/form-result.png" 59 59 - 60 60 - # Cleanup 61 61 - agent-browser close 62 62 - echo "Done"

-188

.agents/skills/animate/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: animate 3 3 - description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Animation Opportunities 18 18 - 19 19 - Analyze where motion would improve the experience: 20 20 - 21 21 - 1. **Identify static areas**: 22 22 - - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) 23 23 - - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) 24 24 - - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious 25 25 - - **Lack of delight**: Functional but joyless interactions 26 26 - - **Missed guidance**: Opportunities to direct attention or explain behavior 27 27 - 28 28 - 2. **Understand the context**: 29 29 - - What's the personality? (Playful vs serious, energetic vs calm) 30 30 - - What's the performance budget? (Mobile-first? Complex page?) 31 31 - - Who's the audience? (Motion-sensitive users? Power users who want speed?) 32 32 - - What matters most? (One hero animation vs many micro-interactions?) 33 33 - 34 34 - If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. 35 35 - 36 36 - **CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. 37 37 - 38 38 - ## Plan Animation Strategy 39 39 - 40 40 - Create a purposeful animation plan: 41 41 - 42 42 - - **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) 43 43 - - **Feedback layer**: Which interactions need acknowledgment? 44 44 - - **Transition layer**: Which state changes need smoothing? 45 45 - - **Delight layer**: Where can we surprise and delight? 46 46 - 47 47 - **IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. 48 48 - 49 49 - ## Implement Animations 50 50 - 51 51 - Add motion systematically across these categories: 52 52 - 53 53 - ### Entrance Animations 54 54 - 55 55 - - **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations 56 56 - - **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) 57 57 - - **Content reveals**: Scroll-triggered animations using intersection observer 58 58 - - **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management 59 59 - 60 60 - ### Micro-interactions 61 61 - 62 62 - - **Button feedback**: 63 63 - - Hover: Subtle scale (1.02-1.05), color shift, shadow increase 64 64 - - Click: Quick scale down then up (0.95 → 1), ripple effect 65 65 - - Loading: Spinner or pulse state 66 66 - - **Form interactions**: 67 67 - - Input focus: Border color transition, slight scale or glow 68 68 - - Validation: Shake on error, check mark on success, smooth color transitions 69 69 - - **Toggle switches**: Smooth slide + color transition (200-300ms) 70 70 - - **Checkboxes/radio**: Check mark animation, ripple effect 71 71 - - **Like/favorite**: Scale + rotation, particle effects, color transition 72 72 - 73 73 - ### State Transitions 74 74 - 75 75 - - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) 76 76 - - **Expand/collapse**: Height transition with overflow handling, icon rotation 77 77 - - **Loading states**: Skeleton screen fades, spinner animations, progress bars 78 78 - - **Success/error**: Color transitions, icon animations, gentle scale pulse 79 79 - - **Enable/disable**: Opacity transitions, cursor changes 80 80 - 81 81 - ### Navigation & Flow 82 82 - 83 83 - - **Page transitions**: Crossfade between routes, shared element transitions 84 84 - - **Tab switching**: Slide indicator, content fade/slide 85 85 - - **Carousel/slider**: Smooth transforms, snap points, momentum 86 86 - - **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators 87 87 - 88 88 - ### Feedback & Guidance 89 89 - 90 90 - - **Hover hints**: Tooltip fade-ins, cursor changes, element highlights 91 91 - - **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning 92 92 - - **Copy/paste**: Brief highlight flash on paste, "copied" confirmation 93 93 - - **Focus flow**: Highlight path through form or workflow 94 94 - 95 95 - ### Delight Moments 96 96 - 97 97 - - **Empty states**: Subtle floating animations on illustrations 98 98 - - **Completed actions**: Confetti, check mark flourish, success celebrations 99 99 - - **Easter eggs**: Hidden interactions for discovery 100 100 - - **Contextual animation**: Weather effects, time-of-day themes, seasonal touches 101 101 - 102 102 - ## Technical Implementation 103 103 - 104 104 - Use appropriate techniques for each animation: 105 105 - 106 106 - ### Timing & Easing 107 107 - 108 108 - **Durations by purpose:** 109 109 - 110 110 - - **100-150ms**: Instant feedback (button press, toggle) 111 111 - - **200-300ms**: State changes (hover, menu open) 112 112 - - **300-500ms**: Layout changes (accordion, modal) 113 113 - - **500-800ms**: Entrance animations (page load) 114 114 - 115 115 - **Easing curves (use these, not CSS defaults):** 116 116 - 117 117 - ```css 118 118 - /* Recommended - natural deceleration */ 119 119 - --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ 120 120 - --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */ 121 121 - --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */ 122 122 - 123 123 - /* AVOID - feel dated and tacky */ 124 124 - /* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ 125 125 - /* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ 126 126 - ``` 127 127 - 128 128 - **Exit animations are faster than entrances.** Use ~75% of enter duration. 129 129 - 130 130 - ### CSS Animations 131 131 - 132 132 - ```css 133 133 - /* Prefer for simple, declarative animations */ 134 134 - - transitions for state changes 135 135 - - @keyframes for complex sequences 136 136 - - transform + opacity only (GPU-accelerated) 137 137 - ``` 138 138 - 139 139 - ### JavaScript Animation 140 140 - 141 141 - ```javascript 142 142 - /* Use for complex, interactive animations */ 143 143 - - Web Animations API for programmatic control 144 144 - - Framer Motion for React 145 145 - - GSAP for complex sequences 146 146 - ``` 147 147 - 148 148 - ### Performance 149 149 - 150 150 - - **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties 151 151 - - **will-change**: Add sparingly for known expensive animations 152 152 - - **Reduce paint**: Minimize repaints, use `contain` where appropriate 153 153 - - **Monitor FPS**: Ensure 60fps on target devices 154 154 - 155 155 - ### Accessibility 156 156 - 157 157 - ```css 158 158 - @media (prefers-reduced-motion: reduce) { 159 159 - * { 160 160 - animation-duration: 0.01ms !important; 161 161 - animation-iteration-count: 1 !important; 162 162 - transition-duration: 0.01ms !important; 163 163 - } 164 164 - } 165 165 - ``` 166 166 - 167 167 - **NEVER**: 168 168 - 169 169 - - Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself 170 170 - - Animate layout properties (width, height, top, left)—use transform instead 171 171 - - Use durations over 500ms for feedback—it feels laggy 172 172 - - Animate without purpose—every animation needs a reason 173 173 - - Ignore `prefers-reduced-motion`—this is an accessibility violation 174 174 - - Animate everything—animation fatigue makes interfaces feel exhausting 175 175 - - Block interaction during animations unless intentional 176 176 - 177 177 - ## Verify Quality 178 178 - 179 179 - Test animations thoroughly: 180 180 - 181 181 - - **Smooth at 60fps**: No jank on target devices 182 182 - - **Feels natural**: Easing curves feel organic, not robotic 183 183 - - **Appropriate timing**: Not too fast (jarring) or too slow (laggy) 184 184 - - **Reduced motion works**: Animations disabled or simplified appropriately 185 185 - - **Doesn't block**: Users can interact during/after animations 186 186 - - **Adds value**: Makes interface clearer or more delightful 187 187 - 188 188 - Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.

-158

.agents/skills/audit/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: audit 3 3 - description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[area (feature, page, component...)]" 7 7 - --- 8 8 - 9 9 - ## MANDATORY PREPARATION 10 10 - 11 11 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 12 12 - 13 13 - --- 14 14 - 15 15 - Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues — document them for other commands to address. 16 16 - 17 17 - This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation. 18 18 - 19 19 - ## Diagnostic Scan 20 20 - 21 21 - Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. 22 22 - 23 23 - ### 1. Accessibility (A11y) 24 24 - 25 25 - **Check for**: 26 26 - 27 27 - - **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) 28 28 - - **Missing ARIA**: Interactive elements without proper roles, labels, or states 29 29 - - **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps 30 30 - - **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons 31 31 - - **Alt text**: Missing or poor image descriptions 32 32 - - **Form issues**: Inputs without labels, poor error messaging, missing required indicators 33 33 - 34 34 - **Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) 35 35 - 36 36 - ### 2. Performance 37 37 - 38 38 - **Check for**: 39 39 - 40 40 - - **Layout thrashing**: Reading/writing layout properties in loops 41 41 - - **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity 42 42 - - **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change 43 43 - - **Bundle size**: Unnecessary imports, unused dependencies 44 44 - - **Render performance**: Unnecessary re-renders, missing memoization 45 45 - 46 46 - **Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) 47 47 - 48 48 - ### 3. Theming 49 49 - 50 50 - **Check for**: 51 51 - 52 52 - - **Hard-coded colors**: Colors not using design tokens 53 53 - - **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme 54 54 - - **Inconsistent tokens**: Using wrong tokens, mixing token types 55 55 - - **Theme switching issues**: Values that don't update on theme change 56 56 - 57 57 - **Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) 58 58 - 59 59 - ### 4. Responsive Design 60 60 - 61 61 - **Check for**: 62 62 - 63 63 - - **Fixed widths**: Hard-coded widths that break on mobile 64 64 - - **Touch targets**: Interactive elements < 44x44px 65 65 - - **Horizontal scroll**: Content overflow on narrow viewports 66 66 - - **Text scaling**: Layouts that break when text size increases 67 67 - - **Missing breakpoints**: No mobile/tablet variants 68 68 - 69 69 - **Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) 70 70 - 71 71 - ### 5. Anti-Patterns (CRITICAL) 72 72 - 73 73 - Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). 74 74 - 75 75 - **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) 76 76 - 77 77 - ## Generate Report 78 78 - 79 79 - ### Audit Health Score 80 80 - 81 81 - | # | Dimension | Score | Key Finding | 82 82 - | --------- | ----------------- | --------- | ---------------------------------- | 83 83 - | 1 | Accessibility | ? | [most critical a11y issue or "--"] | 84 84 - | 2 | Performance | ? | | 85 85 - | 3 | Responsive Design | ? | | 86 86 - | 4 | Theming | ? | | 87 87 - | 5 | Anti-Patterns | ? | | 88 88 - | **Total** | | **??/20** | **[Rating band]** | 89 89 - 90 90 - **Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) 91 91 - 92 92 - ### Anti-Patterns Verdict 93 93 - 94 94 - **Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. 95 95 - 96 96 - ### Executive Summary 97 97 - 98 98 - - Audit Health Score: **??/20** ([rating band]) 99 99 - - Total issues found (count by severity: P0/P1/P2/P3) 100 100 - - Top 3-5 critical issues 101 101 - - Recommended next steps 102 102 - 103 103 - ### Detailed Findings by Severity 104 104 - 105 105 - Tag every issue with **P0-P3 severity**: 106 106 - 107 107 - - **P0 Blocking**: Prevents task completion — fix immediately 108 108 - - **P1 Major**: Significant difficulty or WCAG AA violation — fix before release 109 109 - - **P2 Minor**: Annoyance, workaround exists — fix in next pass 110 110 - - **P3 Polish**: Nice-to-fix, no real user impact — fix if time permits 111 111 - 112 112 - For each issue, document: 113 113 - 114 114 - - **[P?] Issue name** 115 115 - - **Location**: Component, file, line 116 116 - - **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern 117 117 - - **Impact**: How it affects users 118 118 - - **WCAG/Standard**: Which standard it violates (if applicable) 119 119 - - **Recommendation**: How to fix it 120 120 - - **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) 121 121 - 122 122 - ### Patterns & Systemic Issues 123 123 - 124 124 - Identify recurring problems that indicate systemic gaps rather than one-off mistakes: 125 125 - 126 126 - - "Hard-coded colors appear in 15+ components, should use design tokens" 127 127 - - "Touch targets consistently too small (<44px) throughout mobile experience" 128 128 - 129 129 - ### Positive Findings 130 130 - 131 131 - Note what's working well — good practices to maintain and replicate. 132 132 - 133 133 - ## Recommended Actions 134 134 - 135 135 - List recommended commands in priority order (P0 first, then P1, then P2): 136 136 - 137 137 - 1. **[P?] `/command-name`** — Brief description (specific context from audit findings) 138 138 - 2. **[P?] `/command-name`** — Brief description (specific context) 139 139 - 140 140 - **Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. 141 141 - 142 142 - After presenting the summary, tell the user: 143 143 - 144 144 - > You can ask me to run these one at a time, all at once, or in any order you prefer. 145 145 - > 146 146 - > Re-run `/audit` after fixes to see your score improve. 147 147 - 148 148 - **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. 149 149 - 150 150 - **NEVER**: 151 151 - 152 152 - - Report issues without explaining impact (why does this matter?) 153 153 - - Provide generic recommendations (be specific and actionable) 154 154 - - Skip positive findings (celebrate what works) 155 155 - - Forget to prioritize (everything can't be P0) 156 156 - - Report false positives without verification 157 157 - 158 158 - Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.

-124

.agents/skills/bolder/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: bolder 3 3 - description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Current State 18 18 - 19 19 - Analyze what makes the design feel too safe or boring: 20 20 - 21 21 - 1. **Identify weakness sources**: 22 22 - - **Generic choices**: System fonts, basic colors, standard layouts 23 23 - - **Timid scale**: Everything is medium-sized with no drama 24 24 - - **Low contrast**: Everything has similar visual weight 25 25 - - **Static**: No motion, no energy, no life 26 26 - - **Predictable**: Standard patterns with no surprises 27 27 - - **Flat hierarchy**: Nothing stands out or commands attention 28 28 - 29 29 - 2. **Understand the context**: 30 30 - - What's the brand personality? (How far can we push?) 31 31 - - What's the purpose? (Marketing can be bolder than financial dashboards) 32 32 - - Who's the audience? (What will resonate?) 33 33 - - What are the constraints? (Brand guidelines, accessibility, performance) 34 34 - 35 35 - If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. 36 36 - 37 37 - **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. 38 38 - 39 39 - **WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." 40 40 - 41 41 - ## Plan Amplification 42 42 - 43 43 - Create a strategy to increase impact while maintaining coherence: 44 44 - 45 45 - - **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) 46 46 - - **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. 47 47 - - **Risk budget**: How experimental can we be? Push boundaries within constraints. 48 48 - - **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) 49 49 - 50 50 - **IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. 51 51 - 52 52 - ## Amplify the Design 53 53 - 54 54 - Systematically increase impact across these dimensions: 55 55 - 56 56 - ### Typography Amplification 57 57 - 58 58 - - **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) 59 59 - - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) 60 60 - - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 61 61 - - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) 62 62 - 63 63 - ### Color Intensification 64 64 - 65 65 - - **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) 66 66 - - **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop 67 67 - - **Dominant color strategy**: Let one bold color own 60% of the design 68 68 - - **Sharp accents**: High-contrast accent colors that pop 69 69 - - **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette 70 70 - - **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) 71 71 - 72 72 - ### Spatial Drama 73 73 - 74 74 - - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings 75 75 - - **Break the grid**: Let hero elements escape containers and cross boundaries 76 76 - - **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry 77 77 - - **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) 78 78 - - **Overlap**: Layer elements intentionally for depth 79 79 - 80 80 - ### Visual Effects 81 81 - 82 82 - - **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) 83 83 - - **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) 84 84 - - **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) 85 85 - - **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) 86 86 - - **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand 87 87 - 88 88 - ### Motion & Animation 89 89 - 90 90 - - **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays 91 91 - - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences 92 92 - - **Micro-interactions**: Satisfying hover effects, click feedback, state changes 93 93 - - **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) 94 94 - 95 95 - ### Composition Boldness 96 96 - 97 97 - - **Hero moments**: Create clear focal points with dramatic treatment 98 98 - - **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements 99 99 - - **Full-bleed elements**: Use full viewport width/height for impact 100 100 - - **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits 101 101 - 102 102 - **NEVER**: 103 103 - 104 104 - - Add effects randomly without purpose (chaos ≠ bold) 105 105 - - Sacrifice readability for aesthetics (body text must be readable) 106 106 - - Make everything bold (then nothing is bold - need contrast) 107 107 - - Ignore accessibility (bold design must still meet WCAG standards) 108 108 - - Overwhelm with motion (animation fatigue is real) 109 109 - - Copy trendy aesthetics blindly (bold means distinctive, not derivative) 110 110 - 111 111 - ## Verify Quality 112 112 - 113 113 - Ensure amplification maintains usability and coherence: 114 114 - 115 115 - - **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. 116 116 - - **Still functional**: Can users accomplish tasks without distraction? 117 117 - - **Coherent**: Does everything feel intentional and unified? 118 118 - - **Memorable**: Will users remember this experience? 119 119 - - **Performant**: Do all these effects run smoothly? 120 120 - - **Accessible**: Does it still meet accessibility standards? 121 121 - 122 122 - **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." 123 123 - 124 124 - Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable.

-202

.agents/skills/clarify/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: clarify 3 3 - description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Current Copy 18 18 - 19 19 - Identify what makes the text unclear or ineffective: 20 20 - 21 21 - 1. **Find clarity problems**: 22 22 - - **Jargon**: Technical terms users won't understand 23 23 - - **Ambiguity**: Multiple interpretations possible 24 24 - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" 25 25 - - **Length**: Too wordy or too terse 26 26 - - **Assumptions**: Assuming user knowledge they don't have 27 27 - - **Missing context**: Users don't know what to do or why 28 28 - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation 29 29 - 30 30 - 2. **Understand the context**: 31 31 - - Who's the audience? (Technical? General? First-time users?) 32 32 - - What's the user's mental state? (Stressed during error? Confident during success?) 33 33 - - What's the action? (What do we want users to do?) 34 34 - - What's the constraint? (Character limits? Space limitations?) 35 35 - 36 36 - **CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. 37 37 - 38 38 - ## Plan Copy Improvements 39 39 - 40 40 - Create a strategy for clearer communication: 41 41 - 42 42 - - **Primary message**: What's the ONE thing users need to know? 43 43 - - **Action needed**: What should users do next (if anything)? 44 44 - - **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) 45 45 - - **Constraints**: Length limits, brand voice, localization considerations 46 46 - 47 47 - **IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. 48 48 - 49 49 - ## Improve Copy Systematically 50 50 - 51 51 - Refine text across these common areas: 52 52 - 53 53 - ### Error Messages 54 54 - 55 55 - **Bad**: "Error 403: Forbidden" 56 56 - **Good**: "You don't have permission to view this page. Contact your admin for access." 57 57 - 58 58 - **Bad**: "Invalid input" 59 59 - **Good**: "Email addresses need an @ symbol. Try: name@example.com" 60 60 - 61 61 - **Principles**: 62 62 - 63 63 - - Explain what went wrong in plain language 64 64 - - Suggest how to fix it 65 65 - - Don't blame the user 66 66 - - Include examples when helpful 67 67 - - Link to help/support if applicable 68 68 - 69 69 - ### Form Labels & Instructions 70 70 - 71 71 - **Bad**: "DOB (MM/DD/YYYY)" 72 72 - **Good**: "Date of birth" (with placeholder showing format) 73 73 - 74 74 - **Bad**: "Enter value here" 75 75 - **Good**: "Your email address" or "Company name" 76 76 - 77 77 - **Principles**: 78 78 - 79 79 - - Use clear, specific labels (not generic placeholders) 80 80 - - Show format expectations with examples 81 81 - - Explain why you're asking (when not obvious) 82 82 - - Put instructions before the field, not after 83 83 - - Keep required field indicators clear 84 84 - 85 85 - ### Button & CTA Text 86 86 - 87 87 - **Bad**: "Click here" | "Submit" | "OK" 88 88 - **Good**: "Create account" | "Save changes" | "Got it, thanks" 89 89 - 90 90 - **Principles**: 91 91 - 92 92 - - Describe the action specifically 93 93 - - Use active voice (verb + noun) 94 94 - - Match user's mental model 95 95 - - Be specific ("Save" is better than "OK") 96 96 - 97 97 - ### Help Text & Tooltips 98 98 - 99 99 - **Bad**: "This is the username field" 100 100 - **Good**: "Choose a username. You can change this later in Settings." 101 101 - 102 102 - **Principles**: 103 103 - 104 104 - - Add value (don't just repeat the label) 105 105 - - Answer the implicit question ("What is this?" or "Why do you need this?") 106 106 - - Keep it brief but complete 107 107 - - Link to detailed docs if needed 108 108 - 109 109 - ### Empty States 110 110 - 111 111 - **Bad**: "No items" 112 112 - **Good**: "No projects yet. Create your first project to get started." 113 113 - 114 114 - **Principles**: 115 115 - 116 116 - - Explain why it's empty (if not obvious) 117 117 - - Show next action clearly 118 118 - - Make it welcoming, not dead-end 119 119 - 120 120 - ### Success Messages 121 121 - 122 122 - **Bad**: "Success" 123 123 - **Good**: "Settings saved! Your changes will take effect immediately." 124 124 - 125 125 - **Principles**: 126 126 - 127 127 - - Confirm what happened 128 128 - - Explain what happens next (if relevant) 129 129 - - Be brief but complete 130 130 - - Match the user's emotional moment (celebrate big wins) 131 131 - 132 132 - ### Loading States 133 133 - 134 134 - **Bad**: "Loading..." (for 30+ seconds) 135 135 - **Good**: "Analyzing your data... this usually takes 30-60 seconds" 136 136 - 137 137 - **Principles**: 138 138 - 139 139 - - Set expectations (how long?) 140 140 - - Explain what's happening (when it's not obvious) 141 141 - - Show progress when possible 142 142 - - Offer escape hatch if appropriate ("Cancel") 143 143 - 144 144 - ### Confirmation Dialogs 145 145 - 146 146 - **Bad**: "Are you sure?" 147 147 - **Good**: "Delete 'Project Alpha'? This can't be undone." 148 148 - 149 149 - **Principles**: 150 150 - 151 151 - - State the specific action 152 152 - - Explain consequences (especially for destructive actions) 153 153 - - Use clear button labels ("Delete project" not "Yes") 154 154 - - Don't overuse confirmations (only for risky actions) 155 155 - 156 156 - ### Navigation & Wayfinding 157 157 - 158 158 - **Bad**: Generic labels like "Items" | "Things" | "Stuff" 159 159 - **Good**: Specific labels like "Your projects" | "Team members" | "Settings" 160 160 - 161 161 - **Principles**: 162 162 - 163 163 - - Be specific and descriptive 164 164 - - Use language users understand (not internal jargon) 165 165 - - Make hierarchy clear 166 166 - - Consider information scent (breadcrumbs, current location) 167 167 - 168 168 - ## Apply Clarity Principles 169 169 - 170 170 - Every piece of copy should follow these rules: 171 171 - 172 172 - 1. **Be specific**: "Enter email" not "Enter value" 173 173 - 2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) 174 174 - 3. **Be active**: "Save changes" not "Changes will be saved" 175 175 - 4. **Be human**: "Oops, something went wrong" not "System error encountered" 176 176 - 5. **Be helpful**: Tell users what to do, not just what happened 177 177 - 6. **Be consistent**: Use same terms throughout (don't vary for variety) 178 178 - 179 179 - **NEVER**: 180 180 - 181 181 - - Use jargon without explanation 182 182 - - Blame users ("You made an error" → "This field is required") 183 183 - - Be vague ("Something went wrong" without explanation) 184 184 - - Use passive voice unnecessarily 185 185 - - Write overly long explanations (be concise) 186 186 - - Use humor for errors (be empathetic instead) 187 187 - - Assume technical knowledge 188 188 - - Vary terminology (pick one term and stick with it) 189 189 - - Repeat information (headers restating intros, redundant explanations) 190 190 - - Use placeholders as the only labels (they disappear when users type) 191 191 - 192 192 - ## Verify Improvements 193 193 - 194 194 - Test that copy improvements work: 195 195 - 196 196 - - **Comprehension**: Can users understand without context? 197 197 - - **Actionability**: Do users know what to do next? 198 198 - - **Brevity**: Is it as short as possible while remaining clear? 199 199 - - **Consistency**: Does it match terminology elsewhere? 200 200 - - **Tone**: Is it appropriate for the situation? 201 201 - 202 202 - Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human.

-154

.agents/skills/colorize/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: colorize 3 3 - description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Color Opportunity 18 18 - 19 19 - Analyze the current state and identify opportunities: 20 20 - 21 21 - 1. **Understand current state**: 22 22 - - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? 23 23 - - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? 24 24 - - **Context**: What's appropriate for this domain and audience? 25 25 - - **Brand**: Are there existing brand colors we should use? 26 26 - 27 27 - 2. **Identify where color adds value**: 28 28 - - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) 29 29 - - **Hierarchy**: Drawing attention to important elements 30 30 - - **Categorization**: Different sections, types, or states 31 31 - - **Emotional tone**: Warmth, energy, trust, creativity 32 32 - - **Wayfinding**: Helping users navigate and understand structure 33 33 - - **Delight**: Moments of visual interest and personality 34 34 - 35 35 - If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. 36 36 - 37 37 - **CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. 38 38 - 39 39 - ## Plan Color Strategy 40 40 - 41 41 - Create a purposeful color introduction plan: 42 42 - 43 43 - - **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) 44 44 - - **Dominant color**: Which color owns 60% of colored elements? 45 45 - - **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) 46 46 - - **Application strategy**: Where does each color appear and why? 47 47 - 48 48 - **IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. 49 49 - 50 50 - ## Introduce Color Strategically 51 51 - 52 52 - Add color systematically across these dimensions: 53 53 - 54 54 - ### Semantic Color 55 55 - 56 56 - - **State indicators**: 57 57 - - Success: Green tones (emerald, forest, mint) 58 58 - - Error: Red/pink tones (rose, crimson, coral) 59 59 - - Warning: Orange/amber tones 60 60 - - Info: Blue tones (sky, ocean, indigo) 61 61 - - Neutral: Gray/slate for inactive states 62 62 - 63 63 - - **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) 64 64 - - **Progress indicators**: Colored bars, rings, or charts showing completion or health 65 65 - 66 66 - ### Accent Color Application 67 67 - 68 68 - - **Primary actions**: Color the most important buttons/CTAs 69 69 - - **Links**: Add color to clickable text (maintain accessibility) 70 70 - - **Icons**: Colorize key icons for recognition and personality 71 71 - - **Headers/titles**: Add color to section headers or key labels 72 72 - - **Hover states**: Introduce color on interaction 73 73 - 74 74 - ### Background & Surfaces 75 75 - 76 76 - - **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) 77 77 - - **Colored sections**: Use subtle background colors to separate areas 78 78 - - **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) 79 79 - - **Cards & surfaces**: Tint cards or surfaces slightly for warmth 80 80 - 81 81 - **Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness _look_ equal. Great for generating harmonious scales. 82 82 - 83 83 - ### Data Visualization 84 84 - 85 85 - - **Charts & graphs**: Use color to encode categories or values 86 86 - - **Heatmaps**: Color intensity shows density or importance 87 87 - - **Comparison**: Color coding for different datasets or timeframes 88 88 - 89 89 - ### Borders & Accents 90 90 - 91 91 - - **Accent borders**: Add colored left/top borders to cards or sections 92 92 - - **Underlines**: Color underlines for emphasis or active states 93 93 - - **Dividers**: Subtle colored dividers instead of gray lines 94 94 - - **Focus rings**: Colored focus indicators matching brand 95 95 - 96 96 - ### Typography Color 97 97 - 98 98 - - **Colored headings**: Use brand colors for section headings (maintain contrast) 99 99 - - **Highlight text**: Color for emphasis or categories 100 100 - - **Labels & tags**: Small colored labels for metadata or categories 101 101 - 102 102 - ### Decorative Elements 103 103 - 104 104 - - **Illustrations**: Add colored illustrations or icons 105 105 - - **Shapes**: Geometric shapes in brand colors as background elements 106 106 - - **Gradients**: Colorful gradient overlays or mesh backgrounds 107 107 - - **Blobs/organic shapes**: Soft colored shapes for visual interest 108 108 - 109 109 - ## Balance & Refinement 110 110 - 111 111 - Ensure color addition improves rather than overwhelms: 112 112 - 113 113 - ### Maintain Hierarchy 114 114 - 115 115 - - **Dominant color** (60%): Primary brand color or most used accent 116 116 - - **Secondary color** (30%): Supporting color for variety 117 117 - - **Accent color** (10%): High contrast for key moments 118 118 - - **Neutrals** (remaining): Gray/black/white for structure 119 119 - 120 120 - ### Accessibility 121 121 - 122 122 - - **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) 123 123 - - **Don't rely on color alone**: Use icons, labels, or patterns alongside color 124 124 - - **Test for color blindness**: Verify red/green combinations work for all users 125 125 - 126 126 - ### Cohesion 127 127 - 128 128 - - **Consistent palette**: Use colors from defined palette, not arbitrary choices 129 129 - - **Systematic application**: Same color meanings throughout (green always = success) 130 130 - - **Temperature consistency**: Warm palette stays warm, cool stays cool 131 131 - 132 132 - **NEVER**: 133 133 - 134 134 - - Use every color in the rainbow (choose 2-4 colors beyond neutrals) 135 135 - - Apply color randomly without semantic meaning 136 136 - - Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead 137 137 - - Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication 138 138 - - Use pure black (`#000`) or pure white (`#fff`) for large areas 139 139 - - Violate WCAG contrast requirements 140 140 - - Use color as the only indicator (accessibility issue) 141 141 - - Make everything colorful (defeats the purpose) 142 142 - - Default to purple-blue gradients (AI slop aesthetic) 143 143 - 144 144 - ## Verify Color Addition 145 145 - 146 146 - Test that colorization improves the experience: 147 147 - 148 148 - - **Better hierarchy**: Does color guide attention appropriately? 149 149 - - **Clearer meaning**: Does color help users understand states/categories? 150 150 - - **More engaging**: Does the interface feel warmer and more inviting? 151 151 - - **Still accessible**: Do all color combinations meet WCAG standards? 152 152 - - **Not overwhelming**: Is color balanced and purposeful? 153 153 - 154 154 - Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional.

-244

.agents/skills/critique/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: critique 3 3 - description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[area (feature, page, component...)]" 7 7 - --- 8 8 - 9 9 - ## STEPS 10 10 - 11 11 - ### Step 1: Preparation 12 12 - 13 13 - Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. 14 14 - 15 15 - ### Step 2: Gather Assessments 16 16 - 17 17 - Launch two independent assessments. **Neither must see the other's output** to avoid bias. 18 18 - 19 19 - You SHOULD delegate each assessment to a separate sub-agent for independence. Use your environment's agent spawning mechanism (e.g., Claude Code's `Agent` tool, or Codex's subagent spawning). Sub-agents should return their findings as structured text. Do NOT output findings to the user yet. 20 20 - 21 21 - If sub-agents are not available in the current environment, complete each assessment sequentially, writing findings to internal notes before proceeding. 22 22 - 23 23 - **Tab isolation**: When browser automation is available, each assessment MUST create its own new tab. Never reuse an existing tab, even if one is already open at the correct URL. This prevents the two assessments from interfering with each other's page state. 24 24 - 25 25 - #### Assessment A: LLM Design Review 26 26 - 27 27 - Read the relevant source files (HTML, CSS, JS/TS) and, if browser automation is available, visually inspect the live page. **Create a new tab** for this; do not reuse existing tabs. After navigation, label the tab by setting the document title: 28 28 - 29 29 - ```javascript 30 30 - document.title = "[LLM] " + document.title; 31 31 - ``` 32 32 - 33 33 - Think like a design director. Evaluate: 34 34 - 35 35 - **AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? 36 36 - 37 37 - **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). 38 38 - 39 39 - **Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): 40 40 - 41 41 - - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. 42 42 - - Count visible options at each decision point. If >4, flag it. 43 43 - - Check for progressive disclosure: is complexity revealed only when needed? 44 44 - 45 45 - **Emotional Journey**: 46 46 - 47 47 - - What emotion does this interface evoke? Is that intentional? 48 48 - - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? 49 49 - - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? 50 50 - 51 51 - **Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): 52 52 - Score each of the 10 heuristics 0-4. This scoring will be presented in the report. 53 53 - 54 54 - Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. 55 55 - 56 56 - #### Assessment B: Automated Detection 57 57 - 58 58 - Run the bundled deterministic detector, which flags 25 specific patterns (AI slop tells + general design quality). 59 59 - 60 60 - **CLI scan**: 61 61 - 62 62 - ```bash 63 63 - npx impeccable --json [--fast] [target] 64 64 - ``` 65 65 - 66 66 - - Pass HTML/JSX/TSX/Vue/Svelte files or directories as `[target]` (anything with markup). Do not pass CSS-only files. 67 67 - - For URLs, skip the CLI scan (it requires Puppeteer). Use browser visualization instead. 68 68 - - For large directories (200+ scannable files), use `--fast` (regex-only, skips jsdom) 69 69 - - For 500+ files, narrow scope or ask the user 70 70 - - Exit code 0 = clean, 2 = findings 71 71 - 72 72 - **Browser visualization** (when browser automation tools are available AND the target is a viewable page): 73 73 - 74 74 - The overlay is a **visual aid for the user**. It highlights issues directly in their browser. Do NOT scroll through the page to screenshot overlays. Instead, read the console output to get the results programmatically. 75 75 - 76 76 - 1. **Start the live detection server**: 77 77 - ```bash 78 78 - npx impeccable live & 79 79 - ``` 80 80 - Note the port printed to stdout (auto-assigned). Use `--port=PORT` to fix it. 81 81 - 2. **Create a new tab** and navigate to the page (use dev server URL for local files, or direct URL). Do not reuse existing tabs. 82 82 - 3. **Label the tab** via `javascript_tool` so the user can distinguish it: 83 83 - ```javascript 84 84 - document.title = "[Human] " + document.title; 85 85 - ``` 86 86 - 4. **Scroll to top** to ensure the page is scrolled to the very top before injection 87 87 - 5. **Inject** via `javascript_tool` (replace PORT with the port from step 1): 88 88 - ```javascript 89 89 - const s = document.createElement("script"); 90 90 - s.src = "http://localhost:PORT/detect.js"; 91 91 - document.head.appendChild(s); 92 92 - ``` 93 93 - 6. Wait 2-3 seconds for the detector to render overlays 94 94 - 7. **Read results from console** using `read_console_messages` with pattern `impeccable`. The detector logs all findings with the `[impeccable]` prefix. Do NOT scroll through the page to take screenshots of the overlays. 95 95 - 8. **Cleanup**: Stop the live server when done: 96 96 - ```bash 97 97 - npx impeccable live stop 98 98 - ``` 99 99 - 100 100 - For multi-view targets, inject on 3-5 representative pages. If injection fails, continue with CLI results only. 101 101 - 102 102 - Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. 103 103 - 104 104 - ### Step 3: Generate Combined Critique Report 105 105 - 106 106 - Synthesize both assessments into a single report. Do NOT simply concatenate. Weave the findings together, noting where the LLM review and detector agree, where the detector caught issues the LLM missed, and where detector findings are false positives. 107 107 - 108 108 - Structure your feedback as a design director would: 109 109 - 110 110 - #### Design Health Score 111 111 - 112 112 - > _Consult [heuristics-scoring](reference/heuristics-scoring.md)_ 113 113 - 114 114 - Present the Nielsen's 10 heuristics scores as a table: 115 115 - 116 116 - | # | Heuristic | Score | Key Issue | 117 117 - | --------- | ------------------------------- | --------- | ------------------------------------ | 118 118 - | 1 | Visibility of System Status | ? | [specific finding or "n/a" if solid] | 119 119 - | 2 | Match System / Real World | ? | | 120 120 - | 3 | User Control and Freedom | ? | | 121 121 - | 4 | Consistency and Standards | ? | | 122 122 - | 5 | Error Prevention | ? | | 123 123 - | 6 | Recognition Rather Than Recall | ? | | 124 124 - | 7 | Flexibility and Efficiency | ? | | 125 125 - | 8 | Aesthetic and Minimalist Design | ? | | 126 126 - | 9 | Error Recovery | ? | | 127 127 - | 10 | Help and Documentation | ? | | 128 128 - | **Total** | | **??/40** | **[Rating band]** | 129 129 - 130 130 - Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32. 131 131 - 132 132 - #### Anti-Patterns Verdict 133 133 - 134 134 - **Start here.** Does this look AI-generated? 135 135 - 136 136 - **LLM assessment**: Your own evaluation of AI slop tells. Cover overall aesthetic feel, layout sameness, generic composition, missed opportunities for personality. 137 137 - 138 138 - **Deterministic scan**: Summarize what the automated detector found, with counts and file locations. Note any additional issues the detector caught that you missed, and flag any false positives. 139 139 - 140 140 - **Visual overlays** (if browser was used): Tell the user that overlays are now visible in the **[Human]** tab in their browser, highlighting the detected issues. Summarize what the console output reported. 141 141 - 142 142 - #### Overall Impression 143 143 - 144 144 - A brief gut reaction: what works, what doesn't, and the single biggest opportunity. 145 145 - 146 146 - #### What's Working 147 147 - 148 148 - Highlight 2-3 things done well. Be specific about why they work. 149 149 - 150 150 - #### Priority Issues 151 151 - 152 152 - The 3-5 most impactful design problems, ordered by importance. 153 153 - 154 154 - For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](reference/heuristics-scoring.md) for severity definitions): 155 155 - 156 156 - - **[P?] What**: Name the problem clearly 157 157 - - **Why it matters**: How this hurts users or undermines goals 158 158 - - **Fix**: What to do about it (be concrete) 159 159 - - **Suggested command**: Which command could address this (from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) 160 160 - 161 161 - #### Persona Red Flags 162 162 - 163 163 - > _Consult [personas](reference/personas.md)_ 164 164 - 165 165 - Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `.github/copilot-instructions.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. 166 166 - 167 167 - For each selected persona, walk through the primary user action and list specific red flags found: 168 168 - 169 169 - **Alex (Power User)**: No keyboard shortcuts detected. Form requires 8 clicks for primary action. Forced modal onboarding. High abandonment risk. 170 170 - 171 171 - **Jordan (First-Timer)**: Icon-only nav in sidebar. Technical jargon in error messages ("404 Not Found"). No visible help. Will abandon at step 2. 172 172 - 173 173 - Be specific. Name the exact elements and interactions that fail each persona. Don't write generic persona descriptions; write what broke for them. 174 174 - 175 175 - #### Minor Observations 176 176 - 177 177 - Quick notes on smaller issues worth addressing. 178 178 - 179 179 - #### Questions to Consider 180 180 - 181 181 - Provocative questions that might unlock better solutions: 182 182 - 183 183 - - "What if the primary action were more prominent?" 184 184 - - "Does this need to feel this complex?" 185 185 - - "What would a confident version of this look like?" 186 186 - 187 187 - **Remember**: 188 188 - 189 189 - - Be direct. Vague feedback wastes everyone's time. 190 190 - - Be specific. "The submit button," not "some elements." 191 191 - - Say what's wrong AND why it matters to users. 192 192 - - Give concrete suggestions, not just "consider exploring..." 193 193 - - Prioritize ruthlessly. If everything is important, nothing is. 194 194 - - Don't soften criticism. Developers need honest feedback to ship great design. 195 195 - 196 196 - ### Step 4: Ask the User 197 197 - 198 198 - **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. 199 199 - 200 200 - Ask questions along these lines (adapt to the specific findings; do NOT ask generic questions): 201 201 - 202 202 - 1. **Priority direction**: Based on the issues found, ask which category matters most to the user right now. For example: "I found problems with visual hierarchy, color usage, and information overload. Which area should we tackle first?" Offer the top 2-3 issue categories as options. 203 203 - 204 204 - 2. **Design intent**: If the critique found a tonal mismatch, ask whether it was intentional. For example: "The interface feels clinical and corporate. Is that the intended tone, or should it feel warmer/bolder/more playful?" Offer 2-3 tonal directions as options based on what would fix the issues found. 205 205 - 206 206 - 3. **Scope**: Ask how much the user wants to take on. For example: "I found N issues. Want to address everything, or focus on the top 3?" Offer scope options like "Top 3 only", "All issues", "Critical issues only". 207 207 - 208 208 - 4. **Constraints** (optional; only ask if relevant): If the findings touch many areas, ask if anything is off-limits. For example: "Should any sections stay as-is?" This prevents the plan from touching things the user considers done. 209 209 - 210 210 - **Rules for questions**: 211 211 - 212 212 - - Every question must reference specific findings from the report. Never ask generic "who is your audience?" questions. 213 213 - - Keep it to 2-4 questions maximum. Respect the user's time. 214 214 - - Offer concrete options, not open-ended prompts. 215 215 - - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. 216 216 - 217 217 - ### Step 5: Recommended Actions 218 218 - 219 219 - **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. 220 220 - 221 221 - #### Action Summary 222 222 - 223 223 - List recommended commands in priority order, based on the user's answers: 224 224 - 225 225 - 1. **`/command-name`**: Brief description of what to fix (specific context from critique findings) 226 226 - 2. **`/command-name`**: Brief description (specific context) 227 227 - ... 228 228 - 229 229 - **Rules for recommendations**: 230 230 - 231 231 - - Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive 232 232 - - Order by the user's stated priorities first, then by impact 233 233 - - Each item's description should carry enough context that the command knows what to focus on 234 234 - - Map each Priority Issue to the appropriate command 235 235 - - Skip commands that would address zero issues 236 236 - - If the user chose a limited scope, only include items within that scope 237 237 - - If the user marked areas as off-limits, exclude commands that would touch those areas 238 238 - - End with `/polish` as the final step if any fixes were recommended 239 239 - 240 240 - After presenting the summary, tell the user: 241 241 - 242 242 - > You can ask me to run these one at a time, all at once, or in any order you prefer. 243 243 - > 244 244 - > Re-run `/critique` after fixes to see your score improve.

-122

.agents/skills/critique/reference/cognitive-load.md

reviewed

··· 1 1 - # Cognitive Load Assessment 2 2 - 3 3 - Cognitive load is the total mental effort required to use an interface. Overloaded users make mistakes, get frustrated, and leave. This reference helps identify and fix cognitive overload. 4 4 - 5 5 - --- 6 6 - 7 7 - ## Three Types of Cognitive Load 8 8 - 9 9 - ### Intrinsic Load — The Task Itself 10 10 - 11 11 - Complexity inherent to what the user is trying to do. You can't eliminate this, but you can structure it. 12 12 - 13 13 - **Manage it by**: 14 14 - 15 15 - - Breaking complex tasks into discrete steps 16 16 - - Providing scaffolding (templates, defaults, examples) 17 17 - - Progressive disclosure — show what's needed now, hide the rest 18 18 - - Grouping related decisions together 19 19 - 20 20 - ### Extraneous Load — Bad Design 21 21 - 22 22 - Mental effort caused by poor design choices. **Eliminate this ruthlessly** — it's pure waste. 23 23 - 24 24 - **Common sources**: 25 25 - 26 26 - - Confusing navigation that requires mental mapping 27 27 - - Unclear labels that force users to guess meaning 28 28 - - Visual clutter competing for attention 29 29 - - Inconsistent patterns that prevent learning 30 30 - - Unnecessary steps between user intent and result 31 31 - 32 32 - ### Germane Load — Learning Effort 33 33 - 34 34 - Mental effort spent building understanding. This is _good_ cognitive load — it leads to mastery. 35 35 - 36 36 - **Support it by**: 37 37 - 38 38 - - Progressive disclosure that reveals complexity gradually 39 39 - - Consistent patterns that reward learning 40 40 - - Feedback that confirms correct understanding 41 41 - - Onboarding that teaches through action, not walls of text 42 42 - 43 43 - --- 44 44 - 45 45 - ## Cognitive Load Checklist 46 46 - 47 47 - Evaluate the interface against these 8 items: 48 48 - 49 49 - - [ ] **Single focus**: Can the user complete their primary task without distraction from competing elements? 50 50 - - [ ] **Chunking**: Is information presented in digestible groups (≤4 items per group)? 51 51 - - [ ] **Grouping**: Are related items visually grouped together (proximity, borders, shared background)? 52 52 - - [ ] **Visual hierarchy**: Is it immediately clear what's most important on the screen? 53 53 - - [ ] **One thing at a time**: Can the user focus on a single decision before moving to the next? 54 54 - - [ ] **Minimal choices**: Are decisions simplified (≤4 visible options at any decision point)? 55 55 - - [ ] **Working memory**: Does the user need to remember information from a previous screen to act on the current one? 56 56 - - [ ] **Progressive disclosure**: Is complexity revealed only when the user needs it? 57 57 - 58 58 - **Scoring**: Count the failed items. 0–1 failures = low cognitive load (good). 2–3 = moderate (address soon). 4+ = high cognitive load (critical fix needed). 59 59 - 60 60 - --- 61 61 - 62 62 - ## The Working Memory Rule 63 63 - 64 64 - **Humans can hold ≤4 items in working memory at once** (Miller's Law revised by Cowan, 2001). 65 65 - 66 66 - At any decision point, count the number of distinct options, actions, or pieces of information a user must simultaneously consider: 67 67 - 68 68 - - **≤4 items**: Within working memory limits — manageable 69 69 - - **5–7 items**: Pushing the boundary — consider grouping or progressive disclosure 70 70 - - **8+ items**: Overloaded — users will skip, misclick, or abandon 71 71 - 72 72 - **Practical applications**: 73 73 - 74 74 - - Navigation menus: ≤5 top-level items (group the rest under clear categories) 75 75 - - Form sections: ≤4 fields visible per group before a visual break 76 76 - - Action buttons: 1 primary, 1–2 secondary, group the rest in a menu 77 77 - - Dashboard widgets: ≤4 key metrics visible without scrolling 78 78 - - Pricing tiers: ≤3 options (more causes analysis paralysis) 79 79 - 80 80 - --- 81 81 - 82 82 - ## Common Cognitive Load Violations 83 83 - 84 84 - ### 1. The Wall of Options 85 85 - 86 86 - **Problem**: Presenting 10+ choices at once with no hierarchy. 87 87 - **Fix**: Group into categories, highlight recommended, use progressive disclosure. 88 88 - 89 89 - ### 2. The Memory Bridge 90 90 - 91 91 - **Problem**: User must remember info from step 1 to complete step 3. 92 92 - **Fix**: Keep relevant context visible, or repeat it where it's needed. 93 93 - 94 94 - ### 3. The Hidden Navigation 95 95 - 96 96 - **Problem**: User must build a mental map of where things are. 97 97 - **Fix**: Always show current location (breadcrumbs, active states, progress indicators). 98 98 - 99 99 - ### 4. The Jargon Barrier 100 100 - 101 101 - **Problem**: Technical or domain language forces translation effort. 102 102 - **Fix**: Use plain language. If domain terms are unavoidable, define them inline. 103 103 - 104 104 - ### 5. The Visual Noise Floor 105 105 - 106 106 - **Problem**: Every element has the same visual weight — nothing stands out. 107 107 - **Fix**: Establish clear hierarchy: one primary element, 2–3 secondary, everything else muted. 108 108 - 109 109 - ### 6. The Inconsistent Pattern 110 110 - 111 111 - **Problem**: Similar actions work differently in different places. 112 112 - **Fix**: Standardize interaction patterns. Same type of action = same type of UI. 113 113 - 114 114 - ### 7. The Multi-Task Demand 115 115 - 116 116 - **Problem**: Interface requires processing multiple simultaneous inputs (reading + deciding + navigating). 117 117 - **Fix**: Sequence the steps. Let the user do one thing at a time. 118 118 - 119 119 - ### 8. The Context Switch 120 120 - 121 121 - **Problem**: User must jump between screens/tabs/modals to gather info for a single decision. 122 122 - **Fix**: Co-locate the information needed for each decision. Reduce back-and-forth.

-244

.agents/skills/critique/reference/heuristics-scoring.md

reviewed

··· 1 1 - # Heuristics Scoring Guide 2 2 - 3 3 - Score each of Nielsen's 10 Usability Heuristics on a 0–4 scale. Be honest — a 4 means genuinely excellent, not "good enough." 4 4 - 5 5 - ## Nielsen's 10 Heuristics 6 6 - 7 7 - ### 1. Visibility of System Status 8 8 - 9 9 - Keep users informed about what's happening through timely, appropriate feedback. 10 10 - 11 11 - **Check for**: 12 12 - 13 13 - - Loading indicators during async operations 14 14 - - Confirmation of user actions (save, submit, delete) 15 15 - - Progress indicators for multi-step processes 16 16 - - Current location in navigation (breadcrumbs, active states) 17 17 - - Form validation feedback (inline, not just on submit) 18 18 - 19 19 - **Scoring**: 20 20 - | Score | Criteria | 21 21 - |-------|----------| 22 22 - | 0 | No feedback — user is guessing what happened | 23 23 - | 1 | Rare feedback — most actions produce no visible response | 24 24 - | 2 | Partial — some states communicated, major gaps remain | 25 25 - | 3 | Good — most operations give clear feedback, minor gaps | 26 26 - | 4 | Excellent — every action confirms, progress is always visible | 27 27 - 28 28 - ### 2. Match Between System and Real World 29 29 - 30 30 - Speak the user's language. Follow real-world conventions. Information appears in natural, logical order. 31 31 - 32 32 - **Check for**: 33 33 - 34 34 - - Familiar terminology (no unexplained jargon) 35 35 - - Logical information order matching user expectations 36 36 - - Recognizable icons and metaphors 37 37 - - Domain-appropriate language for the target audience 38 38 - - Natural reading flow (left-to-right, top-to-bottom priority) 39 39 - 40 40 - **Scoring**: 41 41 - | Score | Criteria | 42 42 - |-------|----------| 43 43 - | 0 | Pure tech jargon, alien to users | 44 44 - | 1 | Mostly confusing — requires domain expertise to navigate | 45 45 - | 2 | Mixed — some plain language, some jargon leaks through | 46 46 - | 3 | Mostly natural — occasional term needs context | 47 47 - | 4 | Speaks the user's language fluently throughout | 48 48 - 49 49 - ### 3. User Control and Freedom 50 50 - 51 51 - Users need a clear "emergency exit" from unwanted states without extended dialogue. 52 52 - 53 53 - **Check for**: 54 54 - 55 55 - - Undo/redo functionality 56 56 - - Cancel buttons on forms and modals 57 57 - - Clear navigation back to safety (home, previous) 58 58 - - Easy way to clear filters, search, selections 59 59 - - Escape from long or multi-step processes 60 60 - 61 61 - **Scoring**: 62 62 - | Score | Criteria | 63 63 - |-------|----------| 64 64 - | 0 | Users get trapped — no way out without refreshing | 65 65 - | 1 | Difficult exits — must find obscure paths to escape | 66 66 - | 2 | Some exits — main flows have escape, edge cases don't | 67 67 - | 3 | Good control — users can exit and undo most actions | 68 68 - | 4 | Full control — undo, cancel, back, and escape everywhere | 69 69 - 70 70 - ### 4. Consistency and Standards 71 71 - 72 72 - Users shouldn't wonder whether different words, situations, or actions mean the same thing. 73 73 - 74 74 - **Check for**: 75 75 - 76 76 - - Consistent terminology throughout the interface 77 77 - - Same actions produce same results everywhere 78 78 - - Platform conventions followed (standard UI patterns) 79 79 - - Visual consistency (colors, typography, spacing, components) 80 80 - - Consistent interaction patterns (same gesture = same behavior) 81 81 - 82 82 - **Scoring**: 83 83 - | Score | Criteria | 84 84 - |-------|----------| 85 85 - | 0 | Inconsistent everywhere — feels like different products stitched together | 86 86 - | 1 | Many inconsistencies — similar things look/behave differently | 87 87 - | 2 | Partially consistent — main flows match, details diverge | 88 88 - | 3 | Mostly consistent — occasional deviation, nothing confusing | 89 89 - | 4 | Fully consistent — cohesive system, predictable behavior | 90 90 - 91 91 - ### 5. Error Prevention 92 92 - 93 93 - Better than good error messages is a design that prevents problems in the first place. 94 94 - 95 95 - **Check for**: 96 96 - 97 97 - - Confirmation before destructive actions (delete, overwrite) 98 98 - - Constraints preventing invalid input (date pickers, dropdowns) 99 99 - - Smart defaults that reduce errors 100 100 - - Clear labels that prevent misunderstanding 101 101 - - Autosave and draft recovery 102 102 - 103 103 - **Scoring**: 104 104 - | Score | Criteria | 105 105 - |-------|----------| 106 106 - | 0 | Errors easy to make — no guardrails anywhere | 107 107 - | 1 | Few safeguards — some inputs validated, most aren't | 108 108 - | 2 | Partial prevention — common errors caught, edge cases slip | 109 109 - | 3 | Good prevention — most error paths blocked proactively | 110 110 - | 4 | Excellent — errors nearly impossible through smart constraints | 111 111 - 112 112 - ### 6. Recognition Rather Than Recall 113 113 - 114 114 - Minimize memory load. Make objects, actions, and options visible or easily retrievable. 115 115 - 116 116 - **Check for**: 117 117 - 118 118 - - Visible options (not buried in hidden menus) 119 119 - - Contextual help when needed (tooltips, inline hints) 120 120 - - Recent items and history 121 121 - - Autocomplete and suggestions 122 122 - - Labels on icons (not icon-only navigation) 123 123 - 124 124 - **Scoring**: 125 125 - | Score | Criteria | 126 126 - |-------|----------| 127 127 - | 0 | Heavy memorization — users must remember paths and commands | 128 128 - | 1 | Mostly recall — many hidden features, few visible cues | 129 129 - | 2 | Some aids — main actions visible, secondary features hidden | 130 130 - | 3 | Good recognition — most things discoverable, few memory demands | 131 131 - | 4 | Everything discoverable — users never need to memorize | 132 132 - 133 133 - ### 7. Flexibility and Efficiency of Use 134 134 - 135 135 - Accelerators — invisible to novices — speed up expert interaction. 136 136 - 137 137 - **Check for**: 138 138 - 139 139 - - Keyboard shortcuts for common actions 140 140 - - Customizable interface elements 141 141 - - Recent items and favorites 142 142 - - Bulk/batch actions 143 143 - - Power user features that don't complicate the basics 144 144 - 145 145 - **Scoring**: 146 146 - | Score | Criteria | 147 147 - |-------|----------| 148 148 - | 0 | One rigid path — no shortcuts or alternatives | 149 149 - | 1 | Limited flexibility — few alternatives to the main path | 150 150 - | 2 | Some shortcuts — basic keyboard support, limited bulk actions | 151 151 - | 3 | Good accelerators — keyboard nav, some customization | 152 152 - | 4 | Highly flexible — multiple paths, power features, customizable | 153 153 - 154 154 - ### 8. Aesthetic and Minimalist Design 155 155 - 156 156 - Interfaces should not contain irrelevant or rarely needed information. Every element should serve a purpose. 157 157 - 158 158 - **Check for**: 159 159 - 160 160 - - Only necessary information visible at each step 161 161 - - Clear visual hierarchy directing attention 162 162 - - Purposeful use of color and emphasis 163 163 - - No decorative clutter competing for attention 164 164 - - Focused, uncluttered layouts 165 165 - 166 166 - **Scoring**: 167 167 - | Score | Criteria | 168 168 - |-------|----------| 169 169 - | 0 | Overwhelming — everything competes for attention equally | 170 170 - | 1 | Cluttered — too much noise, hard to find what matters | 171 171 - | 2 | Some clutter — main content clear, periphery noisy | 172 172 - | 3 | Mostly clean — focused design, minor visual noise | 173 173 - | 4 | Perfectly minimal — every element earns its pixel | 174 174 - 175 175 - ### 9. Help Users Recognize, Diagnose, and Recover from Errors 176 176 - 177 177 - Error messages should use plain language, precisely indicate the problem, and constructively suggest a solution. 178 178 - 179 179 - **Check for**: 180 180 - 181 181 - - Plain language error messages (no error codes for users) 182 182 - - Specific problem identification ("Email is missing @" not "Invalid input") 183 183 - - Actionable recovery suggestions 184 184 - - Errors displayed near the source of the problem 185 185 - - Non-blocking error handling (don't wipe the form) 186 186 - 187 187 - **Scoring**: 188 188 - | Score | Criteria | 189 189 - |-------|----------| 190 190 - | 0 | Cryptic errors — codes, jargon, or no message at all | 191 191 - | 1 | Vague errors — "Something went wrong" with no guidance | 192 192 - | 2 | Clear but unhelpful — names the problem but not the fix | 193 193 - | 3 | Clear with suggestions — identifies problem and offers next steps | 194 194 - | 4 | Perfect recovery — pinpoints issue, suggests fix, preserves user work | 195 195 - 196 196 - ### 10. Help and Documentation 197 197 - 198 198 - Even if the system is usable without docs, help should be easy to find, task-focused, and concise. 199 199 - 200 200 - **Check for**: 201 201 - 202 202 - - Searchable help or documentation 203 203 - - Contextual help (tooltips, inline hints, guided tours) 204 204 - - Task-focused organization (not feature-organized) 205 205 - - Concise, scannable content 206 206 - - Easy access without leaving current context 207 207 - 208 208 - **Scoring**: 209 209 - | Score | Criteria | 210 210 - |-------|----------| 211 211 - | 0 | No help available anywhere | 212 212 - | 1 | Help exists but hard to find or irrelevant | 213 213 - | 2 | Basic help — FAQ or docs exist, not contextual | 214 214 - | 3 | Good documentation — searchable, mostly task-focused | 215 215 - | 4 | Excellent contextual help — right info at the right moment | 216 216 - 217 217 - --- 218 218 - 219 219 - ## Score Summary 220 220 - 221 221 - **Total possible**: 40 points (10 heuristics × 4 max) 222 222 - 223 223 - | Score Range | Rating | What It Means | 224 224 - | ----------- | ---------- | ------------------------------------------------------ | 225 225 - | 36–40 | Excellent | Minor polish only — ship it | 226 226 - | 28–35 | Good | Address weak areas, solid foundation | 227 227 - | 20–27 | Acceptable | Significant improvements needed before users are happy | 228 228 - | 12–19 | Poor | Major UX overhaul required — core experience broken | 229 229 - | 0–11 | Critical | Redesign needed — unusable in current state | 230 230 - 231 231 - --- 232 232 - 233 233 - ## Issue Severity (P0–P3) 234 234 - 235 235 - Tag each individual issue found during scoring with a priority level: 236 236 - 237 237 - | Priority | Name | Description | Action | 238 238 - | -------- | -------- | ------------------------------------------ | --------------------------------------- | 239 239 - | **P0** | Blocking | Prevents task completion entirely | Fix immediately — this is a showstopper | 240 240 - | **P1** | Major | Causes significant difficulty or confusion | Fix before release | 241 241 - | **P2** | Minor | Annoyance, but workaround exists | Fix in next pass | 242 242 - | **P3** | Polish | Nice-to-fix, no real user impact | Fix if time permits | 243 243 - 244 244 - **Tip**: If you're unsure between two levels, ask: "Would a user contact support about this?" If yes, it's at least P1.

-193

.agents/skills/critique/reference/personas.md

reviewed

··· 1 1 - # Persona-Based Design Testing 2 2 - 3 3 - Test the interface through the eyes of 5 distinct user archetypes. Each persona exposes different failure modes that a single "design director" perspective would miss. 4 4 - 5 5 - **How to use**: Select 2–3 personas most relevant to the interface being critiqued. Walk through the primary user action as each persona. Report specific red flags — not generic concerns. 6 6 - 7 7 - --- 8 8 - 9 9 - ## 1. Impatient Power User — "Alex" 10 10 - 11 11 - **Profile**: Expert with similar products. Expects efficiency, hates hand-holding. Will find shortcuts or leave. 12 12 - 13 13 - **Behaviors**: 14 14 - 15 15 - - Skips all onboarding and instructions 16 16 - - Looks for keyboard shortcuts immediately 17 17 - - Tries to bulk-select, batch-edit, and automate 18 18 - - Gets frustrated by required steps that feel unnecessary 19 19 - - Abandons if anything feels slow or patronizing 20 20 - 21 21 - **Test Questions**: 22 22 - 23 23 - - Can Alex complete the core task in under 60 seconds? 24 24 - - Are there keyboard shortcuts for common actions? 25 25 - - Can onboarding be skipped entirely? 26 26 - - Do modals have keyboard dismiss (Esc)? 27 27 - - Is there a "power user" path (shortcuts, bulk actions)? 28 28 - 29 29 - **Red Flags** (report these specifically): 30 30 - 31 31 - - Forced tutorials or unskippable onboarding 32 32 - - No keyboard navigation for primary actions 33 33 - - Slow animations that can't be skipped 34 34 - - One-item-at-a-time workflows where batch would be natural 35 35 - - Redundant confirmation steps for low-risk actions 36 36 - 37 37 - --- 38 38 - 39 39 - ## 2. Confused First-Timer — "Jordan" 40 40 - 41 41 - **Profile**: Never used this type of product. Needs guidance at every step. Will abandon rather than figure it out. 42 42 - 43 43 - **Behaviors**: 44 44 - 45 45 - - Reads all instructions carefully 46 46 - - Hesitates before clicking anything unfamiliar 47 47 - - Looks for help or support constantly 48 48 - - Misunderstands jargon and abbreviations 49 49 - - Takes the most literal interpretation of any label 50 50 - 51 51 - **Test Questions**: 52 52 - 53 53 - - Is the first action obviously clear within 5 seconds? 54 54 - - Are all icons labeled with text? 55 55 - - Is there contextual help at decision points? 56 56 - - Does terminology assume prior knowledge? 57 57 - - Is there a clear "back" or "undo" at every step? 58 58 - 59 59 - **Red Flags** (report these specifically): 60 60 - 61 61 - - Icon-only navigation with no labels 62 62 - - Technical jargon without explanation 63 63 - - No visible help option or guidance 64 64 - - Ambiguous next steps after completing an action 65 65 - - No confirmation that an action succeeded 66 66 - 67 67 - --- 68 68 - 69 69 - ## 3. Accessibility-Dependent User — "Sam" 70 70 - 71 71 - **Profile**: Uses screen reader (VoiceOver/NVDA), keyboard-only navigation. May have low vision, motor impairment, or cognitive differences. 72 72 - 73 73 - **Behaviors**: 74 74 - 75 75 - - Tabs through the interface linearly 76 76 - - Relies on ARIA labels and heading structure 77 77 - - Cannot see hover states or visual-only indicators 78 78 - - Needs adequate color contrast (4.5:1 minimum) 79 79 - - May use browser zoom up to 200% 80 80 - 81 81 - **Test Questions**: 82 82 - 83 83 - - Can the entire primary flow be completed keyboard-only? 84 84 - - Are all interactive elements focusable with visible focus indicators? 85 85 - - Do images have meaningful alt text? 86 86 - - Is color contrast WCAG AA compliant (4.5:1 for text)? 87 87 - - Does the screen reader announce state changes (loading, success, errors)? 88 88 - 89 89 - **Red Flags** (report these specifically): 90 90 - 91 91 - - Click-only interactions with no keyboard alternative 92 92 - - Missing or invisible focus indicators 93 93 - - Meaning conveyed by color alone (red = error, green = success) 94 94 - - Unlabeled form fields or buttons 95 95 - - Time-limited actions without extension option 96 96 - - Custom components that break screen reader flow 97 97 - 98 98 - --- 99 99 - 100 100 - ## 4. Deliberate Stress Tester — "Riley" 101 101 - 102 102 - **Profile**: Methodical user who pushes interfaces beyond the happy path. Tests edge cases, tries unexpected inputs, and probes for gaps in the experience. 103 103 - 104 104 - **Behaviors**: 105 105 - 106 106 - - Tests edge cases intentionally (empty states, long strings, special characters) 107 107 - - Submits forms with unexpected data (emoji, RTL text, very long values) 108 108 - - Tries to break workflows by navigating backwards, refreshing mid-flow, or opening in multiple tabs 109 109 - - Looks for inconsistencies between what the UI promises and what actually happens 110 110 - - Documents problems methodically 111 111 - 112 112 - **Test Questions**: 113 113 - 114 114 - - What happens at the edges (0 items, 1000 items, very long text)? 115 115 - - Do error states recover gracefully or leave the UI in a broken state? 116 116 - - What happens on refresh mid-workflow? Is state preserved? 117 117 - - Are there features that appear to work but produce broken results? 118 118 - - How does the UI handle unexpected input (emoji, special chars, paste from Excel)? 119 119 - 120 120 - **Red Flags** (report these specifically): 121 121 - 122 122 - - Features that appear to work but silently fail or produce wrong results 123 123 - - Error handling that exposes technical details or leaves UI in a broken state 124 124 - - Empty states that show nothing useful ("No results" with no guidance) 125 125 - - Workflows that lose user data on refresh or navigation 126 126 - - Inconsistent behavior between similar interactions in different parts of the UI 127 127 - 128 128 - --- 129 129 - 130 130 - ## 5. Distracted Mobile User — "Casey" 131 131 - 132 132 - **Profile**: Using phone one-handed on the go. Frequently interrupted. Possibly on a slow connection. 133 133 - 134 134 - **Behaviors**: 135 135 - 136 136 - - Uses thumb only — prefers bottom-of-screen actions 137 137 - - Gets interrupted mid-flow and returns later 138 138 - - Switches between apps frequently 139 139 - - Has limited attention span and low patience 140 140 - - Types as little as possible, prefers taps and selections 141 141 - 142 142 - **Test Questions**: 143 143 - 144 144 - - Are primary actions in the thumb zone (bottom half of screen)? 145 145 - - Is state preserved if the user leaves and returns? 146 146 - - Does it work on slow connections (3G)? 147 147 - - Can forms leverage autocomplete and smart defaults? 148 148 - - Are touch targets at least 44×44pt? 149 149 - 150 150 - **Red Flags** (report these specifically): 151 151 - 152 152 - - Important actions positioned at the top of the screen (unreachable by thumb) 153 153 - - No state persistence — progress lost on tab switch or interruption 154 154 - - Large text inputs required where selection would work 155 155 - - Heavy assets loading on every page (no lazy loading) 156 156 - - Tiny tap targets or targets too close together 157 157 - 158 158 - --- 159 159 - 160 160 - ## Selecting Personas 161 161 - 162 162 - Choose personas based on the interface type: 163 163 - 164 164 - | Interface Type | Primary Personas | Why | 165 165 - | ------------------------ | -------------------- | -------------------------------- | 166 166 - | Landing page / marketing | Jordan, Riley, Casey | First impressions, trust, mobile | 167 167 - | Dashboard / admin | Alex, Sam | Power users, accessibility | 168 168 - | E-commerce / checkout | Casey, Riley, Jordan | Mobile, edge cases, clarity | 169 169 - | Onboarding flow | Jordan, Casey | Confusion, interruption | 170 170 - | Data-heavy / analytics | Alex, Sam | Efficiency, keyboard nav | 171 171 - | Form-heavy / wizard | Jordan, Sam, Casey | Clarity, accessibility, mobile | 172 172 - 173 173 - --- 174 174 - 175 175 - ## Project-Specific Personas 176 176 - 177 177 - If `.github/copilot-instructions.md` contains a `## Design Context` section (generated by `impeccable teach`), derive 1–2 additional personas from the audience and brand information: 178 178 - 179 179 - 1. Read the target audience description 180 180 - 2. Identify the primary user archetype not covered by the 5 predefined personas 181 181 - 3. Create a persona following this template: 182 182 - 183 183 - ``` 184 184 - ### [Role] — "[Name]" 185 185 - 186 186 - **Profile**: [2-3 key characteristics derived from Design Context] 187 187 - 188 188 - **Behaviors**: [3-4 specific behaviors based on the described audience] 189 189 - 190 190 - **Red Flags**: [3-4 things that would alienate this specific user type] 191 191 - ``` 192 192 - 193 193 - Only generate project-specific personas when real Design Context data is available. Don't invent audience details — use the 5 predefined personas when no context exists.

-336

.agents/skills/delight/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: delight 3 3 - description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Delight Opportunities 18 18 - 19 19 - Identify where delight would enhance (not distract from) the experience: 20 20 - 21 21 - 1. **Find natural delight moments**: 22 22 - - **Success states**: Completed actions (save, send, publish) 23 23 - - **Empty states**: First-time experiences, onboarding 24 24 - - **Loading states**: Waiting periods that could be entertaining 25 25 - - **Achievements**: Milestones, streaks, completions 26 26 - - **Interactions**: Hover states, clicks, drags 27 27 - - **Errors**: Softening frustrating moments 28 28 - - **Easter eggs**: Hidden discoveries for curious users 29 29 - 30 30 - 2. **Understand the context**: 31 31 - - What's the brand personality? (Playful? Professional? Quirky? Elegant?) 32 32 - - Who's the audience? (Tech-savvy? Creative? Corporate?) 33 33 - - What's the emotional context? (Accomplishment? Exploration? Frustration?) 34 34 - - What's appropriate? (Banking app ≠ gaming app) 35 35 - 36 36 - 3. **Define delight strategy**: 37 37 - - **Subtle sophistication**: Refined micro-interactions (luxury brands) 38 38 - - **Playful personality**: Whimsical illustrations and copy (consumer apps) 39 39 - - **Helpful surprises**: Anticipating needs before users ask (productivity tools) 40 40 - - **Sensory richness**: Satisfying sounds, smooth animations (creative tools) 41 41 - 42 42 - If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. 43 43 - 44 44 - **CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far. 45 45 - 46 46 - ## Delight Principles 47 47 - 48 48 - Follow these guidelines: 49 49 - 50 50 - ### Delight Amplifies, Never Blocks 51 51 - 52 52 - - Delight moments should be quick (< 1 second) 53 53 - - Never delay core functionality for delight 54 54 - - Make delight skippable or subtle 55 55 - - Respect user's time and task focus 56 56 - 57 57 - ### Surprise and Discovery 58 58 - 59 59 - - Hide delightful details for users to discover 60 60 - - Reward exploration and curiosity 61 61 - - Don't announce every delight moment 62 62 - - Let users share discoveries with others 63 63 - 64 64 - ### Appropriate to Context 65 65 - 66 66 - - Match delight to emotional moment (celebrate success, empathize with errors) 67 67 - - Respect the user's state (don't be playful during critical errors) 68 68 - - Match brand personality and audience expectations 69 69 - - Cultural sensitivity (what's delightful varies by culture) 70 70 - 71 71 - ### Compound Over Time 72 72 - 73 73 - - Delight should remain fresh with repeated use 74 74 - - Vary responses (not same animation every time) 75 75 - - Reveal deeper layers with continued use 76 76 - - Build anticipation through patterns 77 77 - 78 78 - ## Delight Techniques 79 79 - 80 80 - Add personality and joy through these methods: 81 81 - 82 82 - ### Micro-interactions & Animation 83 83 - 84 84 - **Button delight**: 85 85 - 86 86 - ```css 87 87 - /* Satisfying button press */ 88 88 - .button { 89 89 - transition: 90 90 - transform 0.1s, 91 91 - box-shadow 0.1s; 92 92 - } 93 93 - .button:active { 94 94 - transform: translateY(2px); 95 95 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 96 96 - } 97 97 - 98 98 - /* Ripple effect on click */ 99 99 - /* Smooth lift on hover */ 100 100 - .button:hover { 101 101 - transform: translateY(-2px); 102 102 - transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ 103 103 - } 104 104 - ``` 105 105 - 106 106 - **Loading delight**: 107 107 - 108 108 - - Playful loading animations (not just spinners) 109 109 - - Personality in loading messages (write product-specific ones, not generic AI filler) 110 110 - - Progress indication with encouraging messages 111 111 - - Skeleton screens with subtle animations 112 112 - 113 113 - **Success animations**: 114 114 - 115 115 - - Checkmark draw animation 116 116 - - Confetti burst for major achievements 117 117 - - Gentle scale + fade for confirmation 118 118 - - Satisfying sound effects (subtle) 119 119 - 120 120 - **Hover surprises**: 121 121 - 122 122 - - Icons that animate on hover 123 123 - - Color shifts or glow effects 124 124 - - Tooltip reveals with personality 125 125 - - Cursor changes (custom cursors for branded experiences) 126 126 - 127 127 - ### Personality in Copy 128 128 - 129 129 - **Playful error messages**: 130 130 - 131 131 - ``` 132 132 - "Error 404" 133 133 - "This page is playing hide and seek. (And winning)" 134 134 - 135 135 - "Connection failed" 136 136 - "Looks like the internet took a coffee break. Want to retry?" 137 137 - ``` 138 138 - 139 139 - **Encouraging empty states**: 140 140 - 141 141 - ``` 142 142 - "No projects" 143 143 - "Your canvas awaits. Create something amazing." 144 144 - 145 145 - "No messages" 146 146 - "Inbox zero! You're crushing it today." 147 147 - ``` 148 148 - 149 149 - **Playful labels & tooltips**: 150 150 - 151 151 - ``` 152 152 - "Delete" 153 153 - "Send to void" (for playful brand) 154 154 - 155 155 - "Help" 156 156 - "Rescue me" (tooltip) 157 157 - ``` 158 158 - 159 159 - **IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm. 160 160 - 161 161 - ### Illustrations & Visual Personality 162 162 - 163 163 - **Custom illustrations**: 164 164 - 165 165 - - Empty state illustrations (not stock icons) 166 166 - - Error state illustrations (friendly monsters, quirky characters) 167 167 - - Loading state illustrations (animated characters) 168 168 - - Success state illustrations (celebrations) 169 169 - 170 170 - **Icon personality**: 171 171 - 172 172 - - Custom icon set matching brand personality 173 173 - - Animated icons (subtle motion on hover/click) 174 174 - - Illustrative icons (more detailed than generic) 175 175 - - Consistent style across all icons 176 176 - 177 177 - **Background effects**: 178 178 - 179 179 - - Subtle particle effects 180 180 - - Gradient mesh backgrounds 181 181 - - Geometric patterns 182 182 - - Parallax depth 183 183 - - Time-of-day themes (morning vs night) 184 184 - 185 185 - ### Satisfying Interactions 186 186 - 187 187 - **Drag and drop delight**: 188 188 - 189 189 - - Lift effect on drag (shadow, scale) 190 190 - - Snap animation when dropped 191 191 - - Satisfying placement sound 192 192 - - Undo toast ("Dropped in wrong place? [Undo]") 193 193 - 194 194 - **Toggle switches**: 195 195 - 196 196 - - Smooth slide with spring physics 197 197 - - Color transition 198 198 - - Haptic feedback on mobile 199 199 - - Optional sound effect 200 200 - 201 201 - **Progress & achievements**: 202 202 - 203 203 - - Streak counters with celebratory milestones 204 204 - - Progress bars that "celebrate" at 100% 205 205 - - Badge unlocks with animation 206 206 - - Playful stats ("You're on fire! 5 days in a row") 207 207 - 208 208 - **Form interactions**: 209 209 - 210 210 - - Input fields that animate on focus 211 211 - - Checkboxes with a satisfying scale pulse when checked 212 212 - - Success state that celebrates valid input 213 213 - - Auto-grow textareas 214 214 - 215 215 - ### Sound Design 216 216 - 217 217 - **Subtle audio cues** (when appropriate): 218 218 - 219 219 - - Notification sounds (distinctive but not annoying) 220 220 - - Success sounds (satisfying "ding") 221 221 - - Error sounds (empathetic, not harsh) 222 222 - - Typing sounds for chat/messaging 223 223 - - Ambient background audio (very subtle) 224 224 - 225 225 - **IMPORTANT**: 226 226 - 227 227 - - Respect system sound settings 228 228 - - Provide mute option 229 229 - - Keep volumes quiet (subtle cues, not alarms) 230 230 - - Don't play on every interaction (sound fatigue is real) 231 231 - 232 232 - ### Easter Eggs & Hidden Delights 233 233 - 234 234 - **Discovery rewards**: 235 235 - 236 236 - - Konami code unlocks special theme 237 237 - - Hidden keyboard shortcuts (Cmd+K for special features) 238 238 - - Hover reveals on logos or illustrations 239 239 - - Alt text jokes on images (for screen reader users too!) 240 240 - - Console messages for developers ("Like what you see? We're hiring!") 241 241 - 242 242 - **Seasonal touches**: 243 243 - 244 244 - - Holiday themes (subtle, tasteful) 245 245 - - Seasonal color shifts 246 246 - - Weather-based variations 247 247 - - Time-based changes (dark at night, light during day) 248 248 - 249 249 - **Contextual personality**: 250 250 - 251 251 - - Different messages based on time of day 252 252 - - Responses to specific user actions 253 253 - - Randomized variations (not same every time) 254 254 - - Progressive reveals with continued use 255 255 - 256 256 - ### Loading & Waiting States 257 257 - 258 258 - **Make waiting engaging**: 259 259 - 260 260 - - Interesting loading messages that rotate 261 261 - - Progress bars with personality 262 262 - - Mini-games during long loads 263 263 - - Fun facts or tips while waiting 264 264 - - Countdown with encouraging messages 265 265 - 266 266 - ``` 267 267 - Loading messages — write ones specific to your product, not generic AI filler: 268 268 - - "Crunching your latest numbers..." 269 269 - - "Syncing with your team's changes..." 270 270 - - "Preparing your dashboard..." 271 271 - - "Checking for updates since yesterday..." 272 272 - ``` 273 273 - 274 274 - **WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does. 275 275 - 276 276 - ### Celebration Moments 277 277 - 278 278 - **Success celebrations**: 279 279 - 280 280 - - Confetti for major milestones 281 281 - - Animated checkmarks for completions 282 282 - - Progress bar celebrations at 100% 283 283 - - "Achievement unlocked" style notifications 284 284 - - Personalized messages ("You published your 10th article!") 285 285 - 286 286 - **Milestone recognition**: 287 287 - 288 288 - - First-time actions get special treatment 289 289 - - Streak tracking and celebration 290 290 - - Progress toward goals 291 291 - - Anniversary celebrations 292 292 - 293 293 - ## Implementation Patterns 294 294 - 295 295 - **Animation libraries**: 296 296 - 297 297 - - Framer Motion (React) 298 298 - - GSAP (universal) 299 299 - - Lottie (After Effects animations) 300 300 - - Canvas confetti (party effects) 301 301 - 302 302 - **Sound libraries**: 303 303 - 304 304 - - Howler.js (audio management) 305 305 - - Use-sound (React hook) 306 306 - 307 307 - **Physics libraries**: 308 308 - 309 309 - - React Spring (spring physics) 310 310 - - Popmotion (animation primitives) 311 311 - 312 312 - **IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features. 313 313 - 314 314 - **NEVER**: 315 315 - 316 316 - - Delay core functionality for delight 317 317 - - Force users through delightful moments (make skippable) 318 318 - - Use delight to hide poor UX 319 319 - - Overdo it (less is more) 320 320 - - Ignore accessibility (animate responsibly, provide alternatives) 321 321 - - Make every interaction delightful (special moments should be special) 322 322 - - Sacrifice performance for delight 323 323 - - Be inappropriate for context (read the room) 324 324 - 325 325 - ## Verify Delight Quality 326 326 - 327 327 - Test that delight actually delights: 328 328 - 329 329 - - **User reactions**: Do users smile? Share screenshots? 330 330 - - **Doesn't annoy**: Still pleasant after 100th time? 331 331 - - **Doesn't block**: Can users opt out or skip? 332 332 - - **Performant**: No jank, no slowdown 333 333 - - **Appropriate**: Matches brand and context 334 334 - - **Accessible**: Works with reduced motion, screen readers 335 335 - 336 336 - Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.

-130

.agents/skills/distill/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: distill 3 3 - description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Current State 18 18 - 19 19 - Analyze what makes the design feel complex or cluttered: 20 20 - 21 21 - 1. **Identify complexity sources**: 22 22 - - **Too many elements**: Competing buttons, redundant information, visual clutter 23 23 - - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose 24 24 - - **Information overload**: Everything visible at once, no progressive disclosure 25 25 - - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations 26 26 - - **Confusing hierarchy**: Unclear what matters most 27 27 - - **Feature creep**: Too many options, actions, or paths forward 28 28 - 29 29 - 2. **Find the essence**: 30 30 - - What's the primary user goal? (There should be ONE) 31 31 - - What's actually necessary vs nice-to-have? 32 32 - - What can be removed, hidden, or combined? 33 33 - - What's the 20% that delivers 80% of value? 34 34 - 35 35 - If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. 36 36 - 37 37 - **CRITICAL**: Simplicity is not about removing features - it's about removing obstacles between users and their goals. Every element should justify its existence. 38 38 - 39 39 - ## Plan Simplification 40 40 - 41 41 - Create a ruthless editing strategy: 42 42 - 43 43 - - **Core purpose**: What's the ONE thing this should accomplish? 44 44 - - **Essential elements**: What's truly necessary to achieve that purpose? 45 45 - - **Progressive disclosure**: What can be hidden until needed? 46 46 - - **Consolidation opportunities**: What can be combined or integrated? 47 47 - 48 48 - **IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless. 49 49 - 50 50 - ## Simplify the Design 51 51 - 52 52 - Systematically remove complexity across these dimensions: 53 53 - 54 54 - ### Information Architecture 55 55 - 56 56 - - **Reduce scope**: Remove secondary actions, optional features, redundant information 57 57 - - **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows) 58 58 - - **Combine related actions**: Merge similar buttons, consolidate forms, group related content 59 59 - - **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden 60 60 - - **Remove redundancy**: If it's said elsewhere, don't repeat it here 61 61 - 62 62 - ### Visual Simplification 63 63 - 64 64 - - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors 65 65 - - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights 66 66 - - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function 67 67 - - **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards 68 68 - - **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead 69 69 - - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps 70 70 - 71 71 - ### Layout Simplification 72 72 - 73 73 - - **Linear flow**: Replace complex grids with simple vertical flow where possible 74 74 - - **Remove sidebars**: Move secondary content inline or hide it 75 75 - - **Full-width**: Use available space generously instead of complex multi-column layouts 76 76 - - **Consistent alignment**: Pick left or center, stick with it 77 77 - - **Generous white space**: Let content breathe, don't pack everything tight 78 78 - 79 79 - ### Interaction Simplification 80 80 - 81 81 - - **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real) 82 82 - - **Smart defaults**: Make common choices automatic, only ask when necessary 83 83 - - **Inline actions**: Replace modal flows with inline editing where possible 84 84 - - **Remove steps**: Can signup be one step instead of three? Can checkout be simplified? 85 85 - - **Clear CTAs**: ONE obvious next step, not five competing actions 86 86 - 87 87 - ### Content Simplification 88 88 - 89 89 - - **Shorter copy**: Cut every sentence in half, then do it again 90 90 - - **Active voice**: "Save changes" not "Changes will be saved" 91 91 - - **Remove jargon**: Plain language always wins 92 92 - - **Scannable structure**: Short paragraphs, bullet points, clear headings 93 93 - - **Essential information only**: Remove marketing fluff, legalese, hedging 94 94 - - **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once 95 95 - 96 96 - ### Code Simplification 97 97 - 98 98 - - **Remove unused code**: Dead CSS, unused components, orphaned files 99 99 - - **Flatten component trees**: Reduce nesting depth 100 100 - - **Consolidate styles**: Merge similar styles, use utilities consistently 101 101 - - **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases? 102 102 - 103 103 - **NEVER**: 104 104 - 105 105 - - Remove necessary functionality (simplicity ≠ feature-less) 106 106 - - Sacrifice accessibility for simplicity (clear labels and ARIA still required) 107 107 - - Make things so simple they're unclear (mystery ≠ minimalism) 108 108 - - Remove information users need to make decisions 109 109 - - Eliminate hierarchy completely (some things should stand out) 110 110 - - Oversimplify complex domains (match complexity to actual task complexity) 111 111 - 112 112 - ## Verify Simplification 113 113 - 114 114 - Ensure simplification improves usability: 115 115 - 116 116 - - **Faster task completion**: Can users accomplish goals more quickly? 117 117 - - **Reduced cognitive load**: Is it easier to understand what to do? 118 118 - - **Still complete**: Are all necessary features still accessible? 119 119 - - **Clearer hierarchy**: Is it obvious what matters most? 120 120 - - **Better performance**: Does simpler design load faster? 121 121 - 122 122 - ## Document Removed Complexity 123 123 - 124 124 - If you removed features or options: 125 125 - 126 126 - - Document why they were removed 127 127 - - Consider if they need alternative access points 128 128 - - Note any user feedback to monitor 129 129 - 130 130 - Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."

-370

.agents/skills/impeccable/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: impeccable 3 3 - description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[craft|teach|extract]" 7 7 - license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. 8 8 - --- 9 9 - 10 10 - This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. 11 11 - 12 12 - ## Context Gathering Protocol 13 13 - 14 14 - Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. 15 15 - 16 16 - **Required context** (every design skill needs at minimum): 17 17 - 18 18 - - **Target audience**: Who uses this product and in what context? 19 19 - - **Use cases**: What jobs are they trying to get done? 20 20 - - **Brand personality/tone**: How should the interface feel? 21 21 - 22 22 - Individual skills may require additional context. Check the skill's preparation section for specifics. 23 23 - 24 24 - **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. 25 25 - 26 26 - **Gathering order:** 27 27 - 28 28 - 1. **Check current instructions (instant)**: If your loaded instructions already contain a **Design Context** section, proceed immediately. 29 29 - 2. **Check .impeccable.md (fast)**: If not in instructions, read `.impeccable.md` from the project root. If it exists and contains the required context, proceed. 30 30 - 3. **Run impeccable teach (REQUIRED)**: If neither source has context, you MUST run /impeccable teach NOW before doing anything else. Do NOT skip this step. Do NOT attempt to infer context from the codebase instead. 31 31 - 32 32 - --- 33 33 - 34 34 - ## Design Direction 35 35 - 36 36 - Commit to a BOLD aesthetic direction: 37 37 - 38 38 - - **Purpose**: What problem does this interface solve? Who uses it? 39 39 - - **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. 40 40 - - **Constraints**: Technical requirements (framework, performance, accessibility). 41 41 - - **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember? 42 42 - 43 43 - **CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work. The key is intentionality, not intensity. 44 44 - 45 45 - Then implement working code that is: 46 46 - 47 47 - - Production-grade and functional 48 48 - - Visually striking and memorable 49 49 - - Cohesive with a clear aesthetic point-of-view 50 50 - - Meticulously refined in every detail 51 51 - 52 52 - ## Frontend Aesthetics Guidelines 53 53 - 54 54 - ### Typography 55 55 - 56 56 - → _Consult [typography reference](reference/typography.md) for OpenType features, web font loading, and the deeper material on scales._ 57 57 - 58 58 - Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. 59 59 - 60 60 - <typography_principles> 61 61 - Always apply these — do not consult a reference, just do them: 62 62 - 63 63 - - Use a modular type scale with fluid sizing (clamp) for headings on marketing/content pages. Use fixed `rem` scales for app UIs and dashboards (no major design system uses fluid type in product UI). 64 64 - - Use fewer sizes with more contrast. A 5-step scale with at least a 1.25 ratio between steps creates clearer hierarchy than 8 sizes that are 1.1× apart. 65 65 - - Line-height scales inversely with line length. Narrow columns want tighter leading, wide columns want more. For light text on dark backgrounds, ADD 0.05-0.1 to your normal line-height — light type reads as lighter weight and needs more breathing room. 66 66 - - Cap line length at ~65-75ch. Body text wider than that is fatiguing. 67 67 - </typography_principles> 68 68 - 69 69 - <font_selection_procedure> 70 70 - DO THIS BEFORE TYPING ANY FONT NAME. 71 71 - 72 72 - The model's natural failure mode is "I was told not to use Inter, so I will pick my next favorite font, which becomes the new monoculture." Avoid this by performing the following procedure on every project, in order: 73 73 - 74 74 - Step 1. Read the brief once. Write down 3 concrete words for the brand voice (e.g., "warm and mechanical and opinionated", "calm and clinical and careful", "fast and dense and unimpressed", "handmade and a little weird"). NOT "modern" or "elegant" — those are dead categories. 75 75 - 76 76 - Step 2. List the 3 fonts you would normally reach for given those words. Write them down. They are most likely from this list: 77 77 - 78 78 - <reflex_fonts_to_reject> 79 79 - Fraunces 80 80 - Newsreader 81 81 - Lora 82 82 - Crimson 83 83 - Crimson Pro 84 84 - Crimson Text 85 85 - Playfair Display 86 86 - Cormorant 87 87 - Cormorant Garamond 88 88 - Syne 89 89 - IBM Plex Mono 90 90 - IBM Plex Sans 91 91 - IBM Plex Serif 92 92 - Space Mono 93 93 - Space Grotesk 94 94 - Inter 95 95 - DM Sans 96 96 - DM Serif Display 97 97 - DM Serif Text 98 98 - Outfit 99 99 - Plus Jakarta Sans 100 100 - Instrument Sans 101 101 - Instrument Serif 102 102 - </reflex_fonts_to_reject> 103 103 - 104 104 - Reject every font that appears in the reflex_fonts_to_reject list. They are your training-data defaults and they create monoculture across projects. 105 105 - 106 106 - Step 3. Browse a font catalog with the 3 brand words in mind. Sources: Google Fonts, Pangram Pangram, Future Fonts, Adobe Fonts, ABC Dinamo, Klim Type Foundry, Velvetyne. Look for something that fits the brand as a _physical object_ — a museum exhibit caption, a hand-painted shop sign, a 1970s mainframe terminal manual, a fabric label on the inside of a coat, a children's book printed on cheap newsprint. Reject the first thing that "looks designy" — that's the trained reflex too. Keep looking. 107 107 - 108 108 - Step 4. Cross-check the result. The right font for an "elegant" brief is NOT necessarily a serif. The right font for a "technical" brief is NOT necessarily a sans-serif. The right font for a "warm" brief is NOT Fraunces. If your final pick lines up with your reflex pattern, go back to Step 3. 109 109 - </font_selection_procedure> 110 110 - 111 111 - <typography_rules> 112 112 - DO use a modular type scale with fluid sizing (clamp) on headings. 113 113 - DO vary font weights and sizes to create clear visual hierarchy. 114 114 - DO vary your font choices across projects. If you used a serif display font on the last project, look for a sans, monospace, or display face on this one. 115 115 - 116 116 - DO NOT use overused fonts like Inter, Roboto, Arial, Open Sans, or system defaults — but also do not simply switch to your second-favorite. Every font in the reflex_fonts_to_reject list above is banned. Look further. 117 117 - DO NOT use monospace typography as lazy shorthand for "technical/developer" vibes. 118 118 - DO NOT put large icons with rounded corners above every heading. They rarely add value and make sites look templated. 119 119 - DO NOT use only one font family for the entire page. Pair a distinctive display font with a refined body font. 120 120 - DO NOT use a flat type hierarchy where sizes are too close together. Aim for at least a 1.25 ratio between steps. 121 121 - DO NOT set long body passages in uppercase. Reserve all-caps for short labels and headings. 122 122 - </typography_rules> 123 123 - 124 124 - ### Color & Theme 125 125 - 126 126 - → _Consult [color reference](reference/color-and-contrast.md) for the deeper material on contrast, accessibility, and palette construction._ 127 127 - 128 128 - Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. 129 129 - 130 130 - <color_principles> 131 131 - Always apply these — do not consult a reference, just do them: 132 132 - 133 133 - - Use OKLCH, not HSL. OKLCH is perceptually uniform: equal steps in lightness _look_ equal, which HSL does not deliver. As you move toward white or black, REDUCE chroma — high chroma at extreme lightness looks garish. A light blue at 85% lightness wants ~0.08 chroma, not the 0.15 of your base color. 134 134 - - Tint your neutrals toward your brand hue. Even a chroma of 0.005-0.01 is perceptible and creates subconscious cohesion between brand color and UI surfaces. The hue you tint toward should come from THIS brand, not from a "warm = friendly" or "cool = tech" formula. Pick the brand's actual hue first, then tint everything toward it. 135 135 - - The 60-30-10 rule is about visual _weight_, not pixel count. 60% neutral / surface, 30% secondary text and borders, 10% accent. Accents work BECAUSE they're rare. Overuse kills their power. 136 136 - </color_principles> 137 137 - 138 138 - <theme_selection> 139 139 - Theme (light vs dark) should be DERIVED from audience and viewing context, not picked from a default. Read the brief and ask: when is this product used, by whom, in what physical setting? 140 140 - 141 141 - - A perp DEX consumed during fast trading sessions → dark 142 142 - - A hospital portal consumed by anxious patients on phones late at night → light 143 143 - - A children's reading app → light 144 144 - - A vintage motorcycle forum where users sit in their garage at 9pm → dark 145 145 - - An observability dashboard for SREs in a dark office → dark 146 146 - - A wedding planning checklist for couples on a Sunday morning → light 147 147 - - A music player app for headphone listening at night → dark 148 148 - - A food magazine homepage browsed during a coffee break → light 149 149 - 150 150 - Do not default everything to light "to play it safe." Do not default everything to dark "to look cool." Both defaults are the lazy reflex. The correct theme is the one the actual user wants in their actual context. 151 151 - </theme_selection> 152 152 - 153 153 - <color_rules> 154 154 - DO use modern CSS color functions (oklch, color-mix, light-dark) for perceptually uniform, maintainable palettes. 155 155 - DO tint your neutrals toward your brand hue. Even a subtle hint creates subconscious cohesion. 156 156 - 157 157 - DO NOT use gray text on colored backgrounds; it looks washed out. Use a shade of the background color instead. 158 158 - DO NOT use pure black (#000) or pure white (#fff). Always tint; pure black/white never appears in nature. 159 159 - DO NOT use the AI color palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds. 160 160 - DO NOT use gradient text for impact — see <absolute_bans> below for the strict definition. Solid colors only for text. 161 161 - DO NOT default to dark mode with glowing accents. It looks "cool" without requiring actual design decisions. 162 162 - DO NOT default to light mode "to be safe" either. The point is to choose, not to retreat to a safe option. 163 163 - </color_rules> 164 164 - 165 165 - ### Layout & Space 166 166 - 167 167 - → _Consult [spatial reference](reference/spatial-design.md) for the deeper material on grids, container queries, and optical adjustments._ 168 168 - 169 169 - Create visual rhythm through varied spacing, not the same padding everywhere. Embrace asymmetry and unexpected compositions. Break the grid intentionally for emphasis. 170 170 - 171 171 - <spatial_principles> 172 172 - Always apply these — do not consult a reference, just do them: 173 173 - 174 174 - - Use a 4pt spacing scale with semantic token names (`--space-sm`, `--space-md`), not pixel-named (`--spacing-8`). Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96. 8pt is too coarse — you'll often want 12px between two values. 175 175 - - Use `gap` instead of margins for sibling spacing. It eliminates margin collapse and the cleanup hacks that come with it. 176 176 - - Vary spacing for hierarchy. A heading with extra space above it reads as more important — make use of that. Don't apply the same padding everywhere. 177 177 - - Self-adjusting grid pattern: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))` is the breakpoint-free responsive grid for card-style content. 178 178 - - Container queries are for components, viewport queries are for page layout. A card in a sidebar should adapt to the sidebar's width, not the viewport's. 179 179 - </spatial_principles> 180 180 - 181 181 - <spatial_rules> 182 182 - DO create visual rhythm through varied spacing: tight groupings, generous separations. 183 183 - DO use fluid spacing with clamp() that breathes on larger screens. 184 184 - DO use asymmetry and unexpected compositions; break the grid intentionally for emphasis. 185 185 - 186 186 - DO NOT wrap everything in cards. Not everything needs a container. 187 187 - DO NOT nest cards inside cards. Visual noise; flatten the hierarchy. 188 188 - DO NOT use identical card grids (same-sized cards with icon + heading + text, repeated endlessly). 189 189 - DO NOT use the hero metric layout template (big number, small label, supporting stats, gradient accent). 190 190 - DO NOT center everything. Left-aligned text with asymmetric layouts feels more designed. 191 191 - DO NOT use the same spacing everywhere. Without rhythm, layouts feel monotonous. 192 192 - DO NOT let body text wrap beyond ~80 characters per line. Add a max-width like 65–75ch so the eye can track easily. 193 193 - </spatial_rules> 194 194 - 195 195 - ### Visual Details 196 196 - 197 197 - <absolute_bans> 198 198 - These CSS patterns are NEVER acceptable. They are the most recognizable AI design tells. Match-and-refuse: if you find yourself about to write any of these, stop and rewrite the element with a different structure entirely. 199 199 - 200 200 - BAN 1: Side-stripe borders on cards/list items/callouts/alerts 201 201 - 202 202 - - PATTERN: `border-left:` or `border-right:` with width greater than 1px 203 203 - - INCLUDES: hard-coded colors AND CSS variables 204 204 - - FORBIDDEN: `border-left: 3px solid red`, `border-left: 4px solid #ff0000`, `border-left: 4px solid var(--color-warning)`, `border-left: 5px solid oklch(...)`, etc. 205 205 - - WHY: this is the single most overused "design touch" in admin, dashboard, and medical UIs. It never looks intentional regardless of color, radius, opacity, or whether the variable name is "primary" or "warning" or "accent." 206 206 - - REWRITE: use a different element structure entirely. Do not just swap to box-shadow inset. Reach for full borders, background tints, leading numbers/icons, or no visual indicator at all. 207 207 - 208 208 - BAN 2: Gradient text 209 209 - 210 210 - - PATTERN: `background-clip: text` (or `-webkit-background-clip: text`) combined with a gradient background 211 211 - - FORBIDDEN: any combination that makes text fill come from a `linear-gradient`, `radial-gradient`, or `conic-gradient` 212 212 - - WHY: gradient text is decorative rather than meaningful and is one of the top three AI design tells 213 213 - - REWRITE: use a single solid color for text. If you want emphasis, use weight or size, not gradient fill. 214 214 - </absolute_bans> 215 215 - 216 216 - DO: Use intentional, purposeful decorative elements that reinforce brand. 217 217 - DO NOT: Use border-left or border-right greater than 1px as a colored accent stripe on cards, list items, callouts, or alerts. See <absolute_bans> above for the strict CSS pattern. 218 218 - DO NOT: Use glassmorphism everywhere (blur effects, glass cards, glow borders used decoratively rather than purposefully). 219 219 - DO NOT: Use sparklines as decoration. Tiny charts that look sophisticated but convey nothing meaningful. 220 220 - DO NOT: Use rounded rectangles with generic drop shadows. Safe, forgettable, could be any AI output. 221 221 - DO NOT: Use modals unless there's truly no better alternative. Modals are lazy. 222 222 - 223 223 - ### Motion 224 224 - 225 225 - → _Consult [motion reference](reference/motion-design.md) for timing, easing, and reduced motion._ 226 226 - 227 227 - Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. 228 228 - 229 229 - **DO**: Use motion to convey state changes: entrances, exits, feedback 230 230 - **DO**: Use exponential easing (ease-out-quart/quint/expo) for natural deceleration 231 231 - **DO**: For height animations, use grid-template-rows transitions instead of animating height directly 232 232 - **DON'T**: Animate layout properties (width, height, padding, margin). Use transform and opacity only 233 233 - **DON'T**: Use bounce or elastic easing. They feel dated and tacky; real objects decelerate smoothly 234 234 - 235 235 - ### Interaction 236 236 - 237 237 - → _Consult [interaction reference](reference/interaction-design.md) for forms, focus, and loading patterns._ 238 238 - 239 239 - Make interactions feel fast. Use optimistic UI: update immediately, sync later. 240 240 - 241 241 - **DO**: Use progressive disclosure. Start simple, reveal sophistication through interaction (basic options first, advanced behind expandable sections; hover states that reveal secondary actions) 242 242 - **DO**: Design empty states that teach the interface, not just say "nothing here" 243 243 - **DO**: Make every interactive surface feel intentional and responsive 244 244 - **DON'T**: Repeat the same information (redundant headers, intros that restate the heading) 245 245 - **DON'T**: Make every button primary. Use ghost buttons, text links, secondary styles; hierarchy matters 246 246 - 247 247 - ### Responsive 248 248 - 249 249 - → _Consult [responsive reference](reference/responsive-design.md) for mobile-first, fluid design, and container queries._ 250 250 - 251 251 - **DO**: Use container queries (@container) for component-level responsiveness 252 252 - **DO**: Adapt the interface for different contexts, not just shrink it 253 253 - **DON'T**: Hide critical functionality on mobile. Adapt the interface, don't amputate it 254 254 - 255 255 - ### UX Writing 256 256 - 257 257 - → _Consult [ux-writing reference](reference/ux-writing.md) for labels, errors, and empty states._ 258 258 - 259 259 - **DO**: Make every word earn its place 260 260 - **DON'T**: Repeat information users can already see 261 261 - 262 262 - --- 263 263 - 264 264 - ## The AI Slop Test 265 265 - 266 266 - **Critical quality check**: If you showed this interface to someone and said "AI made this," would they believe you immediately? If yes, that's the problem. 267 267 - 268 268 - A distinctive interface should make someone ask "how was this made?" not "which AI made this?" 269 269 - 270 270 - Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. 271 271 - 272 272 - --- 273 273 - 274 274 - ## Implementation Principles 275 275 - 276 276 - Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. 277 277 - 278 278 - Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices across generations. 279 279 - 280 280 - Remember: the model is capable of extraordinary creative work. Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. 281 281 - 282 282 - --- 283 283 - 284 284 - ## Craft Mode 285 285 - 286 286 - If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. 287 287 - 288 288 - --- 289 289 - 290 290 - ## Teach Mode 291 291 - 292 292 - If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. 293 293 - 294 294 - ### Step 1: Explore the Codebase 295 295 - 296 296 - Before asking questions, thoroughly scan the project to discover what you can: 297 297 - 298 298 - - **README and docs**: Project purpose, target audience, any stated goals 299 299 - - **Package.json / config files**: Tech stack, dependencies, existing design libraries 300 300 - - **Existing components**: Current design patterns, spacing, typography in use 301 301 - - **Brand assets**: Logos, favicons, color values already defined 302 302 - - **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales 303 303 - - **Any style guides or brand documentation** 304 304 - 305 305 - Note what you've learned and what remains unclear. 306 306 - 307 307 - ### Step 2: Ask UX-Focused Questions 308 308 - 309 309 - ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: 310 310 - 311 311 - #### Users & Purpose 312 312 - 313 313 - - Who uses this? What's their context when using it? 314 314 - - What job are they trying to get done? 315 315 - - What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) 316 316 - 317 317 - #### Brand & Personality 318 318 - 319 319 - - How would you describe the brand personality in 3 words? 320 320 - - Any reference sites or apps that capture the right feel? What specifically about them? 321 321 - - What should this explicitly NOT look like? Any anti-references? 322 322 - 323 323 - #### Aesthetic Preferences 324 324 - 325 325 - - Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) 326 326 - - Light mode, dark mode, or both? 327 327 - - Any colors that must be used or avoided? 328 328 - 329 329 - #### Accessibility & Inclusion 330 330 - 331 331 - - Specific accessibility requirements? (WCAG level, known user needs) 332 332 - - Considerations for reduced motion, color blindness, or other accommodations? 333 333 - 334 334 - Skip questions where the answer is already clear from the codebase exploration. 335 335 - 336 336 - ### Step 3: Write Design Context 337 337 - 338 338 - Synthesize your findings and the user's answers into a `## Design Context` section: 339 339 - 340 340 - ```markdown 341 341 - ## Design Context 342 342 - 343 343 - ### Users 344 344 - 345 345 - [Who they are, their context, the job to be done] 346 346 - 347 347 - ### Brand Personality 348 348 - 349 349 - [Voice, tone, 3-word personality, emotional goals] 350 350 - 351 351 - ### Aesthetic Direction 352 352 - 353 353 - [Visual tone, references, anti-references, theme] 354 354 - 355 355 - ### Design Principles 356 356 - 357 357 - [3-5 principles derived from the conversation that should guide all design decisions] 358 358 - ``` 359 359 - 360 360 - Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. 361 361 - 362 362 - Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .github/copilot-instructions.md. If yes, append or update the section there as well. 363 363 - 364 364 - Confirm completion and summarize the key design principles that will now guide all future work. 365 365 - 366 366 - --- 367 367 - 368 368 - ## Extract Mode 369 369 - 370 370 - If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target.

-105

.agents/skills/impeccable/reference/color-and-contrast.md

reviewed

··· 1 1 - # Color & Contrast 2 2 - 3 3 - ## Color Spaces: Use OKLCH 4 4 - 5 5 - **Stop using HSL.** Use OKLCH (or LCH) instead. It's perceptually uniform, meaning equal steps in lightness _look_ equal—unlike HSL where 50% lightness in yellow looks bright while 50% in blue looks dark. 6 6 - 7 7 - The OKLCH function takes three components: `oklch(lightness chroma hue)` where lightness is 0-100%, chroma is roughly 0-0.4, and hue is 0-360. To build a primary color and its lighter / darker variants, hold the chroma+hue roughly constant and vary the lightness — but **reduce chroma as you approach white or black**, because high chroma at extreme lightness looks garish. 8 8 - 9 9 - The hue you pick is a brand decision and should not come from a default. Do not reach for blue (hue 250) or warm orange (hue 60) by reflex — those are the dominant AI-design defaults, not the right answer for any specific brand. 10 10 - 11 11 - ## Building Functional Palettes 12 12 - 13 13 - ### Tinted Neutrals 14 14 - 15 15 - **Pure gray is dead.** A neutral with zero chroma feels lifeless next to a colored brand. Add a tiny chroma value (0.005-0.015) to all your neutrals, hued toward whatever your brand color is. The chroma is small enough not to read as "tinted" consciously, but it creates subconscious cohesion between brand color and UI surfaces. 16 16 - 17 17 - The hue you tint toward should come from THIS project's brand, not from a "warm = friendly, cool = tech" formula. If your brand color is teal, your neutrals lean toward teal. If your brand color is amber, they lean toward amber. The point is cohesion with the SPECIFIC brand, not a stock palette. 18 18 - 19 19 - **Avoid** the trap of always tinting toward warm orange or always tinting toward cool blue. Those are the two laziest defaults and they create their own monoculture across projects. 20 20 - 21 21 - ### Palette Structure 22 22 - 23 23 - A complete system needs: 24 24 - 25 25 - | Role | Purpose | Example | 26 26 - | ------------ | ----------------------------- | ------------------------- | 27 27 - | **Primary** | Brand, CTAs, key actions | 1 color, 3-5 shades | 28 28 - | **Neutral** | Text, backgrounds, borders | 9-11 shade scale | 29 29 - | **Semantic** | Success, error, warning, info | 4 colors, 2-3 shades each | 30 30 - | **Surface** | Cards, modals, overlays | 2-3 elevation levels | 31 31 - 32 32 - **Skip secondary/tertiary unless you need them.** Most apps work fine with one accent color. Adding more creates decision fatigue and visual noise. 33 33 - 34 34 - ### The 60-30-10 Rule (Applied Correctly) 35 35 - 36 36 - This rule is about **visual weight**, not pixel count: 37 37 - 38 38 - - **60%**: Neutral backgrounds, white space, base surfaces 39 39 - - **30%**: Secondary colors—text, borders, inactive states 40 40 - - **10%**: Accent—CTAs, highlights, focus states 41 41 - 42 42 - The common mistake: using the accent color everywhere because it's "the brand color." Accent colors work _because_ they're rare. Overuse kills their power. 43 43 - 44 44 - ## Contrast & Accessibility 45 45 - 46 46 - ### WCAG Requirements 47 47 - 48 48 - | Content Type | AA Minimum | AAA Target | 49 49 - | ------------------------------- | ---------- | ---------- | 50 50 - | Body text | 4.5:1 | 7:1 | 51 51 - | Large text (18px+ or 14px bold) | 3:1 | 4.5:1 | 52 52 - | UI components, icons | 3:1 | 4.5:1 | 53 53 - | Non-essential decorations | None | None | 54 54 - 55 55 - **The gotcha**: Placeholder text still needs 4.5:1. That light gray placeholder you see everywhere? Usually fails WCAG. 56 56 - 57 57 - ### Dangerous Color Combinations 58 58 - 59 59 - These commonly fail contrast or cause readability issues: 60 60 - 61 61 - - Light gray text on white (the #1 accessibility fail) 62 62 - - **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency 63 63 - - Red text on green background (or vice versa)—8% of men can't distinguish these 64 64 - - Blue text on red background (vibrates visually) 65 65 - - Yellow text on white (almost always fails) 66 66 - - Thin light text on images (unpredictable contrast) 67 67 - 68 68 - ### Never Use Pure Gray or Pure Black 69 69 - 70 70 - Pure gray (`oklch(50% 0 0)`) and pure black (`#000`) don't exist in nature—real shadows and surfaces always have a color cast. Even a chroma of 0.005-0.01 is enough to feel natural without being obviously tinted. (See tinted neutrals example above.) 71 71 - 72 72 - ### Testing 73 73 - 74 74 - Don't trust your eyes. Use tools: 75 75 - 76 76 - - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) 77 77 - - Browser DevTools → Rendering → Emulate vision deficiencies 78 78 - - [Polypane](https://polypane.app/) for real-time testing 79 79 - 80 80 - ## Theming: Light & Dark Mode 81 81 - 82 82 - ### Dark Mode Is Not Inverted Light Mode 83 83 - 84 84 - You can't just swap colors. Dark mode requires different design decisions: 85 85 - 86 86 - | Light Mode | Dark Mode | 87 87 - | ------------------ | --------------------------------------------- | 88 88 - | Shadows for depth | Lighter surfaces for depth (no shadows) | 89 89 - | Dark text on light | Light text on dark (reduce font weight) | 90 90 - | Vibrant accents | Desaturate accents slightly | 91 91 - | White backgrounds | Never pure black—use dark gray (oklch 12-18%) | 92 92 - 93 93 - In dark mode, depth comes from surface lightness, not shadow. Build a 3-step surface scale where higher elevations are lighter (e.g. 15% / 20% / 25% lightness). Use the SAME hue and chroma as your brand color (whatever it is for THIS project — do not reach for blue) and only vary the lightness. Reduce body text weight slightly (e.g. 350 instead of 400) because light text on dark reads as heavier than dark text on light. 94 94 - 95 95 - ### Token Hierarchy 96 96 - 97 97 - Use two layers: primitive tokens (`--blue-500`) and semantic tokens (`--color-primary: var(--blue-500)`). For dark mode, only redefine the semantic layer—primitives stay the same. 98 98 - 99 99 - ## Alpha Is A Design Smell 100 100 - 101 101 - Heavy use of transparency (rgba, hsla) usually means an incomplete palette. Alpha creates unpredictable contrast, performance overhead, and inconsistency. Define explicit overlay colors for each context instead. Exception: focus rings and interactive states where see-through is needed. 102 102 - 103 103 - --- 104 104 - 105 105 - **Avoid**: Relying on color alone to convey information. Creating palettes without clear roles for each color. Using pure black (#000) for large areas. Skipping color blindness testing (8% of men affected).

-73

.agents/skills/impeccable/reference/craft.md

reviewed

··· 1 1 - # Craft Flow 2 2 - 3 3 - Build a feature with impeccable UX and UI quality through a structured process: shape the design, load the right references, then build and iterate visually until the result is delightful. 4 4 - 5 5 - ## Step 1: Shape the Design 6 6 - 7 7 - Run /shape, passing along whatever feature description the user provided. 8 8 - 9 9 - Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. 10 10 - 11 11 - If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. 12 12 - 13 13 - ## Step 2: Load References 14 14 - 15 15 - Based on the design brief's "Recommended References" section, consult the relevant impeccable reference files. At minimum, always consult: 16 16 - 17 17 - - [spatial-design.md](spatial-design.md) for layout and spacing 18 18 - - [typography.md](typography.md) for type hierarchy 19 19 - 20 20 - Then add references based on the brief's needs: 21 21 - 22 22 - - Complex interactions or forms? Consult [interaction-design.md](interaction-design.md) 23 23 - - Animation or transitions? Consult [motion-design.md](motion-design.md) 24 24 - - Color-heavy or themed? Consult [color-and-contrast.md](color-and-contrast.md) 25 25 - - Responsive requirements? Consult [responsive-design.md](responsive-design.md) 26 26 - - Heavy on copy, labels, or errors? Consult [ux-writing.md](ux-writing.md) 27 27 - 28 28 - ## Step 3: Build 29 29 - 30 30 - Implement the feature following the design brief. Work in this order: 31 31 - 32 32 - 1. **Structure first**: HTML/semantic structure for the primary state. No styling yet. 33 33 - 2. **Layout and spacing**: Establish the spatial rhythm and visual hierarchy. 34 34 - 3. **Typography and color**: Apply the type scale and color system. 35 35 - 4. **Interactive states**: Hover, focus, active, disabled. 36 36 - 5. **Edge case states**: Empty, loading, error, overflow, first-run. 37 37 - 6. **Motion**: Purposeful transitions and animations (if appropriate). 38 38 - 7. **Responsive**: Adapt for different viewports. Don't just shrink; redesign for the context. 39 39 - 40 40 - ### During Build 41 41 - 42 42 - - Test with real (or realistic) data at every step, not placeholder text 43 43 - - Check each state as you build it, not all at the end 44 44 - - If you discover a design question, stop and ask rather than guessing 45 45 - - Every visual choice should trace back to something in the design brief 46 46 - 47 47 - ## Step 4: Visual Iteration 48 48 - 49 49 - **This step is critical.** Do not stop after the first implementation pass. 50 50 - 51 51 - Open the result in a browser window. If browser automation tools are available, use them to navigate to the page and visually inspect the result. If not, ask the user to open it and provide feedback. 52 52 - 53 53 - Iterate through these checks visually: 54 54 - 55 55 - 1. **Does it match the brief?** Compare the live result against every section of the design brief. Fix discrepancies. 56 56 - 2. **Does it pass the AI slop test?** If someone saw this and said "AI made this," would they believe it immediately? If yes, it needs more design intention. 57 57 - 3. **Check against impeccable's DON'T guidelines.** Fix any anti-pattern violations. 58 58 - 4. **Check every state.** Navigate through empty, error, loading, and edge case states. Each one should feel intentional, not like an afterthought. 59 59 - 5. **Check responsive.** Resize the viewport. Does it adapt well or just shrink? 60 60 - 6. **Check the details.** Spacing consistency, type hierarchy clarity, color contrast, interactive feedback, motion timing. 61 61 - 62 62 - After each round of fixes, visually verify again. **Repeat until you would be proud to show this to the user.** The bar is not "it works"; the bar is "this delights." 63 63 - 64 64 - ## Step 5: Present 65 65 - 66 66 - Present the result to the user: 67 67 - 68 68 - - Show the feature in its primary state 69 69 - - Walk through the key states (empty, error, responsive) 70 70 - - Explain design decisions that connect back to the design brief 71 71 - - Ask: "What's working? What isn't?" 72 72 - 73 73 - Iterate based on feedback. Good design is rarely right on the first pass.

-71

.agents/skills/impeccable/reference/extract.md

reviewed

··· 1 1 - # Extract Flow 2 2 - 3 3 - Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse. 4 4 - 5 5 - ## Step 1: Discover the Design System 6 6 - 7 7 - Find the design system, component library, or shared UI directory. Understand its structure: component organization, naming conventions, design token structure, import/export conventions. 8 8 - 9 9 - **CRITICAL**: If no design system exists, ask the user directly to clarify what you cannot infer. before creating one. Understand the preferred location and structure first. 10 10 - 11 11 - ## Step 2: Identify Patterns 12 12 - 13 13 - Look for extraction opportunities in the target area: 14 14 - 15 15 - - **Repeated components**: Similar UI patterns used 3+ times (buttons, cards, inputs) 16 16 - - **Hard-coded values**: Colors, spacing, typography, shadows that should be tokens 17 17 - - **Inconsistent variations**: Multiple implementations of the same concept 18 18 - - **Composition patterns**: Layout or interaction patterns that repeat (form rows, toolbar groups, empty states) 19 19 - - **Type styles**: Repeated font-size + weight + line-height combinations 20 20 - - **Animation patterns**: Repeated easing, duration, or keyframe combinations 21 21 - 22 22 - Assess value: only extract things used 3+ times with the same intent. Premature abstraction is worse than duplication. 23 23 - 24 24 - ## Step 3: Plan Extraction 25 25 - 26 26 - Create a systematic plan: 27 27 - 28 28 - - **Components to extract**: Which UI elements become reusable components? 29 29 - - **Tokens to create**: Which hard-coded values become design tokens? 30 30 - - **Variants to support**: What variations does each component need? 31 31 - - **Naming conventions**: Component names, token names, prop names that match existing patterns 32 32 - - **Migration path**: How to refactor existing uses to consume the new shared versions 33 33 - 34 34 - **IMPORTANT**: Design systems grow incrementally. Extract what is clearly reusable now, not everything that might someday be reusable. 35 35 - 36 36 - ## Step 4: Extract & Enrich 37 37 - 38 38 - Build improved, reusable versions: 39 39 - 40 40 - - **Components**: Clear props API with sensible defaults, proper variants for different use cases, accessibility built in (ARIA, keyboard navigation, focus management), documentation and usage examples 41 41 - - **Design tokens**: Clear naming (primitive vs semantic), proper hierarchy and organization, documentation of when to use each token 42 42 - - **Patterns**: When to use this pattern, code examples, variations and combinations 43 43 - 44 44 - ## Step 5: Migrate 45 45 - 46 46 - Replace existing uses with the new shared versions: 47 47 - 48 48 - - **Find all instances**: Search for the patterns you extracted 49 49 - - **Replace systematically**: Update each use to consume the shared version 50 50 - - **Test thoroughly**: Ensure visual and functional parity 51 51 - - **Delete dead code**: Remove the old implementations 52 52 - 53 53 - ## Step 6: Document 54 54 - 55 55 - Update design system documentation: 56 56 - 57 57 - - Add new components to the component library 58 58 - - Document token usage and values 59 59 - - Add examples and guidelines 60 60 - - Update any Storybook or component catalog 61 61 - 62 62 - **NEVER**: 63 63 - 64 64 - - Extract one-off, context-specific implementations without generalization 65 65 - - Create components so generic they are useless 66 66 - - Extract without considering existing design system conventions 67 67 - - Skip proper TypeScript types or prop documentation 68 68 - - Create tokens for every single value (tokens should have semantic meaning) 69 69 - - Extract things that differ in intent (two buttons that look similar but serve different purposes should stay separate) 70 70 - 71 71 - Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.

-196

.agents/skills/impeccable/reference/interaction-design.md

reviewed

··· 1 1 - # Interaction Design 2 2 - 3 3 - ## The Eight Interactive States 4 4 - 5 5 - Every interactive element needs these states designed: 6 6 - 7 7 - | State | When | Visual Treatment | 8 8 - | ------------ | --------------------------- | --------------------------- | 9 9 - | **Default** | At rest | Base styling | 10 10 - | **Hover** | Pointer over (not touch) | Subtle lift, color shift | 11 11 - | **Focus** | Keyboard/programmatic focus | Visible ring (see below) | 12 12 - | **Active** | Being pressed | Pressed in, darker | 13 13 - | **Disabled** | Not interactive | Reduced opacity, no pointer | 14 14 - | **Loading** | Processing | Spinner, skeleton | 15 15 - | **Error** | Invalid state | Red border, icon, message | 16 16 - | **Success** | Completed | Green check, confirmation | 17 17 - 18 18 - **The common miss**: Designing hover without focus, or vice versa. They're different. Keyboard users never see hover states. 19 19 - 20 20 - ## Focus Rings: Do Them Right 21 21 - 22 22 - **Never `outline: none` without replacement.** It's an accessibility violation. Instead, use `:focus-visible` to show focus only for keyboard users: 23 23 - 24 24 - ```css 25 25 - /* Hide focus ring for mouse/touch */ 26 26 - button:focus { 27 27 - outline: none; 28 28 - } 29 29 - 30 30 - /* Show focus ring for keyboard */ 31 31 - button:focus-visible { 32 32 - outline: 2px solid var(--color-accent); 33 33 - outline-offset: 2px; 34 34 - } 35 35 - ``` 36 36 - 37 37 - **Focus ring design**: 38 38 - 39 39 - - High contrast (3:1 minimum against adjacent colors) 40 40 - - 2-3px thick 41 41 - - Offset from element (not inside it) 42 42 - - Consistent across all interactive elements 43 43 - 44 44 - ## Form Design: The Non-Obvious 45 45 - 46 46 - **Placeholders aren't labels**—they disappear on input. Always use visible `<label>` elements. **Validate on blur**, not on every keystroke (exception: password strength). Place errors **below** fields with `aria-describedby` connecting them. 47 47 - 48 48 - ## Loading States 49 49 - 50 50 - **Optimistic updates**: Show success immediately, rollback on failure. Use for low-stakes actions (likes, follows), not payments or destructive actions. **Skeleton screens > spinners**—they preview content shape and feel faster than generic spinners. 51 51 - 52 52 - ## Modals: The Inert Approach 53 53 - 54 54 - Focus trapping in modals used to require complex JavaScript. Now use the `inert` attribute: 55 55 - 56 56 - ```html 57 57 - <!-- When modal is open --> 58 58 - <main inert> 59 59 - <!-- Content behind modal can't be focused or clicked --> 60 60 - </main> 61 61 - <dialog open> 62 62 - <h2>Modal Title</h2> 63 63 - <!-- Focus stays inside modal --> 64 64 - </dialog> 65 65 - ``` 66 66 - 67 67 - Or use the native `<dialog>` element: 68 68 - 69 69 - ```javascript 70 70 - const dialog = document.querySelector("dialog"); 71 71 - dialog.showModal(); // Opens with focus trap, closes on Escape 72 72 - ``` 73 73 - 74 74 - ## The Popover API 75 75 - 76 76 - For tooltips, dropdowns, and non-modal overlays, use native popovers: 77 77 - 78 78 - ```html 79 79 - <button popovertarget="menu">Open menu</button> 80 80 - <div id="menu" popover> 81 81 - <button>Option 1</button> 82 82 - <button>Option 2</button> 83 83 - </div> 84 84 - ``` 85 85 - 86 86 - **Benefits**: Light-dismiss (click outside closes), proper stacking, no z-index wars, accessible by default. 87 87 - 88 88 - ## Dropdown & Overlay Positioning 89 89 - 90 90 - Dropdowns rendered with `position: absolute` inside a container that has `overflow: hidden` or `overflow: auto` will be clipped. This is the single most common dropdown bug in generated code. 91 91 - 92 92 - ### CSS Anchor Positioning 93 93 - 94 94 - The modern solution uses the CSS Anchor Positioning API to tether an overlay to its trigger without JavaScript: 95 95 - 96 96 - ```css 97 97 - .trigger { 98 98 - anchor-name: --menu-trigger; 99 99 - } 100 100 - 101 101 - .dropdown { 102 102 - position: fixed; 103 103 - position-anchor: --menu-trigger; 104 104 - position-area: block-end span-inline-end; 105 105 - margin-top: 4px; 106 106 - } 107 107 - 108 108 - /* Flip above if no room below */ 109 109 - @position-try --flip-above { 110 110 - position-area: block-start span-inline-end; 111 111 - margin-bottom: 4px; 112 112 - } 113 113 - ``` 114 114 - 115 115 - Because the dropdown uses `position: fixed`, it escapes any `overflow` clipping on ancestor elements. The `@position-try` block handles viewport edges automatically. **Browser support**: Chrome 125+, Edge 125+. Not yet in Firefox or Safari - use a fallback for those browsers. 116 116 - 117 117 - ### Popover + Anchor Combo 118 118 - 119 119 - Combining the Popover API with anchor positioning gives you stacking, light-dismiss, accessibility, and correct positioning in one pattern: 120 120 - 121 121 - ```html 122 122 - <button popovertarget="menu" class="trigger">Open</button> 123 123 - <div id="menu" popover class="dropdown"> 124 124 - <button>Option 1</button> 125 125 - <button>Option 2</button> 126 126 - </div> 127 127 - ``` 128 128 - 129 129 - The `popover` attribute places the element in the **top layer**, which sits above all other content regardless of z-index or overflow. No portal needed. 130 130 - 131 131 - ### Portal / Teleport Pattern 132 132 - 133 133 - In component frameworks, render the dropdown at the document root and position it with JavaScript: 134 134 - 135 135 - - **React**: `createPortal(dropdown, document.body)` 136 136 - - **Vue**: `<Teleport to="body">` 137 137 - - **Svelte**: Use a portal library or mount to `document.body` 138 138 - 139 139 - Calculate position from the trigger's `getBoundingClientRect()`, then apply `position: fixed` with `top` and `left` values. Recalculate on scroll and resize. 140 140 - 141 141 - ### Fixed Positioning Fallback 142 142 - 143 143 - For browsers without anchor positioning support, `position: fixed` with manual coordinates avoids overflow clipping: 144 144 - 145 145 - ```css 146 146 - .dropdown { 147 147 - position: fixed; 148 148 - /* top/left set via JS from trigger's getBoundingClientRect() */ 149 149 - } 150 150 - ``` 151 151 - 152 152 - Check viewport boundaries before rendering. If the dropdown would overflow the bottom edge, flip it above the trigger. If it would overflow the right edge, align it to the trigger's right side instead. 153 153 - 154 154 - ### Anti-Patterns 155 155 - 156 156 - - **`position: absolute` inside `overflow: hidden`** - The dropdown will be clipped. Use `position: fixed` or the top layer instead. 157 157 - - **Arbitrary z-index values** like `z-index: 9999` - Use a semantic z-index scale: `dropdown (100) -> sticky (200) -> modal-backdrop (300) -> modal (400) -> toast (500) -> tooltip (600)`. 158 158 - - **Rendering dropdown markup inline** without an escape hatch from the parent's stacking context. Either use `popover` (top layer), a portal, or `position: fixed`. 159 159 - 160 160 - ## Destructive Actions: Undo > Confirm 161 161 - 162 162 - **Undo is better than confirmation dialogs**—users click through confirmations mindlessly. Remove from UI immediately, show undo toast, actually delete after toast expires. Use confirmation only for truly irreversible actions (account deletion), high-cost actions, or batch operations. 163 163 - 164 164 - ## Keyboard Navigation Patterns 165 165 - 166 166 - ### Roving Tabindex 167 167 - 168 168 - For component groups (tabs, menu items, radio groups), one item is tabbable; arrow keys move within: 169 169 - 170 170 - ```html 171 171 - <div role="tablist"> 172 172 - <button role="tab" tabindex="0">Tab 1</button> 173 173 - <button role="tab" tabindex="-1">Tab 2</button> 174 174 - <button role="tab" tabindex="-1">Tab 3</button> 175 175 - </div> 176 176 - ``` 177 177 - 178 178 - Arrow keys move `tabindex="0"` between items. Tab moves to the next component entirely. 179 179 - 180 180 - ### Skip Links 181 181 - 182 182 - Provide skip links (`<a href="#main-content">Skip to main content</a>`) for keyboard users to jump past navigation. Hide off-screen, show on focus. 183 183 - 184 184 - ## Gesture Discoverability 185 185 - 186 186 - Swipe-to-delete and similar gestures are invisible. Hint at their existence: 187 187 - 188 188 - - **Partially reveal**: Show delete button peeking from edge 189 189 - - **Onboarding**: Coach marks on first use 190 190 - - **Alternative**: Always provide a visible fallback (menu with "Delete") 191 191 - 192 192 - Don't rely on gestures as the only way to perform actions. 193 193 - 194 194 - --- 195 195 - 196 196 - **Avoid**: Removing focus indicators without alternatives. Using placeholder text as labels. Touch targets <44x44px. Generic error messages. Custom controls without ARIA/keyboard support.

-101

.agents/skills/impeccable/reference/motion-design.md

reviewed

··· 1 1 - # Motion Design 2 2 - 3 3 - ## Duration: The 100/300/500 Rule 4 4 - 5 5 - Timing matters more than easing. These durations feel right for most UI: 6 6 - 7 7 - | Duration | Use Case | Examples | 8 8 - | ------------- | ------------------- | ---------------------------------- | 9 9 - | **100-150ms** | Instant feedback | Button press, toggle, color change | 10 10 - | **200-300ms** | State changes | Menu open, tooltip, hover states | 11 11 - | **300-500ms** | Layout changes | Accordion, modal, drawer | 12 12 - | **500-800ms** | Entrance animations | Page load, hero reveals | 13 13 - 14 14 - **Exit animations are faster than entrances**—use ~75% of enter duration. 15 15 - 16 16 - ## Easing: Pick the Right Curve 17 17 - 18 18 - **Don't use `ease`.** It's a compromise that's rarely optimal. Instead: 19 19 - 20 20 - | Curve | Use For | CSS | 21 21 - | --------------- | ---------------------------- | -------------------------------- | 22 22 - | **ease-out** | Elements entering | `cubic-bezier(0.16, 1, 0.3, 1)` | 23 23 - | **ease-in** | Elements leaving | `cubic-bezier(0.7, 0, 0.84, 0)` | 24 24 - | **ease-in-out** | State toggles (there → back) | `cubic-bezier(0.65, 0, 0.35, 1)` | 25 25 - 26 26 - **For micro-interactions, use exponential curves**—they feel natural because they mimic real physics (friction, deceleration): 27 27 - 28 28 - ```css 29 29 - /* Quart out - smooth, refined (recommended default) */ 30 30 - --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); 31 31 - 32 32 - /* Quint out - slightly more dramatic */ 33 33 - --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); 34 34 - 35 35 - /* Expo out - snappy, confident */ 36 36 - --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); 37 37 - ``` 38 38 - 39 39 - **Avoid bounce and elastic curves.** They were trendy in 2015 but now feel tacky and amateurish. Real objects don't bounce when they stop—they decelerate smoothly. Overshoot effects draw attention to the animation itself rather than the content. 40 40 - 41 41 - ## The Only Two Properties You Should Animate 42 42 - 43 43 - **transform** and **opacity** only—everything else causes layout recalculation. For height animations (accordions), use `grid-template-rows: 0fr → 1fr` instead of animating `height` directly. 44 44 - 45 45 - ## Staggered Animations 46 46 - 47 47 - Use CSS custom properties for cleaner stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"` on each item. **Cap total stagger time**—10 items at 50ms = 500ms total. For many items, reduce per-item delay or cap staggered count. 48 48 - 49 49 - ## Reduced Motion 50 50 - 51 51 - This is not optional. Vestibular disorders affect ~35% of adults over 40. 52 52 - 53 53 - ```css 54 54 - /* Define animations normally */ 55 55 - .card { 56 56 - animation: slide-up 500ms ease-out; 57 57 - } 58 58 - 59 59 - /* Provide alternative for reduced motion */ 60 60 - @media (prefers-reduced-motion: reduce) { 61 61 - .card { 62 62 - animation: fade-in 200ms ease-out; /* Crossfade instead of motion */ 63 63 - } 64 64 - } 65 65 - 66 66 - /* Or disable entirely */ 67 67 - @media (prefers-reduced-motion: reduce) { 68 68 - *, 69 69 - *::before, 70 70 - *::after { 71 71 - animation-duration: 0.01ms !important; 72 72 - transition-duration: 0.01ms !important; 73 73 - } 74 74 - } 75 75 - ``` 76 76 - 77 77 - **What to preserve**: Functional animations like progress bars, loading spinners (slowed down), and focus indicators should still work—just without spatial movement. 78 78 - 79 79 - ## Perceived Performance 80 80 - 81 81 - **Nobody cares how fast your site is—just how fast it feels.** Perception can be as effective as actual performance. 82 82 - 83 83 - **The 80ms threshold**: Our brains buffer sensory input for ~80ms to synchronize perception. Anything under 80ms feels instant and simultaneous. This is your target for micro-interactions. 84 84 - 85 85 - **Active vs passive time**: Passive waiting (staring at a spinner) feels longer than active engagement. Strategies to shift the balance: 86 86 - 87 87 - - **Preemptive start**: Begin transitions immediately while loading (iOS app zoom, skeleton UI). Users perceive work happening. 88 88 - - **Early completion**: Show content progressively—don't wait for everything. Video buffering, progressive images, streaming HTML. 89 89 - - **Optimistic UI**: Update the interface immediately, handle failures gracefully. Instagram likes work offline—the UI updates instantly, syncs later. Use for low-stakes actions; avoid for payments or destructive operations. 90 90 - 91 91 - **Easing affects perceived duration**: Ease-in (accelerating toward completion) makes tasks feel shorter because the peak-end effect weights final moments heavily. Ease-out feels satisfying for entrances, but ease-in toward a task's end compresses perceived time. 92 92 - 93 93 - **Caution**: Too-fast responses can decrease perceived value. Users may distrust instant results for complex operations (search, analysis). Sometimes a brief delay signals "real work" is happening. 94 94 - 95 95 - ## Performance 96 96 - 97 97 - Don't use `will-change` preemptively—only when animation is imminent (`:hover`, `.animating`). For scroll-triggered animations, use Intersection Observer instead of scroll events; unobserve after animating once. Create motion tokens for consistency (durations, easings, common transitions). 98 98 - 99 99 - --- 100 100 - 101 101 - **Avoid**: Animating everything (animation fatigue is real). Using >500ms for UI feedback. Ignoring `prefers-reduced-motion`. Using animation to hide slow loading.

-120

.agents/skills/impeccable/reference/responsive-design.md

reviewed

··· 1 1 - # Responsive Design 2 2 - 3 3 - ## Mobile-First: Write It Right 4 4 - 5 5 - Start with base styles for mobile, use `min-width` queries to layer complexity. Desktop-first (`max-width`) means mobile loads unnecessary styles first. 6 6 - 7 7 - ## Breakpoints: Content-Driven 8 8 - 9 9 - Don't chase device sizes—let content tell you where to break. Start narrow, stretch until design breaks, add breakpoint there. Three breakpoints usually suffice (640, 768, 1024px). Use `clamp()` for fluid values without breakpoints. 10 10 - 11 11 - ## Detect Input Method, Not Just Screen Size 12 12 - 13 13 - **Screen size doesn't tell you input method.** A laptop with touchscreen, a tablet with keyboard—use pointer and hover queries: 14 14 - 15 15 - ```css 16 16 - /* Fine pointer (mouse, trackpad) */ 17 17 - @media (pointer: fine) { 18 18 - .button { 19 19 - padding: 8px 16px; 20 20 - } 21 21 - } 22 22 - 23 23 - /* Coarse pointer (touch, stylus) */ 24 24 - @media (pointer: coarse) { 25 25 - .button { 26 26 - padding: 12px 20px; 27 27 - } /* Larger touch target */ 28 28 - } 29 29 - 30 30 - /* Device supports hover */ 31 31 - @media (hover: hover) { 32 32 - .card:hover { 33 33 - transform: translateY(-2px); 34 34 - } 35 35 - } 36 36 - 37 37 - /* Device doesn't support hover (touch) */ 38 38 - @media (hover: none) { 39 39 - .card { 40 40 - /* No hover state - use active instead */ 41 41 - } 42 42 - } 43 43 - ``` 44 44 - 45 45 - **Critical**: Don't rely on hover for functionality. Touch users can't hover. 46 46 - 47 47 - ## Safe Areas: Handle the Notch 48 48 - 49 49 - Modern phones have notches, rounded corners, and home indicators. Use `env()`: 50 50 - 51 51 - ```css 52 52 - body { 53 53 - padding-top: env(safe-area-inset-top); 54 54 - padding-bottom: env(safe-area-inset-bottom); 55 55 - padding-left: env(safe-area-inset-left); 56 56 - padding-right: env(safe-area-inset-right); 57 57 - } 58 58 - 59 59 - /* With fallback */ 60 60 - .footer { 61 61 - padding-bottom: max(1rem, env(safe-area-inset-bottom)); 62 62 - } 63 63 - ``` 64 64 - 65 65 - **Enable viewport-fit** in your meta tag: 66 66 - 67 67 - ```html 68 68 - <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 69 69 - ``` 70 70 - 71 71 - ## Responsive Images: Get It Right 72 72 - 73 73 - ### srcset with Width Descriptors 74 74 - 75 75 - ```html 76 76 - <img 77 77 - src="hero-800.jpg" 78 78 - srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w" 79 79 - sizes="(max-width: 768px) 100vw, 50vw" 80 80 - alt="Hero image" 81 81 - /> 82 82 - ``` 83 83 - 84 84 - **How it works**: 85 85 - 86 86 - - `srcset` lists available images with their actual widths (`w` descriptors) 87 87 - - `sizes` tells the browser how wide the image will display 88 88 - - Browser picks the best file based on viewport width AND device pixel ratio 89 89 - 90 90 - ### Picture Element for Art Direction 91 91 - 92 92 - When you need different crops/compositions (not just resolutions): 93 93 - 94 94 - ```html 95 95 - <picture> 96 96 - <source media="(min-width: 768px)" srcset="wide.jpg" /> 97 97 - <source media="(max-width: 767px)" srcset="tall.jpg" /> 98 98 - <img src="fallback.jpg" alt="..." /> 99 99 - </picture> 100 100 - ``` 101 101 - 102 102 - ## Layout Adaptation Patterns 103 103 - 104 104 - **Navigation**: Three stages—hamburger + drawer on mobile, horizontal compact on tablet, full with labels on desktop. **Tables**: Transform to cards on mobile using `display: block` and `data-label` attributes. **Progressive disclosure**: Use `<details>/<summary>` for content that can collapse on mobile. 105 105 - 106 106 - ## Testing: Don't Trust DevTools Alone 107 107 - 108 108 - DevTools device emulation is useful for layout but misses: 109 109 - 110 110 - - Actual touch interactions 111 111 - - Real CPU/memory constraints 112 112 - - Network latency patterns 113 113 - - Font rendering differences 114 114 - - Browser chrome/keyboard appearances 115 115 - 116 116 - **Test on at least**: One real iPhone, one real Android, a tablet if relevant. Cheap Android phones reveal performance issues you'll never see on simulators. 117 117 - 118 118 - --- 119 119 - 120 120 - **Avoid**: Desktop-first design. Device detection instead of feature detection. Separate mobile/desktop codebases. Ignoring tablet and landscape. Assuming all mobile devices are powerful.

-101

.agents/skills/impeccable/reference/spatial-design.md

reviewed

··· 1 1 - # Spatial Design 2 2 - 3 3 - ## Spacing Systems 4 4 - 5 5 - ### Use 4pt Base, Not 8pt 6 6 - 7 7 - 8pt systems are too coarse—you'll frequently need 12px (between 8 and 16). Use 4pt for granularity: 4, 8, 12, 16, 24, 32, 48, 64, 96px. 8 8 - 9 9 - ### Name Tokens Semantically 10 10 - 11 11 - Name by relationship (`--space-sm`, `--space-lg`), not value (`--spacing-8`). Use `gap` instead of margins for sibling spacing—it eliminates margin collapse and cleanup hacks. 12 12 - 13 13 - ## Grid Systems 14 14 - 15 15 - ### The Self-Adjusting Grid 16 16 - 17 17 - Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. Columns are at least 280px, as many as fit per row, leftovers stretch. For complex layouts, use named grid areas (`grid-template-areas`) and redefine them at breakpoints. 18 18 - 19 19 - ## Visual Hierarchy 20 20 - 21 21 - ### The Squint Test 22 22 - 23 23 - Blur your eyes (or screenshot and blur). Can you still identify: 24 24 - 25 25 - - The most important element? 26 26 - - The second most important? 27 27 - - Clear groupings? 28 28 - 29 29 - If everything looks the same weight blurred, you have a hierarchy problem. 30 30 - 31 31 - ### Hierarchy Through Multiple Dimensions 32 32 - 33 33 - Don't rely on size alone. Combine: 34 34 - 35 35 - | Tool | Strong Hierarchy | Weak Hierarchy | 36 36 - | ------------ | ------------------------- | ----------------- | 37 37 - | **Size** | 3:1 ratio or more | <2:1 ratio | 38 38 - | **Weight** | Bold vs Regular | Medium vs Regular | 39 39 - | **Color** | High contrast | Similar tones | 40 40 - | **Position** | Top/left (primary) | Bottom/right | 41 41 - | **Space** | Surrounded by white space | Crowded | 42 42 - 43 43 - **The best hierarchy uses 2-3 dimensions at once**: A heading that's larger, bolder, AND has more space above it. 44 44 - 45 45 - ### Cards Are Not Required 46 46 - 47 47 - Cards are overused. Spacing and alignment create visual grouping naturally. Use cards only when content is truly distinct and actionable, items need visual comparison in a grid, or content needs clear interaction boundaries. **Never nest cards inside cards**—use spacing, typography, and subtle dividers for hierarchy within a card. 48 48 - 49 49 - ## Container Queries 50 50 - 51 51 - Viewport queries are for page layouts. **Container queries are for components**: 52 52 - 53 53 - ```css 54 54 - .card-container { 55 55 - container-type: inline-size; 56 56 - } 57 57 - 58 58 - .card { 59 59 - display: grid; 60 60 - gap: var(--space-md); 61 61 - } 62 62 - 63 63 - /* Card layout changes based on its container, not viewport */ 64 64 - @container (min-width: 400px) { 65 65 - .card { 66 66 - grid-template-columns: 120px 1fr; 67 67 - } 68 68 - } 69 69 - ``` 70 70 - 71 71 - **Why this matters**: A card in a narrow sidebar stays compact, while the same card in a main content area expands—automatically, without viewport hacks. 72 72 - 73 73 - ## Optical Adjustments 74 74 - 75 75 - Text at `margin-left: 0` looks indented due to letterform whitespace—use negative margin (`-0.05em`) to optically align. Geometrically centered icons often look off-center; play icons need to shift right, arrows shift toward their direction. 76 76 - 77 77 - ### Touch Targets vs Visual Size 78 78 - 79 79 - Buttons can look small but need large touch targets (44px minimum). Use padding or pseudo-elements: 80 80 - 81 81 - ```css 82 82 - .icon-button { 83 83 - width: 24px; /* Visual size */ 84 84 - height: 24px; 85 85 - position: relative; 86 86 - } 87 87 - 88 88 - .icon-button::before { 89 89 - content: ""; 90 90 - position: absolute; 91 91 - inset: -10px; /* Expand tap target to 44px */ 92 92 - } 93 93 - ``` 94 94 - 95 95 - ## Depth & Elevation 96 96 - 97 97 - Create semantic z-index scales (dropdown → sticky → modal-backdrop → modal → toast → tooltip) instead of arbitrary numbers. For shadows, create a consistent elevation scale (sm → md → lg → xl). **Key insight**: Shadows should be subtle—if you can clearly see it, it's probably too strong. 98 98 - 99 99 - --- 100 100 - 101 101 - **Avoid**: Arbitrary spacing values outside your scale. Making all spacing equal (variety creates hierarchy). Creating hierarchy through size alone - combine size, weight, color, and space.

-154

.agents/skills/impeccable/reference/typography.md

reviewed

··· 1 1 - # Typography 2 2 - 3 3 - ## Classic Typography Principles 4 4 - 5 5 - ### Vertical Rhythm 6 6 - 7 7 - Your line-height should be the base unit for ALL vertical spacing. If body text has `line-height: 1.5` on `16px` type (= 24px), spacing values should be multiples of 24px. This creates subconscious harmony—text and space share a mathematical foundation. 8 8 - 9 9 - ### Modular Scale & Hierarchy 10 10 - 11 11 - The common mistake: too many font sizes that are too close together (14px, 15px, 16px, 18px...). This creates muddy hierarchy. 12 12 - 13 13 - **Use fewer sizes with more contrast.** A 5-size system covers most needs: 14 14 - 15 15 - | Role | Typical Ratio | Use Case | 16 16 - | ---- | ------------- | ---------------------- | 17 17 - | xs | 0.75rem | Captions, legal | 18 18 - | sm | 0.875rem | Secondary UI, metadata | 19 19 - | base | 1rem | Body text | 20 20 - | lg | 1.25-1.5rem | Subheadings, lead text | 21 21 - | xl+ | 2-4rem | Headlines, hero text | 22 22 - 23 23 - Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Pick one and commit. 24 24 - 25 25 - ### Readability & Measure 26 26 - 27 27 - Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. 28 28 - 29 29 - **Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. 30 30 - 31 31 - ## Font Selection & Pairing 32 32 - 33 33 - ### Choosing Distinctive Fonts 34 34 - 35 35 - **Avoid the invisible defaults**: Inter, Roboto, Open Sans, Lato, Montserrat. These are everywhere, making your design feel generic. They're fine for documentation or tools where personality isn't the goal—but if you want distinctive design, look elsewhere. 36 36 - 37 37 - **Pick the font from the brief, not from a category preset.** The most common AI typography failure is reaching for the same "tasteful" font for every editorial brief, the same "modern" font for every tech brief, the same "elegant serif" for every premium brief. Those reflexes produce monoculture across projects. The right font is one whose physical character matches _this specific_ brand, audience, and moment. 38 38 - 39 39 - A working selection process: 40 40 - 41 41 - 1. Read the brief once. Write down three concrete words for the brand voice. Not "modern" or "elegant" — those are dead categories. Try "warm and mechanical and opinionated" or "calm and clinical and careful" or "fast and dense and unimpressed" or "handmade and a little weird." 42 42 - 2. Now imagine the font as a physical object the brand could ship: a typewriter ribbon, a hand-lettered shop sign, a 1970s mainframe terminal manual, a fabric label on the inside of a coat, a museum exhibit caption, a tax form, a children's book printed on cheap newsprint. Whichever physical object fits the three words is pointing at the right _kind_ of typeface. 43 43 - 3. Browse a font catalog (Google Fonts, Pangram Pangram, Adobe Fonts, Future Fonts, ABC Dinamo) with that physical object in mind. **Reject the first thing that "looks designy."** That's your trained-everywhere reflex. Keep looking. 44 44 - 4. Avoid your defaults from previous projects. If you find yourself reaching for the same display font you used last time, make yourself pick something else. 45 45 - 46 46 - **Anti-reflexes worth defending against**: 47 47 - 48 48 - - A technical/utilitarian brief does NOT need a serif "for warmth." Most tech tools should look like tech tools. 49 49 - - An editorial/premium brief does NOT need the same expressive serif everyone is using right now. Premium can be Swiss-modern, can be neo-grotesque, can be a literal monospace, can be a quiet humanist sans. 50 50 - - A children's product does NOT need a rounded display font. Kids' books use real type. 51 51 - - A "modern" brief does NOT need a geometric sans. The most modern thing you can do in 2026 is not use the font everyone else is using. 52 52 - 53 53 - **System fonts are underrated**: `-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui` looks native, loads instantly, and is highly readable. Consider this for apps where performance > personality. 54 54 - 55 55 - ### Pairing Principles 56 56 - 57 57 - **The non-obvious truth**: You often don't need a second font. One well-chosen font family in multiple weights creates cleaner hierarchy than two competing typefaces. Only add a second font when you need genuine contrast (e.g., display headlines + body serif). 58 58 - 59 59 - When pairing, contrast on multiple axes: 60 60 - 61 61 - - Serif + Sans (structure contrast) 62 62 - - Geometric + Humanist (personality contrast) 63 63 - - Condensed display + Wide body (proportion contrast) 64 64 - 65 65 - **Never pair fonts that are similar but not identical** (e.g., two geometric sans-serifs). They create visual tension without clear hierarchy. 66 66 - 67 67 - ### Web Font Loading 68 68 - 69 69 - The layout shift problem: fonts load late, text reflows, and users see content jump. Here's the fix: 70 70 - 71 71 - ```css 72 72 - /* 1. Use font-display: swap for visibility */ 73 73 - @font-face { 74 74 - font-family: "CustomFont"; 75 75 - src: url("font.woff2") format("woff2"); 76 76 - font-display: swap; 77 77 - } 78 78 - 79 79 - /* 2. Match fallback metrics to minimize shift */ 80 80 - @font-face { 81 81 - font-family: "CustomFont-Fallback"; 82 82 - src: local("Arial"); 83 83 - size-adjust: 105%; /* Scale to match x-height */ 84 84 - ascent-override: 90%; /* Match ascender height */ 85 85 - descent-override: 20%; /* Match descender depth */ 86 86 - line-gap-override: 10%; /* Match line spacing */ 87 87 - } 88 88 - 89 89 - body { 90 90 - font-family: "CustomFont", "CustomFont-Fallback", sans-serif; 91 91 - } 92 92 - ``` 93 93 - 94 94 - Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. 95 95 - 96 96 - ## Modern Web Typography 97 97 - 98 98 - ### Fluid Type 99 99 - 100 100 - Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the viewport. The middle value (e.g., `5vw + 1rem`) controls scaling rate—higher vw = faster scaling. Add a rem offset so it doesn't collapse to 0 on small screens. 101 101 - 102 102 - **Use fluid type for**: Headings and display text on marketing/content pages where text dominates the layout and needs to breathe across viewport sizes. 103 103 - 104 104 - **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. 105 105 - 106 106 - ### OpenType Features 107 107 - 108 108 - Most developers don't know these exist. Use them for polish: 109 109 - 110 110 - ```css 111 111 - /* Tabular numbers for data alignment */ 112 112 - .data-table { 113 113 - font-variant-numeric: tabular-nums; 114 114 - } 115 115 - 116 116 - /* Proper fractions */ 117 117 - .recipe-amount { 118 118 - font-variant-numeric: diagonal-fractions; 119 119 - } 120 120 - 121 121 - /* Small caps for abbreviations */ 122 122 - abbr { 123 123 - font-variant-caps: all-small-caps; 124 124 - } 125 125 - 126 126 - /* Disable ligatures in code */ 127 127 - code { 128 128 - font-variant-ligatures: none; 129 129 - } 130 130 - 131 131 - /* Enable kerning (usually on by default, but be explicit) */ 132 132 - body { 133 133 - font-kerning: normal; 134 134 - } 135 135 - ``` 136 136 - 137 137 - Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). 138 138 - 139 139 - ## Typography System Architecture 140 140 - 141 141 - Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. 142 142 - 143 143 - ## Accessibility Considerations 144 144 - 145 145 - Beyond contrast ratios (which are well-documented), consider: 146 146 - 147 147 - - **Never disable zoom**: `user-scalable=no` breaks accessibility. If your layout breaks at 200% zoom, fix the layout. 148 148 - - **Use rem/em for font sizes**: This respects user browser settings. Never `px` for body text. 149 149 - - **Minimum 16px body text**: Smaller than this strains eyes and fails WCAG on mobile. 150 150 - - **Adequate touch targets**: Text links need padding or line-height that creates 44px+ tap targets. 151 151 - 152 152 - --- 153 153 - 154 154 - **Avoid**: More than 2-3 font families per project. Skipping fallback font definitions. Ignoring font loading performance (FOUT/FOIT). Using decorative fonts for body text.

-108

.agents/skills/impeccable/reference/ux-writing.md

reviewed

··· 1 1 - # UX Writing 2 2 - 3 3 - ## The Button Label Problem 4 4 - 5 5 - **Never use "OK", "Submit", or "Yes/No".** These are lazy and ambiguous. Use specific verb + object patterns: 6 6 - 7 7 - | Bad | Good | Why | 8 8 - | ---------- | -------------- | ----------------------------- | 9 9 - | OK | Save changes | Says what will happen | 10 10 - | Submit | Create account | Outcome-focused | 11 11 - | Yes | Delete message | Confirms the action | 12 12 - | Cancel | Keep editing | Clarifies what "cancel" means | 13 13 - | Click here | Download PDF | Describes the destination | 14 14 - 15 15 - **For destructive actions**, name the destruction: 16 16 - 17 17 - - "Delete" not "Remove" (delete is permanent, remove implies recoverable) 18 18 - - "Delete 5 items" not "Delete selected" (show the count) 19 19 - 20 20 - ## Error Messages: The Formula 21 21 - 22 22 - Every error message should answer: (1) What happened? (2) Why? (3) How to fix it? Example: "Email address isn't valid. Please include an @ symbol." not "Invalid input". 23 23 - 24 24 - ### Error Message Templates 25 25 - 26 26 - | Situation | Template | 27 27 - | --------------------- | ------------------------------------------------------------------------------ | 28 28 - | **Format error** | "[Field] needs to be [format]. Example: [example]" | 29 29 - | **Missing required** | "Please enter [what's missing]" | 30 30 - | **Permission denied** | "You don't have access to [thing]. [What to do instead]" | 31 31 - | **Network error** | "We couldn't reach [thing]. Check your connection and [action]." | 32 32 - | **Server error** | "Something went wrong on our end. We're looking into it. [Alternative action]" | 33 33 - 34 34 - ### Don't Blame the User 35 35 - 36 36 - Reframe errors: "Please enter a date in MM/DD/YYYY format" not "You entered an invalid date". 37 37 - 38 38 - ## Empty States Are Opportunities 39 39 - 40 40 - Empty states are onboarding moments: (1) Acknowledge briefly, (2) Explain the value of filling it, (3) Provide a clear action. "No projects yet. Create your first one to get started." not just "No items". 41 41 - 42 42 - ## Voice vs Tone 43 43 - 44 44 - **Voice** is your brand's personality—consistent everywhere. 45 45 - **Tone** adapts to the moment. 46 46 - 47 47 - | Moment | Tone Shift | 48 48 - | ------------------- | -------------------------------------------------------------- | 49 49 - | Success | Celebratory, brief: "Done! Your changes are live." | 50 50 - | Error | Empathetic, helpful: "That didn't work. Here's what to try..." | 51 51 - | Loading | Reassuring: "Saving your work..." | 52 52 - | Destructive confirm | Serious, clear: "Delete this project? This can't be undone." | 53 53 - 54 54 - **Never use humor for errors.** Users are already frustrated. Be helpful, not cute. 55 55 - 56 56 - ## Writing for Accessibility 57 57 - 58 58 - **Link text** must have standalone meaning—"View pricing plans" not "Click here". **Alt text** describes information, not the image—"Revenue increased 40% in Q4" not "Chart". Use `alt=""` for decorative images. **Icon buttons** need `aria-label` for screen reader context. 59 59 - 60 60 - ## Writing for Translation 61 61 - 62 62 - ### Plan for Expansion 63 63 - 64 64 - German text is ~30% longer than English. Allocate space: 65 65 - 66 66 - | Language | Expansion | 67 67 - | -------- | ---------------------------------- | 68 68 - | German | +30% | 69 69 - | French | +20% | 70 70 - | Finnish | +30-40% | 71 71 - | Chinese | -30% (fewer chars, but same width) | 72 72 - 73 73 - ### Translation-Friendly Patterns 74 74 - 75 75 - Keep numbers separate ("New messages: 3" not "You have 3 new messages"). Use full sentences as single strings (word order varies by language). Avoid abbreviations ("5 minutes ago" not "5 mins ago"). Give translators context about where strings appear. 76 76 - 77 77 - ## Consistency: The Terminology Problem 78 78 - 79 79 - Pick one term and stick with it: 80 80 - 81 81 - | Inconsistent | Consistent | 82 82 - | -------------------------------- | ---------- | 83 83 - | Delete / Remove / Trash | Delete | 84 84 - | Settings / Preferences / Options | Settings | 85 85 - | Sign in / Log in / Enter | Sign in | 86 86 - | Create / Add / New | Create | 87 87 - 88 88 - Build a terminology glossary and enforce it. Variety creates confusion. 89 89 - 90 90 - ## Avoid Redundant Copy 91 91 - 92 92 - If the heading explains it, the intro is redundant. If the button is clear, don't explain it again. Say it once, say it well. 93 93 - 94 94 - ## Loading States 95 95 - 96 96 - Be specific: "Saving your draft..." not "Loading...". For long waits, set expectations ("This usually takes 30 seconds") or show progress. 97 97 - 98 98 - ## Confirmation Dialogs: Use Sparingly 99 99 - 100 100 - Most confirmation dialogs are design failures—consider undo instead. When you must confirm: name the action, explain consequences, use specific button labels ("Delete project" / "Keep project", not "Yes" / "No"). 101 101 - 102 102 - ## Form Instructions 103 103 - 104 104 - Show format with placeholders, not instructions. For non-obvious fields, explain why you're asking. 105 105 - 106 106 - --- 107 107 - 108 108 - **Avoid**: Jargon without explanation. Blaming users ("You made an error" → "This field is required"). Vague errors ("Something went wrong"). Varying terminology for variety. Humor for errors.

-225

.agents/skills/impeccable/scripts/cleanup-deprecated.mjs

reviewed

··· 1 1 - #!/usr/bin/env node 2 2 - /** 3 3 - * Cleans up deprecated Impeccable skill files, symlinks, and 4 4 - * skills-lock.json entries left over from previous versions. 5 5 - * 6 6 - * Safe to run repeatedly -- it is a no-op when nothing needs cleaning. 7 7 - * 8 8 - * Usage (from the project root): 9 9 - * node {{scripts_path}}/cleanup-deprecated.mjs 10 10 - * 11 11 - * What it does: 12 12 - * 1. Finds every harness-specific skills directory (.claude/skills, 13 13 - * .cursor/skills, .agents/skills, etc.). 14 14 - * 2. For each deprecated skill name (with and without i- prefix), 15 15 - * checks if the directory exists and its SKILL.md mentions 16 16 - * "impeccable" (to avoid deleting unrelated user skills). 17 17 - * 3. Deletes confirmed matches (files, directories, or symlinks). 18 18 - * 4. Removes the corresponding entries from skills-lock.json. 19 19 - */ 20 20 - 21 21 - import { existsSync, readFileSync, writeFileSync, rmSync, lstatSync, unlinkSync } from "node:fs"; 22 22 - import { join, resolve } from "node:path"; 23 23 - 24 24 - // Skills that were renamed, merged, or folded in v2.0 and v2.1. 25 25 - const DEPRECATED_NAMES = [ 26 26 - "frontend-design", // renamed to impeccable (v2.0) 27 27 - "teach-impeccable", // folded into /impeccable teach (v2.0) 28 28 - "arrange", // renamed to layout (v2.1) 29 29 - "normalize", // merged into polish (v2.1) 30 30 - "onboard", // merged into harden (v2.1) 31 31 - "extract", // merged into /impeccable extract (v2.1) 32 32 - ]; 33 33 - 34 34 - // All known harness directories that may contain a skills/ subfolder. 35 35 - const HARNESS_DIRS = [ 36 36 - ".claude", 37 37 - ".cursor", 38 38 - ".gemini", 39 39 - ".codex", 40 40 - ".agents", 41 41 - ".trae", 42 42 - ".trae-cn", 43 43 - ".pi", 44 44 - ".opencode", 45 45 - ".kiro", 46 46 - ".rovodev", 47 47 - ]; 48 48 - 49 49 - /** 50 50 - * Walk up from startDir until we find a directory that looks like a 51 51 - * project root (has package.json, .git, or skills-lock.json). 52 52 - */ 53 53 - export function findProjectRoot(startDir = process.cwd()) { 54 54 - let dir = resolve(startDir); 55 55 - const { root } = { root: "/" }; 56 56 - while (dir !== root) { 57 57 - if ( 58 58 - existsSync(join(dir, "package.json")) || 59 59 - existsSync(join(dir, ".git")) || 60 60 - existsSync(join(dir, "skills-lock.json")) 61 61 - ) { 62 62 - return dir; 63 63 - } 64 64 - const parent = resolve(dir, ".."); 65 65 - if (parent === dir) break; 66 66 - dir = parent; 67 67 - } 68 68 - return resolve(startDir); 69 69 - } 70 70 - 71 71 - /** 72 72 - * Check whether a skill directory belongs to Impeccable by reading its 73 73 - * SKILL.md and looking for the word "impeccable" (case-insensitive). 74 74 - * Returns false for non-existent paths or skills that don't match. 75 75 - */ 76 76 - export function isImpeccableSkill(skillDir) { 77 77 - const skillMd = join(skillDir, "SKILL.md"); 78 78 - if (!existsSync(skillMd)) return false; 79 79 - try { 80 80 - const content = readFileSync(skillMd, "utf-8"); 81 81 - return /impeccable/i.test(content); 82 82 - } catch { 83 83 - return false; 84 84 - } 85 85 - } 86 86 - 87 87 - /** 88 88 - * Build the full list of names to check: each deprecated name, plus 89 89 - * its i-prefixed variant. 90 90 - */ 91 91 - export function buildTargetNames() { 92 92 - const names = []; 93 93 - for (const name of DEPRECATED_NAMES) { 94 94 - names.push(name); 95 95 - names.push(`i-${name}`); 96 96 - } 97 97 - return names; 98 98 - } 99 99 - 100 100 - /** 101 101 - * Find every skills directory across all harness dirs in the project. 102 102 - * Returns absolute paths that exist on disk. 103 103 - */ 104 104 - export function findSkillsDirs(projectRoot) { 105 105 - const dirs = []; 106 106 - for (const harness of HARNESS_DIRS) { 107 107 - const candidate = join(projectRoot, harness, "skills"); 108 108 - if (existsSync(candidate)) { 109 109 - dirs.push(candidate); 110 110 - } 111 111 - } 112 112 - return dirs; 113 113 - } 114 114 - 115 115 - /** 116 116 - * Remove deprecated skill directories/symlinks from all harness dirs. 117 117 - * Returns an array of paths that were deleted. 118 118 - */ 119 119 - export function removeDeprecatedSkills(projectRoot) { 120 120 - const targets = buildTargetNames(); 121 121 - const skillsDirs = findSkillsDirs(projectRoot); 122 122 - const deleted = []; 123 123 - 124 124 - for (const skillsDir of skillsDirs) { 125 125 - for (const name of targets) { 126 126 - const skillPath = join(skillsDir, name); 127 127 - 128 128 - // Use lstat to detect symlinks (existsSync follows symlinks and 129 129 - // returns false for dangling ones). 130 130 - let stat; 131 131 - try { 132 132 - stat = lstatSync(skillPath); 133 133 - } catch { 134 134 - continue; // does not exist at all 135 135 - } 136 136 - 137 137 - if (stat.isSymbolicLink()) { 138 138 - // Symlink: check the target if it's alive, otherwise treat 139 139 - // dangling symlinks to deprecated names as safe to remove. 140 140 - const targetAlive = existsSync(skillPath); 141 141 - const isMatch = targetAlive ? isImpeccableSkill(skillPath) : true; 142 142 - if (isMatch) { 143 143 - unlinkSync(skillPath); 144 144 - deleted.push(skillPath); 145 145 - } 146 146 - continue; 147 147 - } 148 148 - 149 149 - // Regular directory -- verify it belongs to impeccable 150 150 - if (isImpeccableSkill(skillPath)) { 151 151 - rmSync(skillPath, { recursive: true, force: true }); 152 152 - deleted.push(skillPath); 153 153 - } 154 154 - } 155 155 - } 156 156 - 157 157 - return deleted; 158 158 - } 159 159 - 160 160 - /** 161 161 - * Remove deprecated entries from skills-lock.json. 162 162 - * Only removes entries whose source is "pbakaus/impeccable". 163 163 - * Returns the list of removed skill names. 164 164 - */ 165 165 - export function cleanSkillsLock(projectRoot) { 166 166 - const lockPath = join(projectRoot, "skills-lock.json"); 167 167 - if (!existsSync(lockPath)) return []; 168 168 - 169 169 - let lock; 170 170 - try { 171 171 - lock = JSON.parse(readFileSync(lockPath, "utf-8")); 172 172 - } catch { 173 173 - return []; 174 174 - } 175 175 - 176 176 - if (!lock.skills || typeof lock.skills !== "object") return []; 177 177 - 178 178 - const targets = buildTargetNames(); 179 179 - const removed = []; 180 180 - 181 181 - for (const name of targets) { 182 182 - const entry = lock.skills[name]; 183 183 - if (!entry) continue; 184 184 - // Only remove if it belongs to impeccable 185 185 - if (entry.source === "pbakaus/impeccable") { 186 186 - delete lock.skills[name]; 187 187 - removed.push(name); 188 188 - } 189 189 - } 190 190 - 191 191 - if (removed.length > 0) { 192 192 - writeFileSync(lockPath, JSON.stringify(lock, null, 2) + "\n", "utf-8"); 193 193 - } 194 194 - 195 195 - return removed; 196 196 - } 197 197 - 198 198 - /** 199 199 - * Run the full cleanup. Returns a summary object. 200 200 - */ 201 201 - export function cleanup(projectRoot) { 202 202 - const root = projectRoot || findProjectRoot(); 203 203 - const deletedPaths = removeDeprecatedSkills(root); 204 204 - const removedLockEntries = cleanSkillsLock(root); 205 205 - return { deletedPaths, removedLockEntries, projectRoot: root }; 206 206 - } 207 207 - 208 208 - // CLI entry point 209 209 - if (process.argv[1] && resolve(process.argv[1]) === resolve(new URL(import.meta.url).pathname)) { 210 210 - const result = cleanup(); 211 211 - if (result.deletedPaths.length === 0 && result.removedLockEntries.length === 0) { 212 212 - console.log("No deprecated Impeccable skills found. Nothing to clean up."); 213 213 - } else { 214 214 - if (result.deletedPaths.length > 0) { 215 215 - console.log(`Removed ${result.deletedPaths.length} deprecated skill(s):`); 216 216 - for (const p of result.deletedPaths) console.log(` - ${p}`); 217 217 - } 218 218 - if (result.removedLockEntries.length > 0) { 219 219 - console.log( 220 220 - `Cleaned ${result.removedLockEntries.length} entry/entries from skills-lock.json:`, 221 221 - ); 222 222 - for (const name of result.removedLockEntries) console.log(` - ${name}`); 223 223 - } 224 224 - } 225 225 - }

-126

.agents/skills/layout/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: layout 3 3 - description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Current Layout 18 18 - 19 19 - Analyze what's weak about the current spatial design: 20 20 - 21 21 - 1. **Spacing**: 22 22 - - Is spacing consistent or arbitrary? (Random padding/margin values) 23 23 - - Is all spacing the same? (Equal padding everywhere = no rhythm) 24 24 - - Are related elements grouped tightly, with generous space between groups? 25 25 - 26 26 - 2. **Visual hierarchy**: 27 27 - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? 28 28 - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) 29 29 - - Does whitespace guide the eye to what matters? 30 30 - 31 31 - 3. **Grid & structure**: 32 32 - - Is there a clear underlying structure, or does the layout feel random? 33 33 - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) 34 34 - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 35 35 - 36 36 - 4. **Rhythm & variety**: 37 37 - - Does the layout have visual rhythm? (Alternating tight/generous spacing) 38 38 - - Is every section structured the same way? (Monotonous repetition) 39 39 - - Are there intentional moments of surprise or emphasis? 40 40 - 41 41 - 5. **Density**: 42 42 - - Is the layout too cramped? (Not enough breathing room) 43 43 - - Is the layout too sparse? (Excessive whitespace without purpose) 44 44 - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) 45 45 - 46 46 - **CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. 47 47 - 48 48 - ## Plan Layout Improvements 49 49 - 50 50 - Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. 51 51 - 52 52 - Create a systematic plan: 53 53 - 54 54 - - **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. 55 55 - - **Hierarchy strategy**: How will space communicate importance? 56 56 - - **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. 57 57 - - **Rhythm**: Where should spacing be tight vs generous? 58 58 - 59 59 - ## Improve Layout Systematically 60 60 - 61 61 - ### Establish a Spacing System 62 62 - 63 63 - - Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. 64 64 - - Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` 65 65 - - Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks 66 66 - - Apply `clamp()` for fluid spacing that breathes on larger screens 67 67 - 68 68 - ### Create Visual Rhythm 69 69 - 70 70 - - **Tight grouping** for related elements (8-12px between siblings) 71 71 - - **Generous separation** between distinct sections (48-96px) 72 72 - - **Varied spacing** within sections — not every row needs the same gap 73 73 - - **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense 74 74 - 75 75 - ### Choose the Right Layout Tool 76 76 - 77 77 - - **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. 78 78 - - **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. 79 79 - - **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. 80 80 - - Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. 81 81 - - Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. 82 82 - 83 83 - ### Break Card Grid Monotony 84 84 - 85 85 - - Don't default to card grids for everything — spacing and alignment create visual grouping naturally 86 86 - - Use cards only when content is truly distinct and actionable — never nest cards inside cards 87 87 - - Vary card sizes, span columns, or mix cards with non-card content to break repetition 88 88 - 89 89 - ### Strengthen Visual Hierarchy 90 90 - 91 91 - - Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. 92 92 - - Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). 93 93 - - Create clear content groupings through proximity and separation. 94 94 - 95 95 - ### Manage Depth & Elevation 96 96 - 97 97 - - Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) 98 98 - - Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle 99 99 - - Use elevation to reinforce hierarchy, not as decoration 100 100 - 101 101 - ### Optical Adjustments 102 102 - 103 103 - - If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. 104 104 - 105 105 - **NEVER**: 106 106 - 107 107 - - Use arbitrary spacing values outside your scale 108 108 - - Make all spacing equal — variety creates hierarchy 109 109 - - Wrap everything in cards — not everything needs a container 110 110 - - Nest cards inside cards — use spacing and dividers for hierarchy within 111 111 - - Use identical card grids everywhere (icon + heading + text, repeated) 112 112 - - Center everything — left-aligned with asymmetry feels more designed 113 113 - - Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. 114 114 - - Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job 115 115 - - Use arbitrary z-index values (999, 9999) — build a semantic scale 116 116 - 117 117 - ## Verify Layout Improvements 118 118 - 119 119 - - **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? 120 120 - - **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? 121 121 - - **Hierarchy**: Is the most important content obvious within 2 seconds? 122 122 - - **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? 123 123 - - **Consistency**: Is the spacing system applied uniformly? 124 124 - - **Responsiveness**: Does the layout adapt gracefully across screen sizes? 125 125 - 126 126 - Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional.

-288

.agents/skills/optimize/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: optimize 3 3 - description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Identify and fix performance issues to create faster, smoother user experiences. 10 10 - 11 11 - ## Assess Performance Issues 12 12 - 13 13 - Understand current performance and identify problems: 14 14 - 15 15 - 1. **Measure current state**: 16 16 - - **Core Web Vitals**: LCP, FID/INP, CLS scores 17 17 - - **Load time**: Time to interactive, first contentful paint 18 18 - - **Bundle size**: JavaScript, CSS, image sizes 19 19 - - **Runtime performance**: Frame rate, memory usage, CPU usage 20 20 - - **Network**: Request count, payload sizes, waterfall 21 21 - 22 22 - 2. **Identify bottlenecks**: 23 23 - - What's slow? (Initial load? Interactions? Animations?) 24 24 - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) 25 25 - - How bad is it? (Perceivable? Annoying? Blocking?) 26 26 - - Who's affected? (All users? Mobile only? Slow connections?) 27 27 - 28 28 - **CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. 29 29 - 30 30 - ## Optimization Strategy 31 31 - 32 32 - Create systematic improvement plan: 33 33 - 34 34 - ### Loading Performance 35 35 - 36 36 - **Optimize Images**: 37 37 - 38 38 - - Use modern formats (WebP, AVIF) 39 39 - - Proper sizing (don't load 3000px image for 300px display) 40 40 - - Lazy loading for below-fold images 41 41 - - Responsive images (`srcset`, `picture` element) 42 42 - - Compress images (80-85% quality is usually imperceptible) 43 43 - - Use CDN for faster delivery 44 44 - 45 45 - ```html 46 46 - <img 47 47 - src="hero.webp" 48 48 - srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" 49 49 - sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px" 50 50 - loading="lazy" 51 51 - alt="Hero image" 52 52 - /> 53 53 - ``` 54 54 - 55 55 - **Reduce JavaScript Bundle**: 56 56 - 57 57 - - Code splitting (route-based, component-based) 58 58 - - Tree shaking (remove unused code) 59 59 - - Remove unused dependencies 60 60 - - Lazy load non-critical code 61 61 - - Use dynamic imports for large components 62 62 - 63 63 - ```javascript 64 64 - // Lazy load heavy component 65 65 - const HeavyChart = lazy(() => import("./HeavyChart")); 66 66 - ``` 67 67 - 68 68 - **Optimize CSS**: 69 69 - 70 70 - - Remove unused CSS 71 71 - - Critical CSS inline, rest async 72 72 - - Minimize CSS files 73 73 - - Use CSS containment for independent regions 74 74 - 75 75 - **Optimize Fonts**: 76 76 - 77 77 - - Use `font-display: swap` or `optional` 78 78 - - Subset fonts (only characters you need) 79 79 - - Preload critical fonts 80 80 - - Use system fonts when appropriate 81 81 - - Limit font weights loaded 82 82 - 83 83 - ```css 84 84 - @font-face { 85 85 - font-family: "CustomFont"; 86 86 - src: url("/fonts/custom.woff2") format("woff2"); 87 87 - font-display: swap; /* Show fallback immediately */ 88 88 - unicode-range: U+0020-007F; /* Basic Latin only */ 89 89 - } 90 90 - ``` 91 91 - 92 92 - **Optimize Loading Strategy**: 93 93 - 94 94 - - Critical resources first (async/defer non-critical) 95 95 - - Preload critical assets 96 96 - - Prefetch likely next pages 97 97 - - Service worker for offline/caching 98 98 - - HTTP/2 or HTTP/3 for multiplexing 99 99 - 100 100 - ### Rendering Performance 101 101 - 102 102 - **Avoid Layout Thrashing**: 103 103 - 104 104 - ```javascript 105 105 - // ❌ Bad: Alternating reads and writes (causes reflows) 106 106 - elements.forEach((el) => { 107 107 - const height = el.offsetHeight; // Read (forces layout) 108 108 - el.style.height = height * 2; // Write 109 109 - }); 110 110 - 111 111 - // ✅ Good: Batch reads, then batch writes 112 112 - const heights = elements.map((el) => el.offsetHeight); // All reads 113 113 - elements.forEach((el, i) => { 114 114 - el.style.height = heights[i] * 2; // All writes 115 115 - }); 116 116 - ``` 117 117 - 118 118 - **Optimize Rendering**: 119 119 - 120 120 - - Use CSS `contain` property for independent regions 121 121 - - Minimize DOM depth (flatter is faster) 122 122 - - Reduce DOM size (fewer elements) 123 123 - - Use `content-visibility: auto` for long lists 124 124 - - Virtual scrolling for very long lists (react-window, react-virtualized) 125 125 - 126 126 - **Reduce Paint & Composite**: 127 127 - 128 128 - - Use `transform` and `opacity` for animations (GPU-accelerated) 129 129 - - Avoid animating layout properties (width, height, top, left) 130 130 - - Use `will-change` sparingly for known expensive operations 131 131 - - Minimize paint areas (smaller is faster) 132 132 - 133 133 - ### Animation Performance 134 134 - 135 135 - **GPU Acceleration**: 136 136 - 137 137 - ```css 138 138 - /* ✅ GPU-accelerated (fast) */ 139 139 - .animated { 140 140 - transform: translateX(100px); 141 141 - opacity: 0.5; 142 142 - } 143 143 - 144 144 - /* ❌ CPU-bound (slow) */ 145 145 - .animated { 146 146 - left: 100px; 147 147 - width: 300px; 148 148 - } 149 149 - ``` 150 150 - 151 151 - **Smooth 60fps**: 152 152 - 153 153 - - Target 16ms per frame (60fps) 154 154 - - Use `requestAnimationFrame` for JS animations 155 155 - - Debounce/throttle scroll handlers 156 156 - - Use CSS animations when possible 157 157 - - Avoid long-running JavaScript during animations 158 158 - 159 159 - **Intersection Observer**: 160 160 - 161 161 - ```javascript 162 162 - // Efficiently detect when elements enter viewport 163 163 - const observer = new IntersectionObserver((entries) => { 164 164 - entries.forEach((entry) => { 165 165 - if (entry.isIntersecting) { 166 166 - // Element is visible, lazy load or animate 167 167 - } 168 168 - }); 169 169 - }); 170 170 - ``` 171 171 - 172 172 - ### React/Framework Optimization 173 173 - 174 174 - **React-specific**: 175 175 - 176 176 - - Use `memo()` for expensive components 177 177 - - `useMemo()` and `useCallback()` for expensive computations 178 178 - - Virtualize long lists 179 179 - - Code split routes 180 180 - - Avoid inline function creation in render 181 181 - - Use React DevTools Profiler 182 182 - 183 183 - **Framework-agnostic**: 184 184 - 185 185 - - Minimize re-renders 186 186 - - Debounce expensive operations 187 187 - - Memoize computed values 188 188 - - Lazy load routes and components 189 189 - 190 190 - ### Network Optimization 191 191 - 192 192 - **Reduce Requests**: 193 193 - 194 194 - - Combine small files 195 195 - - Use SVG sprites for icons 196 196 - - Inline small critical assets 197 197 - - Remove unused third-party scripts 198 198 - 199 199 - **Optimize APIs**: 200 200 - 201 201 - - Use pagination (don't load everything) 202 202 - - GraphQL to request only needed fields 203 203 - - Response compression (gzip, brotli) 204 204 - - HTTP caching headers 205 205 - - CDN for static assets 206 206 - 207 207 - **Optimize for Slow Connections**: 208 208 - 209 209 - - Adaptive loading based on connection (navigator.connection) 210 210 - - Optimistic UI updates 211 211 - - Request prioritization 212 212 - - Progressive enhancement 213 213 - 214 214 - ## Core Web Vitals Optimization 215 215 - 216 216 - ### Largest Contentful Paint (LCP < 2.5s) 217 217 - 218 218 - - Optimize hero images 219 219 - - Inline critical CSS 220 220 - - Preload key resources 221 221 - - Use CDN 222 222 - - Server-side rendering 223 223 - 224 224 - ### First Input Delay (FID < 100ms) / INP (< 200ms) 225 225 - 226 226 - - Break up long tasks 227 227 - - Defer non-critical JavaScript 228 228 - - Use web workers for heavy computation 229 229 - - Reduce JavaScript execution time 230 230 - 231 231 - ### Cumulative Layout Shift (CLS < 0.1) 232 232 - 233 233 - - Set dimensions on images and videos 234 234 - - Don't inject content above existing content 235 235 - - Use `aspect-ratio` CSS property 236 236 - - Reserve space for ads/embeds 237 237 - - Avoid animations that cause layout shifts 238 238 - 239 239 - ```css 240 240 - /* Reserve space for image */ 241 241 - .image-container { 242 242 - aspect-ratio: 16 / 9; 243 243 - } 244 244 - ``` 245 245 - 246 246 - ## Performance Monitoring 247 247 - 248 248 - **Tools to use**: 249 249 - 250 250 - - Chrome DevTools (Lighthouse, Performance panel) 251 251 - - WebPageTest 252 252 - - Core Web Vitals (Chrome UX Report) 253 253 - - Bundle analyzers (webpack-bundle-analyzer) 254 254 - - Performance monitoring (Sentry, DataDog, New Relic) 255 255 - 256 256 - **Key metrics**: 257 257 - 258 258 - - LCP, FID/INP, CLS (Core Web Vitals) 259 259 - - Time to Interactive (TTI) 260 260 - - First Contentful Paint (FCP) 261 261 - - Total Blocking Time (TBT) 262 262 - - Bundle size 263 263 - - Request count 264 264 - 265 265 - **IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. 266 266 - 267 267 - **NEVER**: 268 268 - 269 269 - - Optimize without measuring (premature optimization) 270 270 - - Sacrifice accessibility for performance 271 271 - - Break functionality while optimizing 272 272 - - Use `will-change` everywhere (creates new layers, uses memory) 273 273 - - Lazy load above-fold content 274 274 - - Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) 275 275 - - Forget about mobile performance (often slower devices, slower connections) 276 276 - 277 277 - ## Verify Improvements 278 278 - 279 279 - Test that optimizations worked: 280 280 - 281 281 - - **Before/after metrics**: Compare Lighthouse scores 282 282 - - **Real user monitoring**: Track improvements for real users 283 283 - - **Different devices**: Test on low-end Android, not just flagship iPhone 284 284 - - **Slow connections**: Throttle to 3G, test experience 285 285 - - **No regressions**: Ensure functionality still works 286 286 - - **User perception**: Does it _feel_ faster? 287 287 - 288 288 - Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.

-159

.agents/skills/overdrive/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: overdrive 3 3 - description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Start your response with: 10 10 - 11 11 - ``` 12 12 - ──────────── ⚡ OVERDRIVE ───────────── 13 13 - 》》》 Entering overdrive mode... 14 14 - ``` 15 15 - 16 16 - Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. 17 17 - 18 18 - ## MANDATORY PREPARATION 19 19 - 20 20 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 21 21 - 22 22 - **EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. 23 23 - 24 24 - ### Propose Before Building 25 25 - 26 26 - This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: 27 27 - 28 28 - 1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 29 29 - 2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 30 30 - 3. Only proceed with the direction the user confirms. 31 31 - 32 32 - Skipping this step risks building something embarrassing that needs to be thrown away. 33 33 - 34 34 - ### Iterate with Browser Automation 35 35 - 36 36 - Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. 37 37 - 38 38 - --- 39 39 - 40 40 - ## Assess What "Extraordinary" Means Here 41 41 - 42 42 - The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** 43 43 - 44 44 - ### For visual/marketing surfaces 45 45 - 46 46 - Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. 47 47 - 48 48 - ### For functional UI 49 49 - 50 50 - Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. 51 51 - 52 52 - ### For performance-critical UI 53 53 - 54 54 - The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. 55 55 - 56 56 - ### For data-heavy interfaces 57 57 - 58 58 - Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. 59 59 - 60 60 - **The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. 61 61 - 62 62 - ## The Toolkit 63 63 - 64 64 - Organized by what you're trying to achieve, not by technology name. 65 65 - 66 66 - ### Make transitions feel cinematic 67 67 - 68 68 - - **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. 69 69 - - **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes 70 70 - - **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. 71 71 - 72 72 - ### Tie animation to scroll position 73 73 - 74 74 - - **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) 75 75 - 76 76 - ### Render beyond CSS 77 77 - 78 78 - - **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. 79 79 - - **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. 80 80 - - **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. 81 81 - - **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. 82 82 - 83 83 - ### Make data feel alive 84 84 - 85 85 - - **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. 86 86 - - **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. 87 87 - - **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. 88 88 - 89 89 - ### Animate complex properties 90 90 - 91 91 - - **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. 92 92 - - **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. 93 93 - 94 94 - ### Push performance boundaries 95 95 - 96 96 - - **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. 97 97 - - **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. 98 98 - - **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. 99 99 - 100 100 - ### Interact with the device 101 101 - 102 102 - - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. 103 103 - - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. 104 104 - 105 105 - **NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. 106 106 - 107 107 - ## Implement with Discipline 108 108 - 109 109 - ### Progressive enhancement is non-negotiable 110 110 - 111 111 - Every technique must degrade gracefully. The experience without the enhancement must still be good. 112 112 - 113 113 - ```css 114 114 - @supports (animation-timeline: scroll()) { 115 115 - .hero { 116 116 - animation-timeline: scroll(); 117 117 - } 118 118 - } 119 119 - ``` 120 120 - 121 121 - ```javascript 122 122 - if ("gpu" in navigator) { 123 123 - /* WebGPU */ 124 124 - } else if (canvas.getContext("webgl2")) { 125 125 - /* WebGL2 fallback */ 126 126 - } 127 127 - /* CSS-only fallback must still look good */ 128 128 - ``` 129 129 - 130 130 - ### Performance rules 131 131 - 132 132 - - Target 60fps. If dropping below 50, simplify. 133 133 - - Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. 134 134 - - Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. 135 135 - - Pause off-screen rendering. Kill what you can't see. 136 136 - - Test on real mid-range devices, not just your development machine. 137 137 - 138 138 - ### Polish is the difference 139 139 - 140 140 - The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. 141 141 - 142 142 - **NEVER**: 143 143 - 144 144 - - Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion 145 145 - - Ship effects that cause jank on mid-range devices 146 146 - - Use bleeding-edge APIs without a functional fallback 147 147 - - Add sound without explicit user opt-in 148 148 - - Use technical ambition to mask weak design fundamentals — fix those first with other skills 149 149 - - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise 150 150 - 151 151 - ## Verify the Result 152 152 - 153 153 - - **The wow test**: Show it to someone who hasn't seen it. Do they react? 154 154 - - **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? 155 155 - - **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? 156 156 - - **The accessibility test**: Enable reduced motion. Still beautiful? 157 157 - - **The context test**: Does this make sense for THIS brand and audience? 158 158 - 159 159 - Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do.

-226

.agents/skills/polish/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: polish 3 3 - description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - ## MANDATORY PREPARATION 10 10 - 11 11 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). 12 12 - 13 13 - --- 14 14 - 15 15 - Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. 16 16 - 17 17 - ## Design System Discovery 18 18 - 19 19 - Before polishing, understand the system you are polishing toward: 20 20 - 21 21 - 1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. 22 22 - 2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? 23 23 - 3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. 24 24 - 25 25 - If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. 26 26 - 27 27 - ## Pre-Polish Assessment 28 28 - 29 29 - Understand the current state and goals: 30 30 - 31 31 - 1. **Review completeness**: 32 32 - - Is it functionally complete? 33 33 - - Are there known issues to preserve (mark with TODOs)? 34 34 - - What's the quality bar? (MVP vs flagship feature?) 35 35 - - When does it ship? (How much time for polish?) 36 36 - 37 37 - 2. **Identify polish areas**: 38 38 - - Visual inconsistencies 39 39 - - Spacing and alignment issues 40 40 - - Interaction state gaps 41 41 - - Copy inconsistencies 42 42 - - Edge cases and error states 43 43 - - Loading and transition smoothness 44 44 - 45 45 - **CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. 46 46 - 47 47 - ## Polish Systematically 48 48 - 49 49 - Work through these dimensions methodically: 50 50 - 51 51 - ### Visual Alignment & Spacing 52 52 - 53 53 - - **Pixel-perfect alignment**: Everything lines up to grid 54 54 - - **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) 55 55 - - **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) 56 56 - - **Responsive consistency**: Spacing and alignment work at all breakpoints 57 57 - - **Grid adherence**: Elements snap to baseline grid 58 58 - 59 59 - **Check**: 60 60 - 61 61 - - Enable grid overlay and verify alignment 62 62 - - Check spacing with browser inspector 63 63 - - Test at multiple viewport sizes 64 64 - - Look for elements that "feel" off 65 65 - 66 66 - ### Typography Refinement 67 67 - 68 68 - - **Hierarchy consistency**: Same elements use same sizes/weights throughout 69 69 - - **Line length**: 45-75 characters for body text 70 70 - - **Line height**: Appropriate for font size and context 71 71 - - **Widows & orphans**: No single words on last line 72 72 - - **Hyphenation**: Appropriate for language and column width 73 73 - - **Kerning**: Adjust letter spacing where needed (especially headlines) 74 74 - - **Font loading**: No FOUT/FOIT flashes 75 75 - 76 76 - ### Color & Contrast 77 77 - 78 78 - - **Contrast ratios**: All text meets WCAG standards 79 79 - - **Consistent token usage**: No hard-coded colors, all use design tokens 80 80 - - **Theme consistency**: Works in all theme variants 81 81 - - **Color meaning**: Same colors mean same things throughout 82 82 - - **Accessible focus**: Focus indicators visible with sufficient contrast 83 83 - - **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) 84 84 - - **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency 85 85 - 86 86 - ### Interaction States 87 87 - 88 88 - Every interactive element needs all states: 89 89 - 90 90 - - **Default**: Resting state 91 91 - - **Hover**: Subtle feedback (color, scale, shadow) 92 92 - - **Focus**: Keyboard focus indicator (never remove without replacement) 93 93 - - **Active**: Click/tap feedback 94 94 - - **Disabled**: Clearly non-interactive 95 95 - - **Loading**: Async action feedback 96 96 - - **Error**: Validation or error state 97 97 - - **Success**: Successful completion 98 98 - 99 99 - **Missing states create confusion and broken experiences**. 100 100 - 101 101 - ### Micro-interactions & Transitions 102 102 - 103 103 - - **Smooth transitions**: All state changes animated appropriately (150-300ms) 104 104 - - **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. 105 105 - - **No jank**: 60fps animations, only animate transform and opacity 106 106 - - **Appropriate motion**: Motion serves purpose, not decoration 107 107 - - **Reduced motion**: Respects `prefers-reduced-motion` 108 108 - 109 109 - ### Content & Copy 110 110 - 111 111 - - **Consistent terminology**: Same things called same names throughout 112 112 - - **Consistent capitalization**: Title Case vs Sentence case applied consistently 113 113 - - **Grammar & spelling**: No typos 114 114 - - **Appropriate length**: Not too wordy, not too terse 115 115 - - **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) 116 116 - 117 117 - ### Icons & Images 118 118 - 119 119 - - **Consistent style**: All icons from same family or matching style 120 120 - - **Appropriate sizing**: Icons sized consistently for context 121 121 - - **Proper alignment**: Icons align with adjacent text optically 122 122 - - **Alt text**: All images have descriptive alt text 123 123 - - **Loading states**: Images don't cause layout shift, proper aspect ratios 124 124 - - **Retina support**: 2x assets for high-DPI screens 125 125 - 126 126 - ### Forms & Inputs 127 127 - 128 128 - - **Label consistency**: All inputs properly labeled 129 129 - - **Required indicators**: Clear and consistent 130 130 - - **Error messages**: Helpful and consistent 131 131 - - **Tab order**: Logical keyboard navigation 132 132 - - **Auto-focus**: Appropriate (don't overuse) 133 133 - - **Validation timing**: Consistent (on blur vs on submit) 134 134 - 135 135 - ### Edge Cases & Error States 136 136 - 137 137 - - **Loading states**: All async actions have loading feedback 138 138 - - **Empty states**: Helpful empty states, not just blank space 139 139 - - **Error states**: Clear error messages with recovery paths 140 140 - - **Success states**: Confirmation of successful actions 141 141 - - **Long content**: Handles very long names, descriptions, etc. 142 142 - - **No content**: Handles missing data gracefully 143 143 - - **Offline**: Appropriate offline handling (if applicable) 144 144 - 145 145 - ### Responsiveness 146 146 - 147 147 - - **All breakpoints**: Test mobile, tablet, desktop 148 148 - - **Touch targets**: 44x44px minimum on touch devices 149 149 - - **Readable text**: No text smaller than 14px on mobile 150 150 - - **No horizontal scroll**: Content fits viewport 151 151 - - **Appropriate reflow**: Content adapts logically 152 152 - 153 153 - ### Performance 154 154 - 155 155 - - **Fast initial load**: Optimize critical path 156 156 - - **No layout shift**: Elements don't jump after load (CLS) 157 157 - - **Smooth interactions**: No lag or jank 158 158 - - **Optimized images**: Appropriate formats and sizes 159 159 - - **Lazy loading**: Off-screen content loads lazily 160 160 - 161 161 - ### Code Quality 162 162 - 163 163 - - **Remove console logs**: No debug logging in production 164 164 - - **Remove commented code**: Clean up dead code 165 165 - - **Remove unused imports**: Clean up unused dependencies 166 166 - - **Consistent naming**: Variables and functions follow conventions 167 167 - - **Type safety**: No TypeScript `any` or ignored errors 168 168 - - **Accessibility**: Proper ARIA labels and semantic HTML 169 169 - 170 170 - ## Polish Checklist 171 171 - 172 172 - Go through systematically: 173 173 - 174 174 - - [ ] Visual alignment perfect at all breakpoints 175 175 - - [ ] Spacing uses design tokens consistently 176 176 - - [ ] Typography hierarchy consistent 177 177 - - [ ] All interactive states implemented 178 178 - - [ ] All transitions smooth (60fps) 179 179 - - [ ] Copy is consistent and polished 180 180 - - [ ] Icons are consistent and properly sized 181 181 - - [ ] All forms properly labeled and validated 182 182 - - [ ] Error states are helpful 183 183 - - [ ] Loading states are clear 184 184 - - [ ] Empty states are welcoming 185 185 - - [ ] Touch targets are 44x44px minimum 186 186 - - [ ] Contrast ratios meet WCAG AA 187 187 - - [ ] Keyboard navigation works 188 188 - - [ ] Focus indicators visible 189 189 - - [ ] No console errors or warnings 190 190 - - [ ] No layout shift on load 191 191 - - [ ] Works in all supported browsers 192 192 - - [ ] Respects reduced motion preference 193 193 - - [ ] Code is clean (no TODOs, console.logs, commented code) 194 194 - 195 195 - **IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. 196 196 - 197 197 - **NEVER**: 198 198 - 199 199 - - Polish before it's functionally complete 200 200 - - Spend hours on polish if it ships in 30 minutes (triage) 201 201 - - Introduce bugs while polishing (test thoroughly) 202 202 - - Ignore systematic issues (if spacing is off everywhere, fix the system) 203 203 - - Perfect one thing while leaving others rough (consistent quality level) 204 204 - - Create new one-off components when design system equivalents exist 205 205 - - Hard-code values that should use design tokens 206 206 - 207 207 - ## Final Verification 208 208 - 209 209 - Before marking as done: 210 210 - 211 211 - - **Use it yourself**: Actually interact with the feature 212 212 - - **Test on real devices**: Not just browser DevTools 213 213 - - **Ask someone else to review**: Fresh eyes catch things 214 214 - - **Compare to design**: Match intended design 215 215 - - **Check all states**: Don't just test happy path 216 216 - 217 217 - ## Clean Up 218 218 - 219 219 - After polishing, ensure code quality: 220 220 - 221 221 - - **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. 222 222 - - **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. 223 223 - - **Consolidate tokens**: If you introduced new values, check whether they should be tokens. 224 224 - - **Verify DRYness**: Look for duplication introduced during polishing and consolidate. 225 225 - 226 226 - Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter.

-109

.agents/skills/quieter/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: quieter 3 3 - description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Current State 18 18 - 19 19 - Analyze what makes the design feel too intense: 20 20 - 21 21 - 1. **Identify intensity sources**: 22 22 - - **Color saturation**: Overly bright or saturated colors 23 23 - - **Contrast extremes**: Too much high-contrast juxtaposition 24 24 - - **Visual weight**: Too many bold, heavy elements competing 25 25 - - **Animation excess**: Too much motion or overly dramatic effects 26 26 - - **Complexity**: Too many visual elements, patterns, or decorations 27 27 - - **Scale**: Everything is large and loud with no hierarchy 28 28 - 29 29 - 2. **Understand the context**: 30 30 - - What's the purpose? (Marketing vs tool vs reading experience) 31 31 - - Who's the audience? (Some contexts need energy) 32 32 - - What's working? (Don't throw away good ideas) 33 33 - - What's the core message? (Preserve what matters) 34 34 - 35 35 - If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. 36 36 - 37 37 - **CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. 38 38 - 39 39 - ## Plan Refinement 40 40 - 41 41 - Create a strategy to reduce intensity while maintaining impact: 42 42 - 43 43 - - **Color approach**: Desaturate or shift to more sophisticated tones? 44 44 - - **Hierarchy approach**: Which elements should stay bold (very few), which should recede? 45 45 - - **Simplification approach**: What can be removed entirely? 46 46 - - **Sophistication approach**: How can we signal quality through restraint? 47 47 - 48 48 - **IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. 49 49 - 50 50 - ## Refine the Design 51 51 - 52 52 - Systematically reduce intensity across these dimensions: 53 53 - 54 54 - ### Color Refinement 55 55 - 56 56 - - **Reduce saturation**: Shift from fully saturated to 70-85% saturation 57 57 - - **Soften palette**: Replace bright colors with muted, sophisticated tones 58 58 - - **Reduce color variety**: Use fewer colors more thoughtfully 59 59 - - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) 60 60 - - **Gentler contrasts**: High contrast only where it matters most 61 61 - - **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness 62 62 - - **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead 63 63 - 64 64 - ### Visual Weight Reduction 65 65 - 66 66 - - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate 67 67 - - **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness 68 68 - - **White space**: Increase breathing room, reduce density 69 69 - - **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely 70 70 - 71 71 - ### Simplification 72 72 - 73 73 - - **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose 74 74 - - **Simplify shapes**: Reduce border radius extremes, simplify custom shapes 75 75 - - **Reduce layering**: Flatten visual hierarchy where possible 76 76 - - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows 77 77 - 78 78 - ### Motion Reduction 79 79 - 80 80 - - **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing 81 81 - - **Remove decorative animations**: Keep functional motion, remove flourishes 82 82 - - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback 83 83 - - **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic 84 84 - - **Remove animations entirely** if they're not serving a clear purpose 85 85 - 86 86 - ### Composition Refinement 87 87 - 88 88 - - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling 89 89 - - **Align to grid**: Bring rogue elements back into systematic alignment 90 90 - - **Even out spacing**: Replace extreme spacing variations with consistent rhythm 91 91 - 92 92 - **NEVER**: 93 93 - 94 94 - - Make everything the same size/weight (hierarchy still matters) 95 95 - - Remove all color (quiet ≠ grayscale) 96 96 - - Eliminate all personality (maintain character through refinement) 97 97 - - Sacrifice usability for aesthetics (functional elements still need clear affordances) 98 98 - - Make everything small and light (some anchors needed) 99 99 - 100 100 - ## Verify Quality 101 101 - 102 102 - Ensure refinement maintains quality: 103 103 - 104 104 - - **Still functional**: Can users still accomplish tasks easily? 105 105 - - **Still distinctive**: Does it have character, or is it generic now? 106 106 - - **Better reading**: Is text easier to read for extended periods? 107 107 - - **Sophistication**: Does it feel more refined and premium? 108 108 - 109 109 - Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.

-101

.agents/skills/shape/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: shape 3 3 - description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[feature to shape]" 7 7 - --- 8 8 - 9 9 - ## MANDATORY PREPARATION 10 10 - 11 11 - Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. 12 12 - 13 13 - --- 14 14 - 15 15 - Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. 16 16 - 17 17 - **Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. 18 18 - 19 19 - **Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. 20 20 - 21 21 - ## Philosophy 22 22 - 23 23 - Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. 24 24 - 25 25 - ## Phase 1: Discovery Interview 26 26 - 27 27 - **Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. 28 28 - 29 29 - Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. 30 30 - 31 31 - ### Purpose & Context 32 32 - 33 33 - - What is this feature for? What problem does it solve? 34 34 - - Who specifically will use it? (Not "users"; be specific: role, context, frequency) 35 35 - - What does success look like? How will you know this feature is working? 36 36 - - What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) 37 37 - 38 38 - ### Content & Data 39 39 - 40 40 - - What content or data does this feature display or collect? 41 41 - - What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) 42 42 - - What are the edge cases? (Empty state, error state, first-time use, power user) 43 43 - - Is any content dynamic? What changes and how often? 44 44 - 45 45 - ### Design Goals 46 46 - 47 47 - - What's the single most important thing a user should do or understand here? 48 48 - - What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) 49 49 - - Are there existing patterns in the product this should be consistent with? 50 50 - - Are there specific examples (inside or outside the product) that capture what you're going for? 51 51 - 52 52 - ### Constraints 53 53 - 54 54 - - Are there technical constraints? (Framework, performance budget, browser support) 55 55 - - Are there content constraints? (Localization, dynamic text length, user-generated content) 56 56 - - Mobile/responsive requirements? 57 57 - - Accessibility requirements beyond WCAG AA? 58 58 - 59 59 - ### Anti-Goals 60 60 - 61 61 - - What should this NOT be? What would be a wrong direction? 62 62 - - What's the biggest risk of getting this wrong? 63 63 - 64 64 - ## Phase 2: Design Brief 65 65 - 66 66 - After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. 67 67 - 68 68 - ### Brief Structure 69 69 - 70 70 - **1. Feature Summary** (2-3 sentences) 71 71 - What this is, who it's for, what it needs to accomplish. 72 72 - 73 73 - **2. Primary User Action** 74 74 - The single most important thing a user should do or understand here. 75 75 - 76 76 - **3. Design Direction** 77 77 - How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. 78 78 - 79 79 - **4. Layout Strategy** 80 80 - High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. 81 81 - 82 82 - **5. Key States** 83 83 - List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. 84 84 - 85 85 - **6. Interaction Model** 86 86 - How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? 87 87 - 88 88 - **7. Content Requirements** 89 89 - What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. 90 90 - 91 91 - **8. Recommended References** 92 92 - Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). 93 93 - 94 94 - **9. Open Questions** 95 95 - Anything unresolved that the implementer should resolve during build. 96 96 - 97 97 - --- 98 98 - 99 99 - ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. 100 100 - 101 101 - Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.)

-119

.agents/skills/typeset/SKILL.md

reviewed

··· 1 1 - --- 2 2 - name: typeset 3 3 - description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. 4 4 - version: 2.1.1 5 5 - user-invocable: true 6 6 - argument-hint: "[target]" 7 7 - --- 8 8 - 9 9 - Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. 10 10 - 11 11 - ## MANDATORY PREPARATION 12 12 - 13 13 - Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. 14 14 - 15 15 - --- 16 16 - 17 17 - ## Assess Current Typography 18 18 - 19 19 - Analyze what's weak or generic about the current type: 20 20 - 21 21 - 1. **Font choices**: 22 22 - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) 23 23 - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) 24 24 - - Are there too many font families? (More than 2-3 is almost always a mess) 25 25 - 26 26 - 2. **Hierarchy**: 27 27 - - Can you tell headings from body from captions at a glance? 28 28 - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) 29 29 - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) 30 30 - 31 31 - 3. **Sizing & scale**: 32 32 - - Is there a consistent type scale, or are sizes arbitrary? 33 33 - - Does body text meet minimum readability? (16px+) 34 34 - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) 35 35 - 36 36 - 4. **Readability**: 37 37 - - Are line lengths comfortable? (45-75 characters ideal) 38 38 - - Is line-height appropriate for the font and context? 39 39 - - Is there enough contrast between text and background? 40 40 - 41 41 - 5. **Consistency**: 42 42 - - Are the same elements styled the same way throughout? 43 43 - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) 44 44 - - Is letter-spacing intentional or default everywhere? 45 45 - 46 46 - **CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. 47 47 - 48 48 - ## Plan Typography Improvements 49 49 - 50 50 - Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. 51 51 - 52 52 - Create a systematic plan: 53 53 - 54 54 - - **Font selection**: Do fonts need replacing? What fits the brand/context? 55 55 - - **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy 56 56 - - **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) 57 57 - - **Spacing**: Line-heights, letter-spacing, and margins between typographic elements 58 58 - 59 59 - ## Improve Typography Systematically 60 60 - 61 61 - ### Font Selection 62 62 - 63 63 - If fonts need replacing: 64 64 - 65 65 - - Choose fonts that reflect the brand personality 66 66 - - Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights 67 67 - - Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) 68 68 - 69 69 - ### Establish Hierarchy 70 70 - 71 71 - Build a clear type scale: 72 72 - 73 73 - - **5 sizes cover most needs**: caption, secondary, body, subheading, heading 74 74 - - **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) 75 75 - - **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone 76 76 - - **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need 77 77 - - **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed 78 78 - 79 79 - ### Fix Readability 80 80 - 81 81 - - Set `max-width` on text containers using `ch` units (`max-width: 65ch`) 82 82 - - Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) 83 83 - - Increase line-height slightly for light-on-dark text 84 84 - - Ensure body text is at least 16px / 1rem 85 85 - 86 86 - ### Refine Details 87 87 - 88 88 - - Use `tabular-nums` for data tables and numbers that should align 89 89 - - Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text 90 90 - - Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) 91 91 - - Set `font-kerning: normal` and consider OpenType features where appropriate 92 92 - 93 93 - ### Weight Consistency 94 94 - 95 95 - - Define clear roles for each weight and stick to them 96 96 - - Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) 97 97 - - Load only the weights you actually use (each weight adds to page load) 98 98 - 99 99 - **NEVER**: 100 100 - 101 101 - - Use more than 2-3 font families 102 102 - - Pick sizes arbitrarily — commit to a scale 103 103 - - Set body text below 16px 104 104 - - Use decorative/display fonts for body text 105 105 - - Disable browser zoom (`user-scalable=no`) 106 106 - - Use `px` for font sizes — use `rem` to respect user settings 107 107 - - Default to Inter/Roboto/Open Sans when personality matters 108 108 - - Pair fonts that are similar but not identical (two geometric sans-serifs) 109 109 - 110 110 - ## Verify Typography Improvements 111 111 - 112 112 - - **Hierarchy**: Can you identify heading vs body vs caption instantly? 113 113 - - **Readability**: Is body text comfortable to read in long passages? 114 114 - - **Consistency**: Are same-role elements styled identically throughout? 115 115 - - **Personality**: Does the typography reflect the brand? 116 116 - - **Performance**: Are web fonts loading efficiently without layout shift? 117 117 - - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? 118 118 - 119 119 - Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make.