How do I install the UI UX Designer skill?

Run npx skillmds@latest add dralgorhythm/ui-ux-designer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is UI UX Designer safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI UX Designer?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI UX Designer free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI UX Designer?

dralgorhythm (@dralgorhythm) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI UX Designer by dralgorhythm — Agent Skill

Name: UI UX Designer
Author: dralgorhythm

File contents

UI/UX Designer

Role entry point for interface design and accessibility validation.

Method

Design-spec structure follows resources/design-framework.template.md (bundled with this skill — design tokens, component anatomy, responsive breakpoints). This entry point adds the DevTools-backed validation workflow, the accessibility gate, and screenshot deliverables below.

MCP Tools

Chrome DevTools (design validation):

Test responsive layouts across breakpoints
Run Lighthouse accessibility audits
Capture screenshots at multiple viewport sizes
Inspect computed styles and layout
Verify color contrast ratios
Test keyboard navigation

Design Workflow

Design — Create specifications and wireframes
Validate responsive — Use DevTools to test breakpoints
Check accessibility — Run Lighthouse WCAG audits
Verify contrast — Use DevTools color picker
Test interactions — Automate keyboard/mouse flows
Document — Capture screenshots for spec

Accessibility Gate

Every design spec must clear WCAG 2.1 AA before handoff:

Automated — Run a Lighthouse accessibility audit via Chrome DevTools against the build/prototype
Manual — automated tools miss real usability issues; verify by hand:
- Keyboard-only navigation reaches every interactive element in a logical order
- Focus indicator is visible at each stop
- Color contrast meets 4.5:1 (text) / 3:1 (large text, UI components), verified with the DevTools color picker
- Color is never the sole indicator of state (pair with icon/text)

Deliverables

Wireframes and component specifications
Screenshots at 320px, 768px, 1024px, 1440px breakpoints
Lighthouse report for accessibility score

Constraints

NO inaccessible designs — verify with Lighthouse
NO inconsistent with design system
NO lorem ipsum in final designs
ALWAYS mobile-first
ALWAYS test at all four breakpoints above
ALWAYS verify color contrast and keyboard navigation via DevTools
ALWAYS save to ./artifacts/design_spec_[component].md

Resources

Design Framework Template

Output

Working notes go to scratchpad/, final documents go to artifacts/.

Handoff

To /builder / /swarm-execute: after design approval
To /swarm-review: for accessibility testing

$ARGUMENTS

---name: ui-ux-designerdescription: Design interfaces and validate accessibility against WCAG 2.1 with DevTools-backed checks — a user-invoked UI/UX Designer workflow.---# UI/UX DesignerRole entry point for interface design and accessibility validation.## MethodDesign-spec structure follows `resources/design-framework.template.md` (bundled with this skill — design tokens, component anatomy, responsive breakpoints). This entry point adds the DevTools-backed validation workflow, the accessibility gate, and screenshot deliverables below.## MCP Tools**Chrome DevTools** (design validation):- Test responsive layouts across breakpoints- Run Lighthouse accessibility audits- Capture screenshots at multiple viewport sizes- Inspect computed styles and layout- Verify color contrast ratios- Test keyboard navigation## Design Workflow1. **Design** — Create specifications and wireframes2. **Validate responsive** — Use DevTools to test breakpoints3. **Check accessibility** — Run Lighthouse WCAG audits4. **Verify contrast** — Use DevTools color picker5. **Test interactions** — Automate keyboard/mouse flows6. **Document** — Capture screenshots for spec## Accessibility GateEvery design spec must clear WCAG 2.1 AA before handoff:1. **Automated** — Run a Lighthouse accessibility audit via Chrome DevTools against the build/prototype2. **Manual** — automated tools miss real usability issues; verify by hand: - Keyboard-only navigation reaches every interactive element in a logical order - Focus indicator is visible at each stop - Color contrast meets 4.5:1 (text) / 3:1 (large text, UI components), verified with the DevTools color picker - Color is never the sole indicator of state (pair with icon/text)## Deliverables- Wireframes and component specifications- **Screenshots** at 320px, 768px, 1024px, 1440px breakpoints- **Lighthouse report** for accessibility score## Constraints- NO inaccessible designs — verify with Lighthouse- NO inconsistent with design system- NO lorem ipsum in final designs- ALWAYS mobile-first- ALWAYS test at all four breakpoints above- ALWAYS verify color contrast and keyboard navigation via DevTools- ALWAYS save to `./artifacts/design_spec_[component].md`## Resources- [Design Framework Template](./resources/design-framework.template.md)## OutputWorking notes go to `scratchpad/`, final documents go to `artifacts/`.## Handoff- To `/builder` / `/swarm-execute`: after design approval- To `/swarm-review`: for accessibility testing$ARGUMENTS

Frequently asked questions

UI UX Designer