stritar
UserAgent skills for product design: research, UI, design systems, accessibility, content and design QA.
Categories
Indexed Skills (50)
a11y-critic
Use when you have an existing component, flow, or interface and need an evidence-backed accessibility design review after basic checks pass. Best for WCAG 2.2 compliance, focus management, ARIA pattern quality, semantics, and state communication gaps automated tools miss.
a11y-planner
Use when you know what component, flow, or interface you need but not yet the right accessibility approach. Best for turning WCAG 2.2 requirements into an accessible implementation plan with WAI-ARIA APG patterns before code hardens bad interaction and state patterns.
a11y-role-audit
ARRM-based accessibility role audit — runs responsibility-based review lenses (visual design, UX design, front-end dev, content authoring, business analysis, testing) to produce role-attributed findings. Complements the access-method perspectives in perspective-audit.
perspective-audit
Deep accessibility review from 7 access perspectives — activated by escalation from a11y-planner or a11y-critic when one or more perspectives are flagged at MEDIUM or HIGH alarm level.
design-details
Design router for UI quality work. Routes to focused sub-skills for animation, layout, copy, typography, color, accessibility, and analytics instrumentation. Triggers on "review this UI", "polish this", "audit this screen", or when the user names a specific design concern that maps to a sub-skill.
review-a11y
Use to REVIEW changed frontend code for accessibility: staged files, a working diff, branch, or PR; prompts such as 'review a11y', 'is this accessible?', or 'anything to fix before merge?'; and hook or CI findings on a change. Run the bundled install-free engine with cross-file JSX/TSX analysis, then adjudicate candidates and return a severity-ranked WCAG 2.2 AA review with file:line fixes, residual rendering risks, and a verdict. Use `ultra11y` instead for whole-repo audits, dated conformance reports, country standards, PRD backlogs, or authoring accessible markup.
ultra11y
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, or tickets; AUTHOR accessible markup; fix accessibility; or wire a repo gate and rendered-DOM capture pipeline. The bundled install-free engine runs 93 static checks tied to success criteria, while the agent adjudicates judgment criteria and routes rendering criteria to browser scans; check/verify reject invented non-conformities. Use `review-a11y` instead for a review scoped only to a diff, branch, or PR.
agentic-ui-review
Reviews interfaces where an AI agent acts on the user's behalf (chat assistants that run tools, autonomous workflows, copilots that edit files or data) for the trust and control patterns those interfaces need - intent confirmation, approval gates scaled to risk, visible state and progress, tool-use transparency, honest uncertainty, interruptibility, reversibility, error recovery and accessible streaming output - against the published human-AI interaction guidelines, and produces severity-rated findings with concrete fixes. Use when designing or reviewing any UI that shows an agent planning, acting or asking for permission. Triggers on agentic UI, agent interface, AI assistant UX, copilot, approval flow, confirmation pattern, human in the loop, tool use transparency, agent progress, streaming state, uncertainty display, undo agent action, interrupt agent, autonomy level, trust calibration, AI explainability, generative UI.
instrumentation-plan
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 convention, event properties, identity and consent rules, funnel and retention definitions, and a QA checklist - so product analytics can evaluate the design after launch. Use when specifying analytics for a new feature, reviewing an existing tracking plan, defining activation or retention metrics, or preparing an A/B test. Triggers on instrumentation, tracking plan, event taxonomy, analytics events, event naming, product analytics, success metrics, guardrail metrics, funnel analysis, activation metric, retention metric, north star metric, A/B test metrics, experiment design, measurement plan, data minimization for analytics.
design-handoff
Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.
explain-interface
Answers "how was this built?" about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
extract-static-html
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
frontend-design-review
Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.
interface-review
Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request. Covers interface quality, not correctness, tests, or security.
review-animations
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
web-design-reviewer
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-system
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.
extract-design-md
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
pick-ui-library
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
token-naming
Chooses and applies one naming convention for design tokens across every category - declares a grammar (dotted category.property.variant, role-first CSS custom properties, or functional order), fixes the primitive, semantic and component tiers, picks a scale type per category without mixing types among siblings, names composite tokens (text style, border, shadow, gradient), and writes token documentation with an owner per group and a deprecation and rename path. Use when starting or auditing a token set, when two grammars coexist, when semantic names are subjective or appearance-based, or when nobody can list which tokens a component uses. Defers to better-colors for colour role names. Triggers on token naming, name design tokens, token naming convention, token grammar, semantic token names, token scale, t-shirt vs numeric scale, composite tokens, text style token, token documentation, token ownership, deprecate a token, rename tokens, too many tokens.
wpds
Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.
dark-pattern-review
Reviews a flow, screen or copy for deceptive and manipulative design patterns (confirmshaming, obstruction, sneaking, false urgency, forced continuity, interface interference, pre-selected consent) against the published taxonomies used by regulators, rates each finding by user harm and regulatory exposure, and proposes the honest alternative. Use before shipping consent, sign-up, pricing, checkout, subscription, cancellation, notification or data-sharing flows, or when asked whether a design is manipulative. Triggers on dark patterns, deceptive design, manipulative UI, confirmshaming, roach motel, cancellation flow, consent banner, cookie banner, drip pricing, hidden costs, fake urgency, scarcity, forced continuity, nagging, pre-ticked, trick wording, subscription trap, ethical design review, DSA, FTC, GDPR consent.
ia-evaluation
Plans, runs and analyses information-architecture studies - open, closed and hybrid card sorts, tree tests and first-click tests - to decide how content and navigation should be grouped and labelled, and turns the results into a sitemap or navigation recommendation with evidence. Use when choosing between navigation structures, validating category labels, reorganising a menu or settings area, or when users cannot find things. Triggers on information architecture, card sorting, tree testing, first-click test, navigation labels, menu structure, sitemap, taxonomy validation, findability, categorisation study, IA research, content grouping, settings organisation.
a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
silver-measure
Close the loop after implementation by determining whether a shipped design or product change achieved its intended outcome — reviewing instrumentation, inspecting analytics, comparing before/after, and stating confidence and limitations. Use after implementation, or whenever an outcome needs to be checked against its original success criteria.
design-tokens
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
figma-integration
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, and verify component parity (variants/states). Use when the user wants to push tokens/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift.
token-build
Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.
silver-ideate
Generate meaningfully distinct concepts and testable hypotheses grounded in the current problem frame and canonical constraints, then support explicit human selection. Use for divergent product design exploration and hypothesis generation.
silver-structure
Define and refine information architecture, navigation structure, taxonomy, content models, and object models — what exists, how it is organized, and how things relate. Distinct from flow (sequences over time) and map (broader relational views).
a11y-check-code
Performs an accessibility check (a11y check) on source code. Reads HTML / JSX / TSX / Vue / Svelte / templates, also traces imported components, identifies issues against WCAG 2.2 level AA as a guide, and outputs a report with severity ratings. Used for things like "look at this component's accessibility", "run an a11y check", "check whether there are any accessibility issues", and so on. Use for accessibility (a11y) review of source code files and components against WCAG 2.2 AA.
a11y-check-page
Performs an accessibility check (a11y check) on a live web page. Operates the browser via Playwright MCP to run automated checks with axe-core, keyboard operation, zoom and reflow, and accessibility tree checks against WCAG 2.2 level AA as a guideline, and outputs a report with severity ratings. Pages that require login can also be checked if credentials and steps are provided. Used for things like "check the accessibility of this URL" or "log in and run an a11y check on the admin screen". Use for accessibility (a11y) audit of a live web page via browser automation against WCAG 2.2 AA.
better-accessibility
Accessibility engineering for product interfaces. Use when building or reviewing UI components and custom widgets, or when the user reports a keyboard or screen-reader problem. Triggers on accessibility, a11y, WCAG, aria, focus ring, focus trap, keyboard navigation, tabindex, screen reader, sr-only, alt text, hit area, hover on touch, prefers-reduced-motion, autoplay, skip link, semantic HTML, form errors, disabled buttons, "not keyboard accessible".
cognitive-accessibility
Use when evaluating mental load, wayfinding, focus management, memory demands, or decision complexity in any interface — ensures designs work for people with cognitive differences, under stress, or managing divided attention
conversational-ux
Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use `form-design`.
experiment-designer
Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.
product-analytics
Use when defining product KPIs, building metric dashboards, running cohort or retention analysis, or interpreting feature adoption trends across product stages.
accessible-content
Use when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content is readable, navigable, and meaningful for everyone
better-writing
UX writing and interface copy. Use when writing or reviewing any user-facing text. Triggers on UX writing, microcopy, button labels, link text, error messages, empty states, placeholder text, settings labels, capitalization, sentence case, voice and tone.
localization-design
Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use `ux-writing` (designer-toolkit).
ux-writing
Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.
handoff-to-claude-code
Use when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase. Produces a self-sufficient handoff folder with a spec README, zipped for download.
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
design-debt-audit
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems).
design-system-governance
Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history use `version-control-strategy` (design-ops).
motion-system
Define motion tokens — durations, easing vocabulary, and reduced-motion handling — for consistency product-wide. Use when standardising motion across a system. For crafting one specific animation, use `animation-principles` (interaction-design).
ui-design-system
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.
product-discovery
Use when validating product opportunities, mapping assumptions, planning discovery sprints, or testing problem-solution fit before committing delivery resources.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.