skills.rest
sundarshahi
sundarshahiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-designer

Generates UX research, information architecture, and WCAG AA design-system specifications from an approved BRD.

1|Updated Jun 24, 2026
Search Tags:#design system#personas#user flows#UX design#design tokens#information architecture#wcag accessibility
One-click install
npx skills add https://github.com/sundarshahi/drydock --skill ux-designer-sundarshahi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/sundarshahi/drydock/tree/main/skills/ux-designer
Command: npx skills add https://github.com/sundarshahi/drydock --skill ux-designer-sundarshahi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning an approved business requirements document into a concrete, implementable user experience is slow and error-prone: personas get invented, competitor claims get hallucinated, contrast ratios get eyeballed, and frontend engineers receive vague direction instead of an actionable spec. This Skill runs a disciplined five-phase design workflow that produces grounded research, complete flows with error states, and a design-system specification the frontend engineer can implement without guessing. ## Core Features & Use Cases - Grounded Discovery: Synthesizes personas, jobs-to-be-done, and prioritized user needs traced to BRD stories, plus a live-researched competitive UX teardown with cited sources. - Information Architecture & Flows: Produces sitemaps, navigation models, end-to-end flows with error branches, and wireframe specs that enumerate loading, empty, error, and success states for every screen. - Design-System Specification: Delivers named tokens, a numbered type scale, a color system with computed WCAG 2.1 AA contrast ratios, per-component states and variants, motion specs with prefers-reduced-motion fallbacks, and a usability test plan with measurable metrics. - Use Case: After a product manager approves a BRD for a booking SaaS, invoke this Skill to produce the full docs/design/ spec package — personas, sitemap, flows, tokens, component specs, and an accessibility checklist — that the frontend engineer then implements as code. ## Quick Start Ask the drydock orchestrator to run the ux-designer on the approved BRD to produce the design-system specification under docs/design/.

Frequently Asked Questions about ux-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn a BRD into a design system specification?▼

Run the five-phase workflow: discovery synthesizes personas and jobs-to-be-done from BRD stories, information architecture defines sitemaps and flows, then the design-system phase produces tokens, type scale, and per-component specs. The output lives under docs/design/ as a handoff artifact for frontend engineers.

What does a UX design handoff for frontend engineers include?▼

A complete handoff includes named design tokens with values, a numbered modular type scale, a color system with computed contrast ratios, per-component states and variants, motion specs with reduced-motion fallbacks, and an INDEX.md pointing to entry points. The spec describes values and intent, never component code.

How do I verify WCAG 2.1 AA color contrast in a design system?▼

Compute the contrast ratio from each actual foreground/background hex pair and compare it against the AA thresholds: 4.5:1 for normal text, 3:1 for large text and UI components. Record every pair in a table with its computed ratio and pass/fail verdict rather than judging visually.

Does this Skill write frontend code or Tailwind config?▼

No. It produces specifications only — tokens, component states, and behavior described as values plus intent. The frontend engineer implements the token TypeScript, theme provider, and component library from that spec, so no code is authored in the design phase.

What happens if the BRD is missing or unapproved?▼

The Skill stops and requests the BRD, since personas and flows are derived from requirements and must not be invented. Requirement gaps discovered during design are filed as findings for the product manager rather than silently rewritten.

Why must competitor UX research use live web search?▼

Competitor interfaces and design trends change frequently, so describing them from memory risks hallucinated claims. Each competitor teardown requires a source URL retrieved in the current session, with an explicit TODO placeholder when a source cannot be retrieved.

Related Skills

Explore More Design & Creative Skills→
MazenMradMazenMrad
1

bmad-agent-pm

Guide structured user interviews to draft PRDs and acceptance criteria.

Community
Advanced
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced
DanhvbDanhvb

Mobile Web Domain Knowledge

Provide structured mobile and web domain knowledge for architecture planning.

Community
Advanced
apexradiusapexradius

design-system

Generate CSS custom properties and a component library from a brand name.

Official
Intermediate