skills.rest
jamesvgibbs
jamesvgibbsCOMMUNITY
Explore all skills by this author →
GitHub

UI Standards Skill

Define and enforce UI patterns and WCAG 2.1 AA accessibility standards for web applications.

Updated Jan 12, 2026
Search Tags:#ui#accessibility#frontend#design system#components#ux
One-click install
npx skills add https://github.com/jamesvgibbs/tableflow --skill ui-standards-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Standards Skill
Source: https://github.com/jamesvgibbs/tableflow/tree/main/.claude/skills/ui-standards
Command: npx skills add https://github.com/jamesvgibbs/tableflow --skill ui-standards-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to ensure UI consistency, accessibility, and adherence to best practices across the application, reducing development time and improving user experience.

Core Features & Use Cases

  • Design System Enforcement: Defines and enforces consistent use of colors, typography, spacing, and components.
  • Accessibility Standards: Outlines WCAG 2.1 AA compliance guidelines, including color contrast, keyboard navigation, and ARIA patterns.
  • Component Best Practices: Details correct usage for buttons, forms, navigation, and data display elements.
  • Use Case: A new developer can use this Skill to quickly understand and implement the correct styling and accessibility for a new feature, ensuring it aligns with the existing design language.

Quick Start

Follow the UI Standards Skill to ensure all new components meet accessibility and design guidelines.

Frequently Asked Questions about UI Standards Skill

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

FAQPage Schema
How do I enforce UI standards and accessibility across my web application?▼

You can enforce UI standards by applying predefined patterns for responsive breakpoints, typography, spacing, and color tokens, while adhering to WCAG 2.1 AA accessibility guidelines for keyboard navigation and ARIA patterns across all components.

What are the best practices for building accessible frontend components?▼

Accessible frontend components require correct ARIA patterns, sufficient color contrast, and full keyboard navigation support. Define feedback states, form structures, and navigation patterns explicitly to meet WCAG 2.1 AA compliance.

How do I maintain design system consistency for buttons and forms?▼

Maintain design system consistency by standardizing button variants, form structures, and data display elements. Define and apply consistent spacing, typography, and color tokens to align new features with the existing design language.

Does this UI standards approach support responsive breakpoints and animation?▼

Yes, the UI standards approach supports responsive breakpoints and animation. It explicitly covers responsive breakpoint definitions, icon usage, and animation patterns to ensure a consistent and accessible user experience across web applications.

When do I need WCAG 2.1 AA compliance for my design system?▼

You need WCAG 2.1 AA compliance for your design system whenever building web applications that require accessible user experiences. It ensures proper color contrast, keyboard navigation, and ARIA patterns for users interacting with your UI components.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
thejordanleopoldthejordanleopold
4

ui-components

Enforce WCAG 2.1 AA accessibility, responsiveness, and architecture in UI components.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
thongdn-itthongdn-it
3

ui-design

Enforce UI/UX frontend best practices across HTML, CSS, and component design.

Community
Advanced