skills.rest
fiftynotai
fiftynotaiCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

10|Updated Oct 25, 2025
Search Tags:#accessibility#ui-design#responsive-design#dark-mode#design-tokens#component-states#developer-handoff
One-click install
npx skills add https://github.com/fiftynotai/igris-ai --skill ui-design-fiftynotai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/fiftynotai/igris-ai/tree/main/.claude/skills/ui-design
Command: npx skills add https://github.com/fiftynotai/igris-ai --skill ui-design-fiftynotai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reduces inconsistent UI implementations, accessibility regressions, and slow developer handoffs by providing a structured design workflow and implementation-ready specifications.

Core Features & Use Cases

  • Component State Matrix: Defines Default, Hover, Active/Pressed, Focus, Disabled, Error, and Loading states for each component.
  • Accessibility Compliance: Specifies WCAG 2.1 AA contrast ratios, touch targets, screen reader labels, keyboard order, and focus indicators.
  • Responsive & Theme Mapping: Establishes breakpoints, layout adjustments, orientation handling, and light↔dark color mappings.
  • Developer Handoff: Produces design tokens, component hierarchy, state transitions, and platform-specific implementation notes for web, iOS, and Android.
  • Use Case: Turn a product brief into a developer-ready component spec that covers accessibility, responsive behavior, and dark mode.

Quick Start

Design a responsive, accessible primary button component for web that includes design tokens, every interaction state, and developer handoff notes.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a component state matrix for UI design?▼

A component state matrix defines Default, Hover, Active/Pressed, Focus, Disabled, Error, and Loading states for each UI component. This matrix ensures consistent responsive design and provides developers with complete interaction state specifications for implementation.

What WCAG 2.1 AA contrast ratios do I need for accessible UI components?▼

Accessible UI components require WCAG 2.1 AA contrast ratios, appropriate touch targets, screen reader labels, keyboard order, and focus indicators. These specifications ensure responsive interfaces remain accessible to all users across web and mobile platforms.

How do I map light to dark mode colors using design tokens?▼

Dark mode mappings use design tokens to establish light↔dark color transitions for UI components. This approach maintains accessibility compliance and consistent component states across responsive breakpoints and platform-specific interaction conventions.

Can I generate developer handoff specifications for iOS and Android from a web UI design?▼

Developer handoff specifications cover web, iOS, and Android by providing design tokens, component hierarchy, state transitions, and platform-specific implementation notes. This ensures responsive behavior and accessibility compliance translate accurately across different mobile platforms.

What is the best way to specify responsive breakpoints for accessible UI components?▼

Responsive breakpoints for accessible UI components are best specified by establishing layout adjustments, orientation handling, and component state matrices together. This integrated workflow ensures design tokens and WCAG 2.1 AA contrast ratios remain consistent across all screen sizes.

Why do my UI design handoffs result in inconsistent component implementations?▼

Inconsistent UI implementations occur when handoffs lack structured design tokens, complete component state specifications, and platform-specific interaction conventions. Providing developer-ready specs with accessibility requirements and responsive behavior prevents these regressions.

Related Skills

Explore More Design & Creative Skills→
Sadiq-KolakarSadiq-Kolakar

uiux-wireframes

Generate structured wireframe layouts and navigation flows for web and mobile.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
SolaneHubSolaneHub

ui-web

Build accessible Tailwind CSS web UIs with glassmorphism and WCAG 2.1 AA compliance.

Community
Intermediate
NextSpark-jsNextSpark-js

accessibility

Implement WCAG 2.1 Level AA compliance in Next.js applications.

Official
Advanced