Browse reusable Agent Skills, each with a clear purpose and practical guidance.
Generates multiple distinct visual variations of a component or page, exploring divergent styles, layouts, and aesthetic directions. Use when the user wants to explore design alternatives, iterate on a UI with variety, compare visual approaches, or generate multiple versions of a component or page.
Enables maximum creative freedom using inline CSS styles instead of Tailwind. Use when exploring expressive, unconventional designs without design system constraints.
This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger automatically for generic UI or design tasks.
Create or improve a 32×32 pixel-art persona face for the Frontier Faces demo (examples/04-frontier-faces/personas.mjs) — the animated agent avatars rendered by face-term.mjs / the browser <cotal-face> / the gallery. Use when the user asks to add a new persona/face/avatar, improve an existing one (hair, eyes, likeness, expression), make it "look more like" someone, or fix a face that "doesn't read". Drives the example's own tools (img2rows.mjs, render-png.mjs) and follows FACE-DESIGN.md; uses a multi-agent variant loop for likeness.
Constrains iterations to use only existing Tailwind utility classes from the codebase. Use when maintaining design system consistency is important and the component should integrate seamlessly with the existing UI.
Generate divergent UX/layout variations for interface components. Use when a user uploads a screenshot or describes an existing UI and wants redesign explorations, UX improvements, layout alternatives, or interaction pattern variations. Triggers on phrases like "make it better UX", "redesign this", "give me variations", "improve the flow", "simplify the UX", "explore different approaches", "how else could this work", or any request to rethink how an interface element works — not just how it looks. This skill focuses on structural and interaction design divergence, NOT cosmetic/style variation.
Universal mobile UX principles for touch-first interfaces. Enforces touch targets, safe areas, and mobile-specific interaction patterns.
Design engineering principles for making TUI interfaces feel polished. Use when building Textual widgets, reviewing TUI code, implementing transitions, focus states, alignment, spacing, or any visual detail work. Triggers on TUI polish, design details, "make it feel better", "feels off", layout alignment, color consistency, responsive sizing.
Scan a specific area of the app for design issues and improvement opportunities, then create Linear tickets for approved findings. Usage: /scout-design <area> (e.g., /scout-design settings, /scout-design bookkeeping). Evaluates against the Accounted design system for consistency, missing states, animation gaps, accessibility, and visual polish.