skills.rest
RhettArk
RhettArkCOMMUNITY
Explore all skills by this author →
GitHub

UI/UX Specialist

Design accessible, responsive UI components with semantic HTML and ARIA labeling.

Updated Feb 4, 2026
Search Tags:#design#accessibility#components#UI#patterns#responsive#knowledge-base
One-click install
npx skills add https://github.com/RhettArk/multi-agent-dev-team --skill ui-ux-specialist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI/UX Specialist
Source: https://github.com/RhettArk/multi-agent-dev-team/tree/main/skills/ui-ux
Command: npx skills add https://github.com/RhettArk/multi-agent-dev-team --skill ui-ux-specialist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to deliver accessible, consistent UI components across projects, leading to inconsistent experiences and increased development time.

Core Features & Use Cases

  • UI component design and implementation: create semantic, accessible components aligned with design systems.
  • Accessibility enforcement: ensure keyboard navigation, screen-reader support, and WCAG compliance.
  • Responsive, mobile-first patterns: adapt across breakpoints with consistent spacing and typography.
  • Use Case: You need a reusable button pattern that remains accessible and responsive across multiple pages; this skill can generate and document patterns for reuse.

Quick Start

Prepare the workspace with current UI patterns, then task the UI/UX Specialist to design and implement a new component following existing patterns, verify accessibility, and update the KB with frontend UI patterns.

Frequently Asked Questions about UI/UX Specialist

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

FAQPage Schema
How do I design accessible UI components that meet WCAG compliance?▼

To design accessible UI components, enforce semantic HTML, ARIA labeling, keyboard navigation, and color contrast compliance. This ensures screen-reader support and WCAG adherence for reusable frontend patterns like buttons and forms.

What is the best way to build responsive UI patterns for web applications?▼

The best way to build responsive UI patterns is adopting a mobile-first approach. Adapt components across breakpoints with consistent spacing and typography, ensuring reusable buttons and navigation function smoothly across web apps.

How do I create reusable frontend UI patterns for buttons and forms?▼

Create reusable frontend UI patterns by aligning components with your design system and applying semantic HTML. After implementing buttons and forms, document these patterns in a central knowledge base for future project reuse.

How do I ensure keyboard navigation works correctly in web app components?▼

Ensure keyboard navigation works by enforcing semantic HTML and ARIA labeling within your UI components. This approach guarantees that buttons, forms, and navigation elements remain fully operable via keyboard.

Why does maintaining consistent UI components across multiple projects fail?▼

Maintaining consistent UI components fails without a central knowledge base updated with frontend patterns. Standardizing semantic HTML and responsive breakpoints ensures design teams deliver accessible, uniform components across projects.

Related Skills

Explore More Design & Creative Skills→
resendresend
39

resend-design-system

Consolidate UI development with design tokens and component primitives.

Official
Advanced
anicdhanicdh

frontend-ui

Apply Tailwind and Shadcn/ui patterns with accessibility rules to React components.

Community
Advanced
ravnhqravnhq
16

design-accessibility

Audit frontend projects for WCAG and ARIA compliance.

Official
Basic
knckknckknckknck

wcag-audit-patterns

Audit WCAG 2.2 conformance with axe-core, pa11y, and lighthouse.

Community
Advanced