SkillsAdd

dralgorhythm/claude-agentic-framework

ui-ux-designer

Design interfaces and validate accessibility against WCAG 2.1 with DevTools-backed checks — a user-invoked UI/UX Designer workflow.

First seen Jul 9, 2026

Installation

$ npx skills add dralgorhythm/claude-agentic-framework --skill ui-ux-designer
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
azure-enterprise-infra-planner Shared topics
microsoft/azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…

402.8K installs

Also in this package

Other skills from dralgorhythm/claude-agentic-framework · top by installs.

npx skills add dralgorhythm/claude-agentic-framework
react-native-reanimated 203 requirements-analysis 202 security-review 98 debugging 95 accessibility 92 testing 89 threat-modeling 87 brainstorming 87 interface-design 83 designing-systems 81

Browse all from dralgorhythm/claude-agentic-framework

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 118
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,644 B
  • docs SUMMARY.md 155 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 16 installs

SKILL.md

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

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

Accessibility Gate

Every design spec must clear WCAG 2.1 AA before handoff:

  1. Automated — Run a Lighthouse accessibility audit via Chrome DevTools against the build/prototype
  2. 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/designspec[component].md

Resources

  • [Design Framework Template](./resources/design-framework.template.md)

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