skills.rest
MDLDev-site
MDLDev-siteOFFICIAL
Explore all skills by this author →
GitHub

frontend-ux-specialist

Guide frontend UX and accessibility improvements for Claude Code projects.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#frontend#responsive#ux#design-system#pixel-perfect
One-click install
npx skills add https://github.com/MDLDev-site/mdl-brand-website --skill frontend-ux-specialist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux-specialist
Source: https://github.com/MDLDev-site/mdl-brand-website/tree/main/.claude/skills/frontend-ux-specialist
Command: npx skills add https://github.com/MDLDev-site/mdl-brand-website --skill frontend-ux-specialist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to translate design intent into accessible, high-performance interfaces. This skill provides expert guidance to align UI realities with user needs, reducing rework and accessibility gaps.

Core Features & Use Cases

  • Accessibility audits evaluate semantic HTML, color contrast, keyboard navigation, and aria-labels to ensure inclusive interfaces.
  • Design-to-code bridge translates design tokens, spacing scales, and component patterns into reusable UI components for consistency.
  • Reviews and coaching provide component-level assessments during handoffs and code reviews to elevate UI quality and collaboration.

Quick Start

Provide pixel-perfect frontend UX guidance for the current UI task.

Frequently Asked Questions about frontend-ux-specialist

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

FAQPage Schema
How do I improve frontend accessibility for semantic HTML and color contrast?▼

Frontend accessibility improvements require evaluating semantic HTML, color contrast, keyboard navigation, and aria-labels. This skill provides specific, testable recommendations to ensure interfaces are inclusive and meet a11y requirements.

What is the best way to translate design tokens into reusable UI components?▼

Translating design tokens into reusable UI components involves mapping spacing scales and component patterns into code. This bridges design-to-development handoffs to ensure design-token consistency across your frontend project.

Can I get component-level UX feedback during code reviews for mobile and desktop contexts?▼

Yes, you can get component-level UX feedback during code reviews for mobile and desktop contexts. The skill delivers expert assessments during design-to-development handoffs to elevate UI quality and collaboration.

Does this frontend UX guidance work for responsive layouts without external dependencies?▼

Yes, this frontend UX guidance works without external dependencies. It imposes requirements for responsive layouts and pixel-perfect design directly within your Claude Code projects to align UI realities with user needs.

Why does my design-to-development handoff result in accessibility gaps and UI rework?▼

Design-to-development handoffs often result in accessibility gaps and UI rework because teams struggle to translate design intent into accessible interfaces. Expert component reviews and coaching reduce these gaps by providing actionable feedback.

Related Skills

Explore More Design & Creative Skills→
marktantongcomarktantongco
2

ui-ux-pro-max

Generate design systems and frontend guidance for web and mobile projects.

Community
Advanced
TehminanazTehminanaz
1

frontend-component-architect

Design and implement pixel-perfect UI components for Next.js 16 with Tailwind CSS and Shadcn UI.

Community
Advanced
fantay0312fantay0312

react:components

Convert Stitch designs into modular React components with validation.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced