Skills
AI agent skills for product design, covering research, interactions, accessibility, design systems and QA. Each skill is a SKILL.md instruction file, sometimes with supporting references or scripts.
106 skills in 17 categories
Discovery 2
Product discovery, problem framing, opportunity and assumption mapping, requirements clarification
User research 12
User research: planning, interviews, surveys, synthesis, personas, journey mapping, insight management
- customer-journey-mapperMaps the full customer journey from first touch to advocacy.
- inclusive-personasUse when defining who a design serves — creating personas, user stories.
- journey-mapperScans a codebase and generates a self-contained HTML service-design journey map — NN/g combined customer journey + service blueprint format.
- personaBuild a persona panel, explore customer motivations through open-ended questions, and pressure-test product concepts before spending on fieldwork.
- research-planningUse when user needs are unclear, assumptions need validation, or the design brief identifies gaps in understanding — plans what to learn, which methods to use.
- research-synthesisSynthesize user research into themes, insights, and recommendations.
- service-blueprintMap service delivery across frontstage actions, backstage processes, and supporting systems.
- silver-researchDefine research questions and methods, participant criteria, scripts, evidence handling, and sanitized observation plans.
- silver-synthesizeConvert sanitized evidence, feedback, analytics, briefs, and labeled assumptions into findings, problem frames, opportunities, contradictions.
- survey-designDesign unbiased survey instruments — question wording, scales, and sampling — to measure attitudes at scale.
- user-research-cookiyEnd-to-end user research assistant — qualitative and quantitative.
- ux-researcher-designerUX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks.
Product strategy 2
Product strategy, competitive analysis, JTBD, value propositions, prioritization, roadmaps, metrics/KPI definition
- design-negotiationAdvocate for design quality, scope, and timeline with partners and leadership using evidence and shared goals.
- market-command-matrixTurns competitor signals into judgement—mindshare vs resource strength, then attack/monitor/harvest/ignore/partner with one primary motion per priority player.
Information architecture 2
Taxonomy, navigation, content hierarchy, card sorting, tree testing, sitemaps, user/task flows, search UX
- ia-evaluationPlans, runs and analyses information-architecture studies - open, closed and hybrid card sorts, tree tests and first-click tests - to decide how content and…
- silver-structureDefine and refine information architecture, navigation structure, taxonomy, content models, and object models — what exists, how it is organized.
Interaction design 10
Wireframing, UI and interaction design, responsive/adaptive design, states, forms, tables, dashboards, onboarding, empty states, errors, notifications, micro-interactions, motion
- animateBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool.
- animate-expoBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate.
- animation-vocabularyReverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term.
- apple-designApple's approach to interface design and fluid, physical motion, translated for the web.
- apple-hig-expertAudits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language.
- design-motion-principlesExpert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.
- laws-of-uxImprove any user interface with 30 evidence-based UX principles drawn from cognitive psychology and human-perception research.
- onboardingWhen the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value.
- platform-conventionsDesign to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify.
- signupWhen the user wants to optimize signup, registration, account creation, or trial activation flows.
Visual design 13
Typography, color, layout, spacing, grids, visual hierarchy, iconography, themes, dark mode, data visualization, brand application
- algorithmic-artCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.
- better-colorsColor systems for digital products.
- better-layoutLayout structure for web interfaces.
- better-typographyWeb typography.
- better-uiDesign engineering principles for making interfaces feel polished.
- canvas-designCreate beautiful visual art in .png and .pdf documents using design philosophy.
- diagram-designCreate branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart.
- frontend-designGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
- make-a-deckUse when the user asks for a slide presentation.
- redesign-existing-projectsUpgrades existing websites and apps to premium quality.
- theme-factoryToolkit for styling artifacts with a theme.
- wp-block-themesUse when developing WordPress block themes.
- wp-patternsPattern: create or update WordPress block patterns (starter pages, templates, template parts, Query Loop layouts), review pattern registration, block markup,…
Design systems 13
Design-system architecture, tokens, component APIs and documentation, pattern libraries, governance, versioning, audits, Figma-to-code, multi-brand
- design-debt-auditInventory and prioritise accumulated design inconsistencies across a product.
- design-systemAudit, document, or extend your design system.
- design-system-governanceDefine how the system evolves — contribution model, versioning, deprecation, and change management.
- design-tokensGenerate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component).
- extract-design-mdExtract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.
- figma-integrationKeep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected.
- frontend-ui-dark-tsBuild dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.
- motion-systemDefine motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide.
- pick-ui-libraryPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop,…
- token-buildSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts.
- token-namingChooses and applies one naming convention for design tokens across every category - declares a grammar.
- ui-design-systemUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations.
- wpdsUse when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.
Accessibility 11
WCAG audits, semantics/ARIA, keyboard and focus, screen readers, contrast, motion sensitivity, inclusive design, remediation
- a11y-auditAudit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes.
- a11y-check-codeソースコードを対象にアクセシビリティチェック（a11yチェック）を行う。HTML / JSX / TSX / Vue / Svelte / テンプレートを読み、importしているコンポーネントも辿って、WCAG 2.2…
- a11y-check-page動作しているWebページを対象にアクセシビリティチェック（a11yチェック）を行う。Playwright MCPでブラウザを操作し、axe-coreによる自動チェック、キーボード操作、ズームやリフロー、アクセシビリティツリーの確認をWCAG…
- a11y-criticUse when you have an existing component, flow, or interface and need an evidence-backed accessibility design review after basic checks pass.
- a11y-plannerUse when you know what component, flow, or interface you need but not yet the right accessibility approach.
- a11y-role-auditARRM-based accessibility role audit — runs responsibility-based review lenses.
- better-accessibilityAccessibility engineering for product interfaces.
- cognitive-accessibilityUse when evaluating mental load, wayfinding, focus management, memory demands.
- perspective-auditDeep accessibility review from 7 access perspectives — activated by escalation from a11y-planner or a11y-critic when one or more perspectives are flagged at…
- review-a11yDraftUse to REVIEW changed frontend code for accessibility.
- ultra11yDraftUse to AUDIT a repository, site, or page against WCAG 2.2 AA or a country standard such as RGAA; produce a dated conformance report, criterion grid, PRD backlog.
Content design 4
UX writing, voice and tone, labels, error messages, onboarding and help content, localization, plain language, terminology
- accessible-contentUse when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text.
- better-writingUX writing and interface copy.
- localization-designDesign for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats.
- ux-writingCreate user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms.
Prototyping 6
Low/high-fidelity and interactive prototypes, prototype testing
- design-and-refineRuns the 0x Designer "Design & Refine" workflow.
- interactive-prototypeUse when the user asks for a working, clickable prototype — something that behaves like a real app rather than a static mockup.
- prototypeBuild multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one…
- variantAnswers "which of these?" rather than "is this right?".
- wireframeUse when the user wants to explore the design space quickly — many rough ideas, not one polished direction.
- wireframe-jsonGenerate JSON wireframe with HTML preview
Testing and evaluation 9
Usability testing, heuristic evaluation, cognitive walkthroughs, design critique, expert review, severity scoring
- breakAnswers "does this survive?" for one component.
- critique-information-densityCritique a rendered screen's density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure.
- design-critiqueRun a heuristic evaluation of a UI design (image, HTML, Figma, URL, or flow) the way an experienced designer would.
- design-reviewReview or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table.
- find-animation-opportunitiesSearch a codebase or UI for places that don't animate but should, and reject everything that shouldn't.
- improve-animationsSurvey a codebase's animation and motion code as a senior motion advisor.
- silver-evaluateDefine an evaluation question and method, prepare tasks, inspect a visualization or prototype, capture sanitized observations.
- synthetic-user-testingUse after the fix round to validate the design by walking through key tasks as each persona — simulating how Jordan (low-vision), Priya.
- usability-testingUse when planning or conducting usability tests — writing test scripts, defining tasks, selecting participants, analysing findings.
Design QA 5
Design QA, interface/PR design review, visual regression, cross-browser and responsive checks, handoff quality
- design-detailsDesign router for UI quality work.
- frontend-design-reviewReview and create distinctive, production-grade frontend interfaces with high design quality and design system compliance.
- interface-reviewInterface review of a change rather than a screen: uncommitted work, the current branch, or a pull request.
- review-animationsReviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy.
- web-design-reviewerThis skill enables visual inspection of websites running locally or remotely to identify and fix design issues.
Product analytics 4
Product analytics, instrumentation, event taxonomy, funnels, activation/retention, experiments, success metrics
- experiment-designerUse when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests.
- instrumentation-planTurns a feature or flow into an instrumentation plan - the questions to answer, the success and guardrail metrics, an event taxonomy with a consistent naming…
- product-analyticsUse when defining product KPIs, building metric dashboards, running cohort or retention analysis, or interpreting feature adoption trends across product stages.
- silver-measureClose the loop after implementation by determining whether a shipped design or product change achieved its intended outcome — reviewing instrumentation.
Agentic and AI-native UI 2
Conversational and agentic interfaces, generative UI, human-in-the-loop patterns, trust, transparency, AI-product evaluation
Ethics and safety 1
Privacy-aware design, consent, dark-pattern detection, trust and safety, sensitive-domain and responsible design
Design engineering 6
Design-to-engineering handoff, frontend implementation quality, performance as UX, design-decision records
- design-handoffGenerate developer handoff specs from a design.
- explain-interfaceAnswers "how was this built?" about an interface.
- extract-static-htmlExtract self-contained static HTML from a built web application or React components by inlining CSS and images.
- handoff-to-claude-codeUse when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase.
- image-to-codeElite website image-to-code skill for Codex.
- web-artifacts-builderSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
Orchestration 4
Higher-level skills that coordinate specialist skills into one workflow and one coherent output
- better-interfaceCross-discipline interface review.
- pre-handoff-reviewChecks that a design is complete enough to hand to engineering by running the specialist skills that own each part of a specification - states and edge cases,…
- product-design-reviewRuns a complete product-design review of a screen, flow, prototype, live page or pull request by selecting the smallest set of specialist skills the input needs.
- ux-research-workflowDrives a user-research effort from the decision it must inform to an evidence-backed recommendation by sequencing the specialist skills for planning,…
For agents: llms.txt lists every skill with a link to its raw SKILL.md file.