# Product design skills

> 106 agent skills for product design work, in 17 categories. Each link below opens the raw SKILL.md file with that skill's full instructions.

Browse and search the same skills at http://denisstritar.com/skills/. A skill's supporting files are listed on its page and served under http://denisstritar.com/skills/raw/<skill-id>/.

## Discovery

- [product-discovery](http://denisstritar.com/skills/raw/product-discovery/SKILL.md): Use when validating product opportunities, mapping assumptions, planning discovery sprints.
- [silver-ideate](http://denisstritar.com/skills/raw/silver-ideate/SKILL.md): Generate meaningfully distinct concepts and testable hypotheses grounded in the current problem frame and canonical constraints.

## User research

- [customer-journey-mapper](http://denisstritar.com/skills/raw/customer-journey-mapper/SKILL.md): Maps the full customer journey from first touch to advocacy.
- [inclusive-personas](http://denisstritar.com/skills/raw/inclusive-personas/SKILL.md): Use when defining who a design serves — creating personas, user stories.
- [journey-mapper](http://denisstritar.com/skills/raw/journey-mapper/SKILL.md): Scans a codebase and generates a self-contained HTML service-design journey map — NN/g combined customer journey + service blueprint format.
- [persona](http://denisstritar.com/skills/raw/persona/SKILL.md): Build a persona panel, explore customer motivations through open-ended questions, and pressure-test product concepts before spending on fieldwork.
- [research-planning](http://denisstritar.com/skills/raw/research-planning/SKILL.md): Use 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-synthesis](http://denisstritar.com/skills/raw/research-synthesis/SKILL.md): Synthesize user research into themes, insights, and recommendations.
- [service-blueprint](http://denisstritar.com/skills/raw/service-blueprint/SKILL.md): Map service delivery across frontstage actions, backstage processes, and supporting systems.
- [silver-research](http://denisstritar.com/skills/raw/silver-research/SKILL.md): Define research questions and methods, participant criteria, scripts, evidence handling, and sanitized observation plans.
- [silver-synthesize](http://denisstritar.com/skills/raw/silver-synthesize/SKILL.md): Convert sanitized evidence, feedback, analytics, briefs, and labeled assumptions into findings, problem frames, opportunities, contradictions.
- [survey-design](http://denisstritar.com/skills/raw/survey-design/SKILL.md): Design unbiased survey instruments — question wording, scales, and sampling — to measure attitudes at scale.
- [user-research-cookiy](http://denisstritar.com/skills/raw/user-research-cookiy/SKILL.md): End-to-end user research assistant — qualitative and quantitative.
- [ux-researcher-designer](http://denisstritar.com/skills/raw/ux-researcher-designer/SKILL.md): UX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks.

## Product strategy

- [design-negotiation](http://denisstritar.com/skills/raw/design-negotiation/SKILL.md): Advocate for design quality, scope, and timeline with partners and leadership using evidence and shared goals.
- [market-command-matrix](http://denisstritar.com/skills/raw/market-command-matrix/SKILL.md): Turns competitor signals into judgement—mindshare vs resource strength, then attack/monitor/harvest/ignore/partner with one primary motion per priority player.

## Information architecture

- [ia-evaluation](http://denisstritar.com/skills/raw/ia-evaluation/SKILL.md): Plans, runs and analyses information-architecture studies - open, closed and hybrid card sorts, tree tests and first-click tests - to decide how content and…
- [silver-structure](http://denisstritar.com/skills/raw/silver-structure/SKILL.md): Define and refine information architecture, navigation structure, taxonomy, content models, and object models — what exists, how it is organized.

## Interaction design

- [animate](http://denisstritar.com/skills/raw/animate/SKILL.md): Build 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-expo](http://denisstritar.com/skills/raw/animate-expo/SKILL.md): Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate.
- [animation-vocabulary](http://denisstritar.com/skills/raw/animation-vocabulary/SKILL.md): Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term.
- [apple-design](http://denisstritar.com/skills/raw/apple-design/SKILL.md): Apple's approach to interface design and fluid, physical motion, translated for the web.
- [apple-hig-expert](http://denisstritar.com/skills/raw/apple-hig-expert/SKILL.md): Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language.
- [design-motion-principles](http://denisstritar.com/skills/raw/design-motion-principles/SKILL.md): Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques.
- [laws-of-ux](http://denisstritar.com/skills/raw/laws-of-ux/SKILL.md): Improve any user interface with 30 evidence-based UX principles drawn from cognitive psychology and human-perception research.
- [onboarding](http://denisstritar.com/skills/raw/onboarding/SKILL.md): When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value.
- [platform-conventions](http://denisstritar.com/skills/raw/platform-conventions/SKILL.md): Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify.
- [signup](http://denisstritar.com/skills/raw/signup/SKILL.md): When the user wants to optimize signup, registration, account creation, or trial activation flows.

## Visual design

- [algorithmic-art](http://denisstritar.com/skills/raw/algorithmic-art/SKILL.md): Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.
- [better-colors](http://denisstritar.com/skills/raw/better-colors/SKILL.md): Color systems for digital products.
- [better-layout](http://denisstritar.com/skills/raw/better-layout/SKILL.md): Layout structure for web interfaces.
- [better-typography](http://denisstritar.com/skills/raw/better-typography/SKILL.md): Web typography.
- [better-ui](http://denisstritar.com/skills/raw/better-ui/SKILL.md): Design engineering principles for making interfaces feel polished.
- [canvas-design](http://denisstritar.com/skills/raw/canvas-design/SKILL.md): Create beautiful visual art in .png and .pdf documents using design philosophy.
- [diagram-design](http://denisstritar.com/skills/raw/diagram-design/SKILL.md): Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart.
- [frontend-design](http://denisstritar.com/skills/raw/frontend-design/SKILL.md): Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
- [make-a-deck](http://denisstritar.com/skills/raw/make-a-deck/SKILL.md): Use when the user asks for a slide presentation.
- [redesign-existing-projects](http://denisstritar.com/skills/raw/redesign-existing-projects/SKILL.md): Upgrades existing websites and apps to premium quality.
- [theme-factory](http://denisstritar.com/skills/raw/theme-factory/SKILL.md): Toolkit for styling artifacts with a theme.
- [wp-block-themes](http://denisstritar.com/skills/raw/wp-block-themes/SKILL.md): Use when developing WordPress block themes.
- [wp-patterns](http://denisstritar.com/skills/raw/wp-patterns/SKILL.md): Pattern: create or update WordPress block patterns (starter pages, templates, template parts, Query Loop layouts), review pattern registration, block markup,…

## Design systems

- [design-debt-audit](http://denisstritar.com/skills/raw/design-debt-audit/SKILL.md): Inventory and prioritise accumulated design inconsistencies across a product.
- [design-system](http://denisstritar.com/skills/raw/design-system/SKILL.md): Audit, document, or extend your design system.
- [design-system-governance](http://denisstritar.com/skills/raw/design-system-governance/SKILL.md): Define how the system evolves — contribution model, versioning, deprecation, and change management.
- [design-tokens](http://denisstritar.com/skills/raw/design-tokens/SKILL.md): Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component).
- [extract-design-md](http://denisstritar.com/skills/raw/extract-design-md/SKILL.md): Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.
- [figma-integration](http://denisstritar.com/skills/raw/figma-integration/SKILL.md): Keep 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-ts](http://denisstritar.com/skills/raw/frontend-ui-dark-ts/SKILL.md): Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations.
- [motion-system](http://denisstritar.com/skills/raw/motion-system/SKILL.md): Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide.
- [pick-ui-library](http://denisstritar.com/skills/raw/pick-ui-library/SKILL.md): Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop,…
- [token-build](http://denisstritar.com/skills/raw/token-build/SKILL.md): Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts.
- [token-naming](http://denisstritar.com/skills/raw/token-naming/SKILL.md): Chooses and applies one naming convention for design tokens across every category - declares a grammar.
- [ui-design-system](http://denisstritar.com/skills/raw/ui-design-system/SKILL.md): UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations.
- [wpds](http://denisstritar.com/skills/raw/wpds/SKILL.md): Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.

## Accessibility

- [a11y-audit](http://denisstritar.com/skills/raw/a11y-audit/SKILL.md): Audit 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](http://denisstritar.com/skills/raw/a11y-check-code/SKILL.md): ソースコードを対象にアクセシビリティチェック（a11yチェック）を行う。HTML / JSX / TSX / Vue / Svelte / テンプレートを読み、importしているコンポーネントも辿って、WCAG 2.2…
- [a11y-check-page](http://denisstritar.com/skills/raw/a11y-check-page/SKILL.md): 動作しているWebページを対象にアクセシビリティチェック（a11yチェック）を行う。Playwright MCPでブラウザを操作し、axe-coreによる自動チェック、キーボード操作、ズームやリフロー、アクセシビリティツリーの確認をWCAG…
- [a11y-critic](http://denisstritar.com/skills/raw/a11y-critic/SKILL.md): Use when you have an existing component, flow, or interface and need an evidence-backed accessibility design review after basic checks pass.
- [a11y-planner](http://denisstritar.com/skills/raw/a11y-planner/SKILL.md): Use when you know what component, flow, or interface you need but not yet the right accessibility approach.
- [a11y-role-audit](http://denisstritar.com/skills/raw/a11y-role-audit/SKILL.md): ARRM-based accessibility role audit — runs responsibility-based review lenses.
- [better-accessibility](http://denisstritar.com/skills/raw/better-accessibility/SKILL.md): Accessibility engineering for product interfaces.
- [cognitive-accessibility](http://denisstritar.com/skills/raw/cognitive-accessibility/SKILL.md): Use when evaluating mental load, wayfinding, focus management, memory demands.
- [perspective-audit](http://denisstritar.com/skills/raw/perspective-audit/SKILL.md): Deep accessibility review from 7 access perspectives — activated by escalation from a11y-planner or a11y-critic when one or more perspectives are flagged at…
- [review-a11y](http://denisstritar.com/skills/raw/review-a11y/SKILL.md): Use to REVIEW changed frontend code for accessibility.
- [ultra11y](http://denisstritar.com/skills/raw/ultra11y/SKILL.md): Use 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

- [accessible-content](http://denisstritar.com/skills/raw/accessible-content/SKILL.md): Use when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text.
- [better-writing](http://denisstritar.com/skills/raw/better-writing/SKILL.md): UX writing and interface copy.
- [localization-design](http://denisstritar.com/skills/raw/localization-design/SKILL.md): Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats.
- [ux-writing](http://denisstritar.com/skills/raw/ux-writing/SKILL.md): Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms.

## Prototyping

- [design-and-refine](http://denisstritar.com/skills/raw/design-and-refine/SKILL.md): Runs the 0x Designer "Design & Refine" workflow.
- [interactive-prototype](http://denisstritar.com/skills/raw/interactive-prototype/SKILL.md): Use when the user asks for a working, clickable prototype — something that behaves like a real app rather than a static mockup.
- [prototype](http://denisstritar.com/skills/raw/prototype/SKILL.md): Build 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…
- [variant](http://denisstritar.com/skills/raw/variant/SKILL.md): Answers "which of these?" rather than "is this right?".
- [wireframe](http://denisstritar.com/skills/raw/wireframe/SKILL.md): Use when the user wants to explore the design space quickly — many rough ideas, not one polished direction.
- [wireframe-json](http://denisstritar.com/skills/raw/wireframe-json/SKILL.md): Generate JSON wireframe with HTML preview

## Testing and evaluation

- [break](http://denisstritar.com/skills/raw/break/SKILL.md): Answers "does this survive?" for one component.
- [critique-information-density](http://denisstritar.com/skills/raw/critique-information-density/SKILL.md): Critique a rendered screen's density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure.
- [design-critique](http://denisstritar.com/skills/raw/design-critique/SKILL.md): Run a heuristic evaluation of a UI design (image, HTML, Figma, URL, or flow) the way an experienced designer would.
- [design-review](http://denisstritar.com/skills/raw/design-review/SKILL.md): Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table.
- [find-animation-opportunities](http://denisstritar.com/skills/raw/find-animation-opportunities/SKILL.md): Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't.
- [improve-animations](http://denisstritar.com/skills/raw/improve-animations/SKILL.md): Survey a codebase's animation and motion code as a senior motion advisor.
- [silver-evaluate](http://denisstritar.com/skills/raw/silver-evaluate/SKILL.md): Define an evaluation question and method, prepare tasks, inspect a visualization or prototype, capture sanitized observations.
- [synthetic-user-testing](http://denisstritar.com/skills/raw/synthetic-user-testing/SKILL.md): Use after the fix round to validate the design by walking through key tasks as each persona — simulating how Jordan (low-vision), Priya.
- [usability-testing](http://denisstritar.com/skills/raw/usability-testing/SKILL.md): Use when planning or conducting usability tests — writing test scripts, defining tasks, selecting participants, analysing findings.

## Design QA

- [design-details](http://denisstritar.com/skills/raw/design-details/SKILL.md): Design router for UI quality work.
- [frontend-design-review](http://denisstritar.com/skills/raw/frontend-design-review/SKILL.md): Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance.
- [interface-review](http://denisstritar.com/skills/raw/interface-review/SKILL.md): Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request.
- [review-animations](http://denisstritar.com/skills/raw/review-animations/SKILL.md): Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy.
- [web-design-reviewer](http://denisstritar.com/skills/raw/web-design-reviewer/SKILL.md): This skill enables visual inspection of websites running locally or remotely to identify and fix design issues.

## Product analytics

- [experiment-designer](http://denisstritar.com/skills/raw/experiment-designer/SKILL.md): Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests.
- [instrumentation-plan](http://denisstritar.com/skills/raw/instrumentation-plan/SKILL.md): Turns 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-analytics](http://denisstritar.com/skills/raw/product-analytics/SKILL.md): Use when defining product KPIs, building metric dashboards, running cohort or retention analysis, or interpreting feature adoption trends across product stages.
- [silver-measure](http://denisstritar.com/skills/raw/silver-measure/SKILL.md): Close the loop after implementation by determining whether a shipped design or product change achieved its intended outcome — reviewing instrumentation.

## Agentic and AI-native UI

- [agentic-ui-review](http://denisstritar.com/skills/raw/agentic-ui-review/SKILL.md): Reviews interfaces where an AI agent acts on the user's behalf.
- [conversational-ux](http://denisstritar.com/skills/raw/conversational-ux/SKILL.md): Design voice and conversational interfaces — dialog flows, error recovery, and persona.

## Ethics and safety

- [dark-pattern-review](http://denisstritar.com/skills/raw/dark-pattern-review/SKILL.md): Reviews a flow, screen or copy for deceptive and manipulative design patterns.

## Design engineering

- [design-handoff](http://denisstritar.com/skills/raw/design-handoff/SKILL.md): Generate developer handoff specs from a design.
- [explain-interface](http://denisstritar.com/skills/raw/explain-interface/SKILL.md): Answers "how was this built?" about an interface.
- [extract-static-html](http://denisstritar.com/skills/raw/extract-static-html/SKILL.md): Extract self-contained static HTML from a built web application or React components by inlining CSS and images.
- [handoff-to-claude-code](http://denisstritar.com/skills/raw/handoff-to-claude-code/SKILL.md): Use 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-code](http://denisstritar.com/skills/raw/image-to-code/SKILL.md): Elite website image-to-code skill for Codex.
- [web-artifacts-builder](http://denisstritar.com/skills/raw/web-artifacts-builder/SKILL.md): Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).

## Orchestration

- [better-interface](http://denisstritar.com/skills/raw/better-interface/SKILL.md): Cross-discipline interface review.
- [pre-handoff-review](http://denisstritar.com/skills/raw/pre-handoff-review/SKILL.md): Checks 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-review](http://denisstritar.com/skills/raw/product-design-review/SKILL.md): Runs 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-workflow](http://denisstritar.com/skills/raw/ux-research-workflow/SKILL.md): Drives a user-research effort from the decision it must inform to an evidence-backed recommendation by sequencing the specialist skills for planning,…