skills.rest
salverius-tech
salverius-techCOMMUNITY
Explore all skills by this author →
GitHub

design-workflow

Enforce WCAG 2.1 AA accessibility and design tokens in UI/UX workflows.

Updated Apr 11, 2023
Search Tags:#design#ui#accessibility#design tokens#ux#component patterns
One-click install
npx skills add https://github.com/salverius-tech/dotfiles --skill design-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-workflow
Source: https://github.com/salverius-tech/dotfiles/tree/main/home/dot_claude/skills/design-workflow
Command: npx skills add https://github.com/salverius-tech/dotfiles --skill design-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices to ensure a consistent, accessible, and efficient UI/UX design and development process.

Core Features & Use Cases

  • Accessibility Standards: Enforces WCAG 2.1 AA compliance for color contrast, keyboard navigation, and screen reader compatibility.
  • Design Tokens: Establishes a single source of truth for styling with predefined CSS variables for colors, spacing, and typography.
  • Component Patterns: Offers reusable patterns for common UI elements like buttons, forms, and modals, ensuring consistency and usability.
  • Responsive Design: Promotes a mobile-first approach with clear breakpoints and guidelines for adaptable layouts.
  • Use Case: When starting a new feature, consult this Skill to ensure all design decisions align with accessibility requirements and leverage existing design tokens for a cohesive user experience.

Quick Start

Follow the design workflow guidelines to ensure accessibility and consistency in your UI components.

Frequently Asked Questions about design-workflow

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

FAQPage Schema
How do I ensure my UI components meet WCAG 2.1 AA accessibility standards?▼

Design tokens provide a single source of truth for styling by defining CSS variables for semantic colors, spacing, and typography. Implementing them ensures visual consistency and simplifies dark mode integration across your project.

What are the best practices for building accessible forms and modals?▼

Best practices for accessible forms and modals include using established component patterns that enforce focus management, keyboard navigation, and screen reader compatibility. This approach guarantees usability and WCAG 2.1 AA compliance.

How do I structure responsive design layouts using a mobile-first approach?▼

Structure responsive design layouts by adopting a mobile-first approach with defined breakpoints for adaptable UI. This method ensures components scale correctly across devices while maintaining accessibility and layout integrity.

How do I implement dark mode using CSS variables for semantic colors?▼

Implement dark mode by defining semantic color CSS variables as design tokens, allowing you to toggle themes without altering component structure. This maintains consistent contrast ratios and WCAG compliance across themes.

What Lighthouse score thresholds should my UI workflow target for accessibility?▼

Your UI workflow should target perfect Lighthouse accessibility scores by enforcing standards for color contrast, keyboard navigation, and screen reader compatibility. Meeting these thresholds ensures a fully accessible user experience.

Related Skills

Explore More Design & Creative Skills→
windyroadwindyroad
4

wr-style-guide:update-guide

Inspect project CSS architecture, design tokens, and component patterns to generate STYLE-GUIDE.md.

Official
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
SonarSourceSonarSource
11

echoes-components

Locates Echoes component interfaces and CSS token mappings in reference files.

Official
Basic
wredziowredzio

accessibility

Identify and remediate WCAG 2.1 AA accessibility issues in web pages.

Community
Advanced