owl-listener/designer-skills
63 skills37.1k installs93k starsGitHub
Install
npx skills add https://github.com/owl-listener/designer-skillsSkills in this repo
1Presentation Deckpresentation-deck is an agent skill for solo builders and small teams who must sell design decisions without drowning stakeholders in Figma exports. It does not generate pixels—it structures the narrative for four common situations: alignment updates, critique sessions, approval showcases, and portfolio case studies. Every deck follows the same persuasion spine: hook the room on why the problem matters, supply only necessary context, show how you explored the space, present the solution with rationale, back claims with research or metrics, and close with a concrete ask. Slide guidance enforces clarity for remote reviews and large rooms. Use it when a prototype is ready for feedback, when ship-phase review needs a crisp story, or when launch and growth need a case study that proves craft and outcomes—not a screenshot dump.817installs2Data Visualizationdata-visualization is an agent skill that helps solo builders translate metrics into charts people can actually read. It walks through when to use bars versus lines, pies versus stacked bars, histograms versus scatter plots, and how to encode color without trapping colorblind users. The guidance mirrors practitioner rules—maximize data ink, label axes clearly, start bar charts at zero—so agent-generated dashboards do not embarrass you in demos or investor updates. You will use it most while implementing analytics screens in Build, but the same checklist applies in Grow when you refine lifecycle funnels and in Operate when you surface monitoring summaries. It does not replace a statistics pipeline; it makes the presentation layer honest and accessible. Pair it with your charting library of choice; the skill is library-agnostic and focused on design principles and chart grammar.719installs3Typography ScaleTypography Scale is an agent skill that walks solo builders through building a harmonious digital type system: mathematical ratios, weights, line heights, letter spacing, font pairing, and responsive constraints. It fits indie SaaS founders and one-person design-dev hybrids who need readable marketing pages and app chrome without hiring a brand studio. Use it in Build frontend when defining tokens for Tailwind or CSS variables, and earlier in Validate landing when you want pricing and hero copy to feel intentional rather than default browser sizes. The skill caps routine use to four or five sizes, enforces 16px minimum body text, and insists on testing with real copy instead of lorem ipsum. That discipline keeps AI-generated UIs from drifting into inconsistent heading jumps or cramped mobile type, which directly affects conversion and support readability.683installs4Illustration StyleIllustration Style is an agent skill that helps solo builders and designers produce an illustration style guide—not one-off artwork—so storytelling stays coherent across dashboards, onboarding, and empty states. It walks through style definition (line weight, detail level, dimensionality), color usage constrained to your brand palette, character guidelines when mascots matter, and typed illustration categories from small inline spots to large hero scenes. Application rules clarify when illustration helps versus when it clutters, plus size and animation constraints tied to your layout grid. The skill suits SaaS, mobile, and content products where one person owns both UX copy and visual tone. Use it while building UI so engineering and design agents share the same constraints for error states, onboarding sequences, and marketing-adjacent in-app moments without reinventing style each sprint.678installs5Dark Mode DesignDark-mode-design is a designer-skills agent skill that encodes expert dark UI guidance for solo builders who want comfortable night-time interfaces without shipping inverted light themes. It walks through luminance reduction, elevation via lighter surfaces instead of shadows, and color adaptation so primary, error, and warning hues remain legible on near-black backgrounds. The skill also covers media treatment—dimming photos, dark illustrations, logo variants—and accessibility expectations including WCAG-minded contrast and respect for prefers-color-scheme alongside an explicit user toggle. For Prism’s audience, it is a repeatable checklist invoke during frontend build, prototype theming in validate, or pre-ship UI review when you need every component audited in dark environments. Because it is principle-driven rather than tied to one framework, it pairs well with any CSS or component library once you are ready to move past ad-hoc dark hacks.655installs6Color Systemcolor-system is a Design & UI/UX agent skill for solo builders shipping web or mobile products who need a coherent token set instead of picking hex codes in isolation. It walks through brand, neutral, semantic, and extended visualization palettes; defines relationships and usage rules; and enforces WCAG-style contrast minimums so text, borders, and states remain legible. Use it during Build when you are establishing or refactoring a theme before you wire Tailwind, CSS variables, or a component library. The skill emphasizes not relying on color alone for meaning, testing foreground/background pairs, and documenting dark mappings early—patterns that scale when you later iterate in Operate without breaking accessibility.644installs7User Flow DiagramUser Flow Diagram is a design-focused agent skill for solo builders who need readable path maps before pixels or components. You define the user goal, mark entry and exit points, sketch the happy path, then layer decision diamonds, alternate personas, failure handling, and hidden backend steps so engineering and support share the same story. It distinguishes task flows (single path), user flows (choices and segments), and wire flows (journey plus rough screen hints). The skill pushes annotation discipline: what appears on each screen, why a branch fires, what the system does asynchronously, and how users recover from errors. Use it during validation and early build when onboarding, checkout, or auth still feel fuzzy; pair output with wireframes or user stories so your agent does not codegen the wrong navigation graph.641installs8Visual HierarchyVisual Hierarchy is a designer-oriented agent skill that walks solo builders through establishing clear scan order on web and product UI. It treats hierarchy as a toolkit—size deltas, typographic weight, strategic color and contrast, whitespace, positional scanning habits, and grouping density—then maps those tools to four prominence tiers from page titles and primary CTAs down to timestamps and fine print. The SKILL.md anchors common compositions: hero blocks with a single CTA, card image-title-description-action stacks, form label-input-helper-error ordering, and navigation emphasis for current versus available states. Use it when a screen feels flat, crowded, or when every element competes for attention during validate prototypes, build frontend passes, or launch-ready polish. It does not replace a full design system token file; it gives repeatable editorial rules an agent can apply while refactoring layouts or critiquing mock descriptions before you ship.625installs9Animation PrinciplesAnimation Principles is a designer-oriented agent skill that teaches solo and indie builders how to motion-design interfaces with intent. It walks through easing choices for enter versus exit, duration tiers from micro button feedback through modal and page transitions, and core rules that every animation should communicate state, stay fast, feel physical, coordinate related elements, and remain cancellable. The skill catalogs practical animation types—fade and slide entrances, emphasis pulses, morph transitions, and loading affordances—and explains how to sequence lists with short stagger delays so attention flows naturally. Install it when you are polishing a SaaS dashboard, mobile shell, or browser extension and want agent guidance that turns vague “add some animation” requests into consistent, accessible motion specs your coding agent can implement in CSS, React, or native UI layers.608installs10Spacing SystemSpacing System is an agent skill for solo builders who want rhythm and predictability in interfaces without guessing px values on every component. You pick a base unit—typically 4px or 8px—and propagate a named scale from 2xs through 3xl that agents and humans reuse everywhere. The skill distinguishes inset padding inside containers, vertical stack gaps, inline horizontal gaps, and grid or flex gaps, then maps related UI groups to smaller steps and distinct sections to larger ones. Density modes let one product support compact data tables and spacious reading layouts by stepping the scale up or down rather than inventing one-off numbers. Best practices stress documenting intent, testing at multiple breakpoints, and keeping internal component spacing consistent. Install it early in a design-system pass or when refactoring messy Tailwind-style arbitrary values into tokens your agent can apply on new screens. It complements visual design skills but does not replace typography or color systems—you still define those separately while spacing carries layout hierarchy.602installs11Prototype StrategyPrototype Strategy is an agent skill that helps solo builders and tiny teams answer one question first: what fidelity and method will actually resolve the design uncertainty on the table. It lays out a spectrum from paper sketches through clickable gray-box flows to coded or motion-rich prototypes, and pairs each band with typical learning goals such as information architecture, navigation, visual polish, or micro-interactions. The SKILL.md also lists concrete methods—paper prototyping with manual swaps, hotspot linking, stateful interactions, HTML/CSS/JS spikes, faked backends, and narrative video—so an agent can recommend a path instead of defaulting to Figma perfection. Use it in Validate when scope is still fluid, and again in Build or Ship when you must decide whether another prototype round is worth the calendar. It is advisory, not a tool plugin.599installs12Ux WritingUX Writing is an agent skill that turns vague interface text into clear, task-oriented copy across buttons, forms, errors, empty states, confirmations, onboarding, and primary calls to action. Solo builders shipping SaaS, mobile, or extension UIs install it when screens work technically but labels still say Submit, errors dump stack traces, or empty states leave users stranded. The procedure walks category by category: microcopy should be action-specific; errors should state what happened, briefly why when useful, and exactly what to do next; empty states should explain what will appear and offer a encouraging CTA; confirmations should stay brief with undo when actions are reversible. Voice stays consistent while tone shifts by context—helpful in onboarding, calm in failures, positive on success. The skill does not replace a full brand book, but it gives repeatable rules so an agent can draft or refactor strings inside components and flow docs without inventing a new voice every session. Use it whenever you are implementing or revising user-facing language, not for long-form marketing essays unless those pieces reuse the same product voice guidelines.598installs13Wireframe SpecWireframe Spec is an agent skill that turns fuzzy page ideas into annotated wireframe specifications a solo builder can hand to design or frontend work. It focuses on content hierarchy and placement—headers, heroes, card sections, forms, and footers—using sketch through annotated mid-fi fidelity, without making color or brand decisions. You get numbered content priority, interaction and accessibility notes, responsive behavior callouts, and concrete content rules such as H1–H3 structure, approximate copy length, image ratios, and whether content is static, CMS-driven, or API-fed. Gray-box conventions keep the artifact honest about what is still undecided. Use it when you need alignment before high-fidelity mockups or component implementation, especially on marketing sites, SaaS dashboards, or mobile flows where wrong hierarchy is expensive to fix later.598installs14Design Qa ChecklistDesign-qa-checklist is an agent skill that helps solo builders and small teams turn fuzzy “does it look right?” reviews into repeatable quality assurance against design specs. It frames design QA as six intertwined categories—visual accuracy against tokens and typography, layout and responsive behavior, interaction states and motion, real content and messaging, accessibility including WCAG AA and focus management, and cross-platform browser coverage. The skill positions the agent as a checklist author for designers and developers who need implementation sign-off before launch. Use it after components exist in code and you have reference designs or tokens, especially when handoffs lack a formal QA doc. It does not replace automated visual regression suites; it produces human-executable verification lists that catch token drift, broken breakpoints, missing focus rings, and incorrect empty states that agents and quick smoke tests often miss.597installs15Icon SystemIcon System is an agent skill for solo builders who need a scalable icon language without hiring a design systems team. It produces a specification covering visual foundations on a 24×24 grid, stroke width and corner radius, when to use stroke versus filled versus duotone, and a practical size ramp from extra-small UI chrome to large marketing moments. The skill standardizes naming with category prefixes (action, navigation, content, communication, social, status, file, device), outlines how to ship SVGs and optional sprites or framework components, and bakes in accessibility expectations so icons do not become silent failures for screen readers or touch UIs. It also recommends auditing unused glyphs, versioning with the design system, and testing legibility at every exported size—ideal when you are launching a new app, tightening a shadcn or Tailwind UI, or cleaning up a sprawl of inconsistent Lucide or custom icons.597installs16Layout GridLayout Grid is a design-focused agent skill that helps solo and indie builders define responsive layout systems for web and mobile products. Instead of ad-hoc spacing in chat, the skill walks through grid anatomy—columns, gutters, margins, and breakpoints—and chooses among column, modular, baseline, and compound grids with clear responsive behavior. It fits early UI architecture and design-system work when you need consistent layouts from 375px through desktop widths, including full-bleed heroes, max-width containers, asymmetric sidebars, and responsive card grids. The skill stresses alignment to the grid, intentional grid-breaking for emphasis, and documented specs developers can implement in CSS or framework layout primitives. Use it when you are standardizing page structure before coding or refreshing an inconsistent marketing or app shell.597installs17Loading StatesLoading States is a designer-oriented agent skill for solo and indie builders who want perceived performance to match real performance. It walks through skeleton layouts, indeterminate and determinate progress, progressive and lazy loading, optimistic updates, and realistic placeholders so users stay oriented during waits. Duration guidelines tie indicator choice to expected latency—from imperceptible delays through long operations that need estimates. Transition rules emphasize fade-in, staggered list reveals, avoiding layout shift, and preserving scroll on refresh. Invoke it when scaffolding new views, refactoring spinners, or auditing CLS and perceived slowness before ship. The skill does not replace performance profiling; it pairs with frontend work in build and with launch/perf polish when you tighten Core Web Vitals and user trust during slow networks.593installs18Micro Interaction SpecMicro-interaction Spec is a design skill that forces clarity on small interface moments—what starts them, what logic runs, how users perceive the result, and whether behavior repeats or changes by mode. Solo builders shipping SaaS, mobile, or extension UIs use it when a button, toggle, or gesture feels underspecified and engineering guesses at timing and easing. The framework covers user, system, and conditional triggers; branching rules; visual, motion, audio, and haptic feedback; and first-time versus repeat behavior. Output is a consistent spec block per interaction so you can implement in CSS, React, or native stacks without redesign mid-sprint. It reduces thrash between designer and agent-generated code by documenting accessibility alongside motion. Best invoked early in a component or flow before you lock visual design or acceptance tests.592installs19State Machinestate-machine is a designer-oriented agent skill that teaches solo builders to describe complex interface behavior as finite state machines instead of ad-hoc boolean flags. It breaks work into states, events, transitions, guarded moves, and side-effect actions, then walks through common patterns like form submit pipelines, async load retry loops, authentication sessions, and stepped wizards. The payoff is predictable UX: impossible combinations become structurally unrepresentable, and regression scenarios are easier to argue about with agents or teammates. Use it when a screen mixes loading, validation, errors, and success paths that otherwise sprawl across useEffect and scattered conditionals. It complements implementation skills by producing a behavioral spec agents can follow when writing React, Vue, or mobile UI code.591installs20Responsive DesignResponsive Design is a designer-oriented agent skill that helps solo and indie builders ship interfaces that adapt across screen sizes, pixel densities, and input methods. It frames when to use fluid versus adaptive layouts, recommends common breakpoint ranges from small phones to extra-large desktops, and catalogs practical patterns such as column drop, reflow, off-canvas navigation, and priority-plus overflow for crowded toolbars. The skill also covers touch, mouse, keyboard, and voice considerations, plus responsive type scaling and image srcset strategies including art direction. Use it while drafting or reviewing UI in Claude Code or Cursor so you design for content needs rather than device stereotypes, and you catch real-device testing gaps before launch.590installs21Design CritiqueDesign Critique is an agent skill that acts as a facilitation expert for productive design reviews. It is for solo builders and small teams who have screens or flows to improve but want feedback that stays constructive, specific, and actionable rather than subjective pile-ons. Use it when you are at desk crit, scheduled team crit, cross-team review, or stakeholder approval—after the designer has shared context on goals, constraints, audience, and what kind of feedback is needed. The skill sets critique rules up front, runs timed present-and-clarify rounds, structures feedback by category or priority, documents tensions in open discussion, and closes with summarized takeaways plus owned deadlines. It also calls out common pitfalls so sessions do not derail into taste wars. The outcome is a clearer design direction and a short list of changes everyone agreed on.584installs22Error Handling UxError Handling UX is an agent skill that guides solo builders through designing experiences that prevent mistakes, catch failures early, explain them in human language, and offer credible recovery paths. It applies a four-step hierarchy—from smart defaults and inline validation through real-time detection, severity-aware messaging placed near the source, to retries, preserved form state, and undo—so users are not left staring at codes or cleared forms. The skill is aimed at indie founders and small teams shipping web or mobile products who want production-grade polish without hiring a dedicated UX researcher. Use it while specifying signup flows, checkout, settings, API-backed screens, and empty-search states, and again before launch when you walk critical paths or when support tickets reveal confusing failure copy. It pairs naturally with frontend implementation and QA: you define the UX contract first, then automate tests around the same user-visible behaviors. The outcome is fewer support loops, higher completion rates on error-prone tasks, and a consistent voice when things go wrong.584installs23Design PrinciplesDesign Principles helps solo builders and tiny teams write principles that actually change decisions—not generic platitudes on a wall. You work through gathering research and strategy inputs, surfacing candidates in a workshop, debating whether anyone would disagree, prioritizing for conflicts, and testing principles against real past choices. Each principle gets a short title, a clear statement, rationale, a concrete application example, a counter-example, and an explicit trade-off so agents and humans can apply them consistently. The skill is for the validate phase when you are scoping what the product should feel like, and it remains useful in build and ship when you evaluate mockups or review UI PRs. Memorable, ranked rules reduce thrash when you ship alone with an AI coding agent: you can paste principles into Cursor or Claude Code context so generated UI aligns with your stance. Revisit principles as the product evolves, especially when you pivot audience or add a major surface.583installs24Heuristic EvaluationHeuristic Evaluation is an agent skill that turns you into a systematic UX auditor before you spend time and money on user tests. Solo builders shipping SaaS, mobile, or extension UIs can define scope, walk each screen and flow as both novice and power user, and log every violation against Nielsen’s ten heuristics—from visibility of system status through help and documentation. Each finding gets a severity from cosmetic to catastrophic, a clear recommendation, and a pointer to where it occurs so your agent or team can fix in priority order. The skill emphasizes error prevention, consistency, recognition over recall, and recovery paths, which are the issues that most often hurt conversion on indie products. Use it when interfaces are stable enough to review but you have not validated with real participants yet. The deliverable is a prioritized issue list that feeds directly into build fixes and ship testing checklists.580installs25Design TokenDesign Token is an agent skill for architecting systematic design foundations using global palettes, semantic aliases, and component-level tokens across color, spacing, typography, elevation, border, and motion. It guides solo builders to start from raw global values, layer alias tokens such as color-action-primary, and only then scope component tokens like button-color-primary so theming and dark mode stay maintainable. The skill documents base spacing units, typography scales, shadow levels, and cross-platform mapping discipline: components should never reference raw values directly. Use it when you are bootstrapping a token JSON or Style Dictionary pipeline, aligning Figma variables with code, or versioning tokens alongside your design system. It pairs naturally with naming-convention when you need both taxonomy and key structure for long-lived indie products.579installs26Documentation TemplateDocumentation Template is an agent skill for design-system authors who need every component, pattern, and foundation page to follow the same structure. Solo builders shipping a product UI with a growing token and component library use it to generate scaffolds that include when-to-use guidance, accessibility, content rules, and changelog hooks—so agents and new contributors do not invent a new outline per page. The skill defines explicit section lists for component docs (title through related and changelog), pattern docs (problem through related patterns), and foundation docs (purpose through resources). It encodes documentation standards such as consistent heading hierarchy, tables for comparisons, and status indicators for maturity, plus operational advice like auditing freshness quarterly and generating docs from code where possible. Intermediate complexity because you must supply real component metadata and visuals; the skill delivers the template and editorial norms, not the design decisions themselves.579installs27Naming ConventionNaming Convention is an agent skill that helps solo builders and small teams establish a scalable naming system for design elements, design tokens, files, and exported assets. It encodes repeatable patterns such as category/name/variant/state for components, structured token keys, and aligned conventions across design tools and React or CSS codebases. Use it when you are starting or refactoring a design system, onboarding collaborators, or cleaning up inconsistent labels that slow search and handoff. The skill emphasizes purpose-based names, documented rules in one reference, prefixes for grouping, and critique-time name review rather than one-off renames. For indie SaaS and mobile products, consistent naming reduces agent confusion during implementation and makes token and component libraries maintainable as the product grows.578installs28Design Token Auditdesign-token-audit is an agent skill that walks you through auditing how design tokens are adopted across a product’s code and design artifacts. Solo builders and small teams often ship fast with one-off hex values and spacing literals; over time the UI drifts, dark mode breaks, and rebrands become expensive. This skill defines scope for coverage, consistency, and gaps—what share of visual properties use tokens, whether the same semantic roles map to the same names, and which hard-coded values should become new scale steps. The six-step process inventories values, categorizes them, maps to tokens, flags issues, prioritizes by frequency and impact, and outputs an executive summary plus detailed replacements. Use it during Build when tightening a design system, and again before Ship when you want review-ready consistency evidence. It is a checker-style methodology, not a token generator—bring your existing token set or partial system to evaluate.577installs29Case StudyCase Study is an agent skill that structures design portfolio write-ups so solo builders and designers can show how they think—not only what screens shipped. It walks through six sections: a hook-driven overview, business and user challenge, research-through-iteration process, solution walkthrough with system considerations, impact with numbers and quotes, and personal reflection on learnings. That format helps indie founders document MVPs for investors, freelancers win contracts, and product designers pass hiring loops where process depth matters as much as pixels. Use it when you have a project worth showcasing but the story is scattered across Figma links and Slack threads. The skill emphasizes journey visuals (breadth in exploration, depth in rationale) rather than mockup-only galleries. Complexity is beginner-friendly prose structure with intermediate expectations for metrics and honest retrospectives. It does not replace user research skills; it packages research and design outcomes into a readable case study.574installs30Component SpecComponent Spec is an agent skill for solo builders and small teams maturing a design system or shipping consistent UI without endless alignment meetings. The agent drafts a thorough specification: when to use the component, visual anatomy, variant matrix, typed props with defaults, interaction and responsive behavior, and explicit edge cases. Accessibility is first-class—roles, keyboard paths, and focus—not an afterthought. Usage guidelines tie the component to related primitives so agents do not invent one-off patterns. Use it when a Figma frame needs a contract before codegen, or when retrofitting docs for an existing React or Vue library. It does not replace visual design files; it makes those designs auditable and machine-friendly for Claude Code, Cursor, or Codex implementation passes.574installs31Design BriefDesign Brief is an agent skill that writes a complete product design starting document for solo founders who usually skip formal UX paperwork. It forces clarity on what problem you are solving, who experiences it, what evidence you have, and what happens if you ignore it. Target audience sections cover primary and secondary users with persona hooks so downstream wireframes stay honest. Goals tie to metrics—not vague “make it modern”—while scope lists what you will not design in v1 to protect your calendar. Context captures research, competitor references, and failed prior attempts so you do not repeat them. Deliverables and milestones give agents and freelancers a shared checklist through review gates. Use it when Validate needs alignment, or when Build is about to start and design was only discussed in chat.574installs32Accessibility AuditThe accessibility-audit skill equips solo builders and tiny teams to conduct comprehensive digital accessibility reviews aligned with WCAG 2.2, without hiring a dedicated a11y consultant for every release. The agent acts as an inclusive design expert: it maps findings to POUR principles, assigns Critical through Enhancement severities, and outputs remediation steps with concrete code examples so fixes land in the same sprint. Use it before shipping customer-facing web or mobile UI, after a redesign, or when support reports barrier complaints. It emphasizes real assistive technology testing and multi-browser/device coverage, not checkbox scans alone. Complexity is intermediate because you must supply URLs, components, or flows to inspect and interpret criterion references. Outputs read like an audit report developers can ticket. It complements automated linters by catching semantics, focus order, and comprehension issues tools miss. Not a substitute for formal legal compliance sign-off or user research with disabled participants when regulations require it.572installs33Accessibility Test PlanAccessibility Test Plan turns vague “make it accessible” requests into a repeatable QA artifact for solo builders shipping web or mobile experiences. The skill layers automated scans—which it honestly scopes to catching only part of the problem—with manual passes for keyboard-only use, screen readers, zoom, high contrast, and reduced motion. It specifies which assistive technologies to include (VoiceOver, NVDA, TalkBack, voice control, switch control) and when to escalate to real participants using their own devices. You get a flow-by-flow test matrix so critical journeys are not checked once in Chrome alone. Reporting ties every finding to a WCAG criterion and severity so fixes can be prioritized before launch. It fits indie teams who cannot hire a full a11y program but still need defensible coverage before app store, enterprise, or public-sector scrutiny.572installs34Theming SystemTheming System is an agent skill for solo builders and small teams who need a flexible design-system architecture instead of one-off color tweaks. It walks you through layering global raw palette tokens, semantic purpose-driven aliases where themes actually override, and component-scoped tokens so a single library serves multiple brands and modes. You get explicit coverage of light, dark, high-contrast, and dimmed modes, sub-brand and white-label variants, and comfortable versus compact density. Dark mode is treated as a first-class design problem—reduced brightness, surface-based elevation, desaturation, and legibility checks—not a simple invert filter. The skill ties architecture to practical delivery via CSS variables, theme files, Figma modes, and OS preference respect. Use it when you are standardizing UI before scale, preparing multi-tenant SaaS, or hardening accessibility across visual modes.572installs35Handoff SpecHandoff Spec is an agent skill for solo builders and small teams who design in Figma or similar tools and need engineering to ship pixels faithfully. It walks the agent through a complete developer handoff document: visual measurements tied to tokens rather than one-off hex values, interaction and animation timing, dynamic content and localization constraints, asset naming and delivery, and explicit edge-case scenarios including accessibility. Use it after Validate when a prototype is approved and before or during Build when frontend work starts. It reduces rework from ambiguous mocks by making default, hover, focus, and error states contractual. The skill is multi-phase because the same spec discipline helps during prototype polish and ongoing UI iteration, but its primary home is the frontend build shelf.571installs36Empathy MapEmpathy Map is an agent skill that guides solo builders and small design teams through building a classic four-quadrant empathy map from real research. You name the persona or segment, then populate Says with direct quotes, Thinks with inferred beliefs, Does with observable behaviors, and Feels with emotional states, plus explicit goals and pain points. It fits early discovery when you have messy qualitative data and need one artifact stakeholders can scan in minutes. The workflow assumes senior UX researcher framing: clarify the user, work quadrant by quadrant, and prefer evidence from files you provide over invented users. Use it when onboarding collaborators to user context, preparing for interviews or prototype tests, or bridging research into later journey map and scope conversations without opening a separate workshop facilitator.570installs37Feedback PatternsFeedback Patterns is an agent skill for designing how products talk back after every user action—immediate clicks, confirmations with undo, long-running status, and notifications. Solo builders shipping SaaS, mobile, or extension UIs use it when screens feel silent or ambiguous after submits and toggles. The skill catalogs immediate feedback on controls, success toasts with checkmarks, progress and health indicators, and in-app versus push notification choices. It prioritizes inline and component-level feedback over noisy page-level banners unless the message is system-wide. Agents apply it while drafting specs or component behavior so engineering and design share one vocabulary for hierarchy and channels. It does not replace a full design system token file but gives durable patterns for confidence and next steps after actions complete or fail.569installs38Team WorkflowTeam Workflow helps solo builders and micro-teams formalize how design work enters, gets reviewed, and reaches engineering without enterprise bureaucracy. It breaks the operating system into task management (backlog through done), recurring rituals from daily standups to structured critiques, and explicit communication norms so feedback does not live only in scattered DMs. The skill also maps a practical tooling stack—design, prototyping, PM, docs, and asset versioning—and spells out design–development collaboration: when designers join sprints, how handoffs are timed, and how design QA gates quality. Use it when you are the only designer-founder, when you hire your first contract designer, or when async remote collaboration is drowning your ship date. Outcomes are documented rituals and handoff steps your agent can turn into Notion pages, Linear workflows, or team charters rather than ad-hoc Slack threads.569installs39Design RationaleDesign Rationale is an agent skill that teaches agents to write decision records linking UI and UX choices to user needs, business goals, principles, and evidence. Indie builders use it when a direction will be questioned later—new navigation, departure from patterns, or controversial layout calls—so the reasoning survives beyond chat context. The framework walks through decision, context, alternatives considered, evidence, reasoning, trade-offs, and how you will validate success. It fits multi-phase work: scoping trade-offs during Validate, documenting Build handoffs, and supporting Ship review when reviewers ask why. Outputs read like concise design decision records suitable for Notion, PRDs, or pull request descriptions. It strengthens agentic workflows where multiple sessions implement the same product without rediscovering why corners were cut or users prioritized.568installs40Design Sprint PlanDesign Sprint Plan is an agent skill for solo builders and tiny teams who need a structured workshop plan instead of open-ended brainstorming. It encodes the Google Ventures-style five-day arc: frame the challenge and map the journey, diverge with sketches and voting, decide via storyboard, build a realistic facade prototype in one day, then run five user interviews and synthesize patterns. The skill also documents compressed mini sprints, remote adaptations, and discovery-only runs when you only need clarity on the problem space. Use it when you have a fuzzy product bet and want evidence from real users before writing an implementation plan or shipping features. It pairs naturally with JTBD framing, validation landing pages, and later implementation skills once the sprint question is answered.568installs41Gesture Patternsgesture-patterns is a design-focused agent skill that helps solo builders specify how users manipulate interfaces on touchscreens and pointer devices without shipping confusing or inaccessible motion. It catalogs standard gestures—from tap and long press through swipe, pinch, and pull-to-refresh—and ties each to typical jobs like navigation, dismissal, zoom, and reordering. The skill pushes practical rules: visible affordances, first-use hints, rubber-banding and snap feedback, velocity thresholds for flicks, and explicit abort paths when the user returns to the start. It also addresses real engineering pain such as scroll versus horizontal swipe fights and competition with OS back gestures. For indie teams without a dedicated interaction designer, invoking this skill before coding custom handlers prevents rework and support tickets from undiscoverable shortcuts. Pair it with your component library conventions so agents output patterns your stack can implement consistently.567installs42Jobs To Be DoneJobs-to-Be-Done is a journey-wide agent skill that applies Clayton Christensen and Tony Ulwick-style JTBD framing for solo builders who tend to ship features instead of outcomes. The agent reads interview or product context when provided, names the core job, decomposes functional, emotional, and social drivers, walks the eight job stages, and contrasts outcome expectations with how users currently hire alternatives. The result is a motivation-centered artifact you can reuse whenever you reframe roadmap calls, positioning, onboarding, or validation experiments—not only during initial discovery. It is research-oriented procedural knowledge with no external APIs, meant for Claude Code, Cursor, or Codex sessions where you need disciplined language before writing plans, landing copy, or sprint challenges. Use it when stakeholder conversations drift to feature parity and you need a shared job statement to align Validate, Build, and Launch decisions.567installs43Experience Mapexperience-map is a design systems skill for solo builders and tiny teams who need a single picture of how customers move across website, app, email, support, and community—not just one screen flow. It structures maps with lifecycle phases on the horizontal axis and stacked layers for actions, touchpoints, channels, emotional tone, friction, and improvement opportunities, plus how channels exchange data and when humans take over from automation. The skill explicitly recommends mapping the current state before aspirational future state, mixing digital and physical touchpoints, and grounding claims in research instead of hallway assumptions. Use it when launching something new, auditing an omnichannel journey, or preparing engineers, marketing, and support to agree on the same narrative. Outputs feed Validate scope decisions and later Build prioritization because they surface missing onboarding steps, broken handoffs, and emotion cliffs before you commit sprints.566installs44Journey MapJourney Map is an agent skill for solo builders and small design-minded teams who need a structured user journey document—not a loose brainstorm. You describe the product or feature and target user (optionally attaching personas, research, or analytics); the skill confirms persona, scenario, and journey boundaries, then walks through five to seven stages with goals, behaviors, touchpoints, questions, emotional tone, pain points, and opportunities. It is built for UX analysis and product design decisions: seeing where users struggle, which channels matter, and what to fix before wireframes or code. Use it when you are validating scope, planning onboarding or checkout flows, or aligning stakeholders on the full experience rather than one screen. Outputs read like a research-backed journey map suitable for Notion, FigJam, or spec appendices. Complexity is intermediate because you must supply or co-define persona and scenario; the skill does the heavy lifting on stage structure and consistent fields per stage.566installs45Pattern LibraryPattern Library is an agent skill that structures reusable UX pattern documentation for solo builders and small teams shipping SaaS, content sites, or mobile products. When the same interaction problems keep resurfacing—empty states, onboarding flows, error feedback—you invoke it so the agent produces a consistent library entry instead of one-off notes. Each entry leads with problem context, then solution principles, component anatomy, variants, behavior, real examples, anti-patterns, accessibility, and links to related patterns. That format mirrors how design systems and help-center docs stay citable for SEO and internal search. Use it while building UI-heavy features, before design review, and when refreshing documentation after user research. It does not replace user testing or visual design tools; it turns decisions into durable, agent-friendly prose your team can reuse across Claude Code, Cursor, and Codex workflows.565installs46Test ScenarioTest Scenario is an agent skill for solo builders and small teams who need professional usability test scripts without hiring a research agency. It produces scenarios with a realistic backstory, a single clear goal per task, quantitative success criteria, and a structured observation guide so sessions reveal genuine behavior instead of guided demos. Tasks are written in the user’s words—no product jargon—and avoid leaking the correct navigation path, which is a common failure mode when founders test their own UI. The skill distinguishes exploratory information-finding tasks from specific conversion goals, comparative choices, and open-ended flows with multiple valid paths. You get repeatable structure for piloting, ordering easy-before-hard tasks, and capturing hesitations, wrong paths, error recovery, and verbal commentary. Use it while validating prototypes or pre-launch UX, then feed findings back into scope cuts or Build frontend fixes.565installs47Version Control StrategyVersion Control Strategy is a design-operations skill that helps solo builders and small teams treat Figma-style files, component libraries, design tokens, and asset packs like software artifacts. It explains when to use milestone names versus branches versus in-file pages, how to apply semantic versioning to libraries and token releases, and how to keep a main branch for production-ready UI while experiments live on feature branches. The emphasis on changelogs, design-decision links, and migration guides makes handoffs to developers less painful when props rename or tokens shift. Indie founders wearing both product and design hats use it while building a design system during Build, and again during Operate when iterating components without breaking shipped screens. It is process guidance—not a Git replacement for `.fig` binaries—but a collaboration contract your whole stack can follow.565installs48A B Test DesignA/B Test Design is an agent skill that turns vague “let’s try a new button color” ideas into rigorous experiments a solo builder can defend. It walks through six test structure blocks: a falsifiable hypothesis, control versus treatment with single-variable isolation, a single primary metric, secondary and guardrail metrics, sample size from minimum detectable effect and power assumptions, and run duration that respects weekly seasonality. It also catalogs common pitfalls—peeking, too many variants, insensitive metrics, novelty effects, and missed segmentation—and states when A/B testing is the wrong tool entirely. Product-led indie SaaS, e-commerce, and content sites with measurable conversion or engagement use it after features ship but before scaling traffic spend. It does not replace your experimentation platform; it produces the design spec your agent or team implements in Split, Statsig, or in-house tooling.564installs49Affinity DiagramAffinity Diagram is an agent skill for UX researchers and solo builders who have piles of qualitative data and need structured synthesis fast. It walks you through extracting individual observations and quotes, clustering them bottom-up (never starting from assumed categories), naming clusters, rolling them into three to five top-level themes, and writing clear "so what?" insight statements with evidence. The skill also surfaces frequency, intensity, and cross-theme connections, then prioritizes insights by how strongly they should steer design. Invoke it when finishing interview rounds, contextual inquiry, or open-ended survey work and before you write personas, journey maps, or validation hypotheses. It keeps synthesis honest by forcing natural groups from the data rather than retrofitting notes into a roadmap narrative.564installs50Diary Study Plandiary-study-plan is a UX research template skill for solo builders and designer-founders who need in-context behavior over days or weeks—not just a one-hour interview. The agent acts as a researcher: it clarifies longitudinal goals, proposes duration and cohort size, drafts structured and open-ended entry prompts, chooses capture modalities, schedules pulse check-ins, and plans onboarding plus attrition mitigation. It also specifies how to code and theme entries so insights feed validation and roadmap choices. Use it when validating problem-solution fit, habit-forming flows, or operational workflows where moment-in-time tests miss real-life friction. Output is a plan you can hand to participants or a research ops contractor rather than shipped product code.564installs51Design Review ProcessDesign Review Process is an agent skill that helps solo and indie builders institutionalize design quality without creating endless meetings. It defines four sequential review gates—concept, visual design, pre-handoff, and implementation QA—each with explicit pass criteria so you know when to move forward. Concept gates force problem clarity, research-backed user needs, and strategic alignment before pixels. Design gates enforce brand standards, interaction consistency, responsive behavior, and design-system components. Pre-handoff gates block engineering until every state, edge case, and accessibility requirement is documented and walked through with developers. Implementation QA closes the loop by verifying the shipped product matches the spec. Use it when you are the designer and the PM and need a repeatable ritual that scales from one feature to a whole product surface.563installs52Design System AdoptionDesign System Adoption is an agent skill that helps you drive real usage of a design system across design and engineering, not just publish components. Solo founders and tiny teams who introduced tokens or a component library but still see one-off CSS and forked Figma files can use it to structure launch announcements, searchable documentation, getting-started paths for each discipline, and contribution workshops. The skill emphasizes reducing friction so the system path is easier than bespoke styling, tying adoption to code and design review criteria, and tracking metrics like override volume and time-to-ship features. It spans early Build work when the system lands in the repo and later Grow moments when you communicate updates and celebrate teams that model good usage. It complements visual design skills by focusing on organizational rollout, measurement, and ongoing changelog discipline rather than pixel specs alone.563installs53Click Test PlanClick Test Plan is an agent skill for UX researchers and solo builders who need structured findability studies instead of ad-hoc “click around and see” sessions. It walks you through objectives, stimuli selection, goal-oriented tasks without UI hints, quantitative success criteria, and participant criteria so results are comparable run to run. You get templates for first-click, full click-path, navigation-structure, and five-second tests, plus analysis guidance on success rates, hesitation time, and confidence versus accuracy. Use it when wireframes or high-fidelity pages exist and you must answer whether users can reach settings, checkout, support, or core features through your nav. It pairs naturally with tree testing and card sorting when you are still shaping IA, and with usability sessions when you move from metrics to qualitative depth.562installs54Competitive AnalysisCompetitive Analysis is a designer-skills agent capability for solo and indie builders who need a repeatable way to study rival products before locking UI and scope. It walks you through identifying direct, indirect, and aspirational competitors, then evaluates information architecture, interaction patterns, visual design, content, performance, accessibility, and mobile experience. For each critical user task you build a comparison matrix with support level, step count, UX quality ratings, and distinctive approaches, then synthesize strengths, friction, table-stakes patterns, and white-space opportunities. Outputs are presentation-ready: executive summary, matrix, per-competitor profiles, opportunity map, and reference annotations. Use it when you have a category in mind but lack a shared picture of how incumbents solve the same jobs. It pairs naturally with audience research and persona work on the Idea shelf and informs validation and build decisions without replacing quantitative market research.562installs55Metrics Definitionmetrics-definition is a designer-facing agent skill that helps solo builders and small product teams articulate UX metrics and KPIs that connect interface decisions to measurable user and business outcomes. It walks through behavioral signals such as task completion and error rate, attitudinal measures like SUS and NPS, business indicators including conversion and support volume, and engagement patterns from DAU/MAU to feature discovery. The HEART framework organizes happiness, engagement, adoption, retention, and task success so you do not drown in vanity numbers. Each metric is captured with a practical template covering definition, measurement method, data source, target, cadence, and owner, emphasizing baselines before redesigns and explicit links to design hypotheses. It is methodology, not analytics wiring: you still implement tracking in Build or Grow, but you leave Validate with a focused scorecard instead of debating whether a screen change mattered after launch.562installs56North Star VisionNorth Star Vision helps solo founders and small product teams write an inspiring but grounded product north star instead of a vague slogan or a backlog with no direction. The skill structures who you serve, the experience you are building toward, and why it matters, then breaks that story into three to five design pillars, future scenarios, and measurable success signals across one-, three-, and five-year horizons. Use it after initial research when alignment fractures between features, brand, and UX, or before major roadmap commits when you need a filter for what to build and what to defer. Because vision should inform validation scoping, build prioritization, launch narrative, and growth bets, treat it as a living reference in planning and design reviews—not a one-off slide. The workflow emphasizes workshops, narrative validation, and communication so agents and humans share the same strategic anchor.562installs57Usability Test PlanUsability Test Plan helps solo builders and tiny UX teams turn a fuzzy “we should user-test this” intent into a session-ready document. The agent acts as a senior researcher: it clarifies objectives, chooses moderated or unmoderated and remote or in-person methods, sets screening and sample size, and drafts five to eight scenario-based tasks with explicit success criteria and expected durations. You also get measurable outcomes—success rate, time on task, error rate, SUS or SEQ, satisfaction—as well as a facilitation guide from intro through debrief, a recording and note-taking framework, and a synthesis plan for prioritizing findings. A pilot checklist reduces wasted sessions on broken prototypes or unclear tasks. Invoke it when you have a Figma link, HTML prototype, or staging URL and need structured evidence before scaling build or launch. It complements competitive analysis and personas from earlier Idea work and feeds Ship-phase review when serious usability issues appear late.562installs58Summarize InterviewSummarize Interview is a designer-skills workflow for solo founders and one-person product teams who conduct user interviews but lack time to manually theme transcripts. You provide a file or pasted transcript; the skill acts as a senior UX researcher and returns a structured brief: participant context, three to five major themes with supporting quotes, jobs-to-be-done, pain points graded by severity, current workarounds, delighters, surprising findings, and concrete design or research action items. Each insight is tagged for whether it was explicitly stated or inferred, which keeps assumptions visible when you pitch stakeholders or prioritize the backlog. It fits early validation when you are proving demand and shaping scope, and it remains useful in Grow when support or lifecycle conversations surface new needs. It does not replace conducting interviews or recruiting participants—it compresses the synthesis step so your agent-assisted stack moves faster from conversation to decisions.561installs59User PersonaUser Persona is an agent skill that helps solo builders and small design teams convert raw research into actionable archetypes. Following established persona practice, it prioritizes behavioral variables over vanity demographics, clustering motivations and needs from interviews, surveys, analytics exports, or other files you provide. For each of two to four personas you get a memorable name, illustrative photo description, quote, goals spanning life and product outcomes, and concrete frustrations—written so an agent or human designer can argue “what would Alex need here?” The workflow begins by confirming product context and data quality, asks when inputs are ambiguous, and can supplement with web search when you supply only a product URL. Personas are most valuable early in the journey but remain useful when scoping MVPs, writing onboarding copy, and prioritizing backlog items. They pair upstream with audience discovery and downstream with competitive analysis and usability plans when those skills are in your stack.561installs60Opportunity FrameworkOpportunity Framework is a journey-wide agent skill for solo builders and small teams who need to move from a pile of possible improvements to a defensible prioritized roadmap. It treats opportunities as first-class inputs from user research, product analytics, competitive gaps, emerging technology, stakeholder requests, and support channels. Evaluation can run through an impact-effort matrix for quick wins versus strategic bets, RICE for reach and confidence, Kano for delight versus must-haves, and value-versus-complexity scoring when you need a simple numeric lens. Output is not a vague brainstorm: you get a ranked list with explicit rationale, thematic groupings, called-out dependencies, and stated confidence so agents and humans align on what ships next. Best practice baked into the skill is triangulation—no single framework owns the truth—and revisiting the stack as you learn. Use whenever you are deciding what design or product work deserves the next sprint, not only during initial validation.560installs61Card Sort AnalysisCard Sort Analysis is an agent skill for UX researchers and solo builders who have finished a card sorting study and need defensible information architecture. The workflow starts by confirming study design—open versus closed sort, participant count, and the card inventory—then reads uploaded results or spreadsheets when provided. It synthesizes common category patterns and naming conventions, quantifies co-grouping in a similarity matrix, and translates patterns into recommended navigation and content organization. Ambiguous items that participants placed inconsistently are called out so you do not bake confusion into the sitemap. Findings close with explicit recommendations and suggested follow-ups such as tree testing or another research round. Use it when card sort raw data exists but mental models are not yet translated into IA your agent or team can implement.559installs62Interview ScriptInterview Script is a designer-skills capability for solo builders who need disciplined user research without hiring a full UX team. The agent acts as a senior UX researcher: it confirms goals, audience, and session length, then outputs a structured script with introduction, warm-up, deep exploration by theme, scenario walk-throughs, and wrap-up. Guidance embeds Steve Portigal-style interviewing and Jobs-to-be-Done probing so conversations surface motivations and behaviors instead of feature wishlists. Use it in early Idea research when you are exploring a market, and again in Validate when you need evidence before scoping a prototype or landing page. The skill expects you to attach personas or briefs when you have them. Outputs are conversation-ready documents your agent or you can run in live calls, keeping timing and follow-up probes consistent across participants.559installs63Stakeholder AlignmentStakeholder Alignment is an agent skill for solo builders and small design-led teams who need crisp artifacts before UX decisions turn into endless review loops. It instructs the agent to act as a stakeholder-navigation specialist, producing maps of influence and interest, RACI matrices per decision, explicit decision frameworks, communication plans with channel and cadence, and feedback protocols covering format, timing, and conflict handling. The skill is aimed at product and design work where multiple voices—founders, contractors, beta users, or investors—can otherwise redesign solutions in comments or introduce late scope changes. It emphasizes establishing decision rights at kickoff rather than after disagreements. Indie SaaS founders wearing PM and design hats use it during validation when scoping MVPs and again during build when revisiting roles as features ship. Outputs are alignment documents agents can draft from a short project brief rather than ad-hoc meeting notes.559installs