skills.rest
walbuc
walbucCOMMUNITY
Explore all skills by this author →
GitHub

epic-ui-guidelines

Enforce accessibility and consistency guidelines for Epic Stack UI components.

Updated Jan 29, 2026
Search Tags:#accessibility#a11y#tailwind#semantic-html#radix-ui#ui-guidelines#epic-stack
One-click install
npx skills add https://github.com/walbuc/iac-sorteios --skill epic-ui-guidelines-walbuc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: epic-ui-guidelines
Source: https://github.com/walbuc/iac-sorteios/tree/main/docs/skills/epic-ui-guidelines
Command: npx skills add https://github.com/walbuc/iac-sorteios --skill epic-ui-guidelines-walbuc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Epic UI guidelines provide a centralized set of practices to ensure accessible, consistent user interfaces across Epic Stack components, aligning design, code, and behavior.

Core Features & Use Cases

  • Semantics and accessibility: promotes semantic HTML, ARIA patterns, and keyboard navigation.
  • Consistent design systems: codifies Tailwind patterns, color tokens, and responsive layouts for cohesive apps.
  • Radix UI integration and component conventions: guides safe, accessible composition with Radix primitives.

Quick Start

Review existing components and apply the guidelines to ensure accessibility, semantic HTML, and Tailwind-driven consistency.

Frequently Asked Questions about epic-ui-guidelines

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

FAQPage Schema
How do I build accessible UI components with Radix UI and Tailwind?▼

To build accessible UI components with Radix UI and Tailwind, apply semantic HTML structures, ARIA patterns, and standardized color tokens. This ensures keyboard navigation and responsive layouts remain consistent across your application interface.

What are Epic Stack UI guidelines for accessibility and ARIA patterns?▼

Epic Stack UI guidelines for accessibility define standards for semantic HTML, ARIA roles, and keyboard navigation. They codify design tokens and component conventions to align front-end behavior, ensuring interfaces remain accessible and visually cohesive.

How do I standardize Tailwind design tokens for responsive layouts?▼

Standardize Tailwind design tokens for responsive layouts by codifying color palettes and component patterns into shared conventions. Applying these centralized tokens ensures consistent visual behavior and accessible contrast ratios across your application.

Can I use these UI guidelines to audit existing front-end components?▼

Yes, you can use these UI guidelines to audit existing front-end components. Review your current implementations against the semantic HTML, Radix UI composition, and Tailwind pattern rules to identify and fix accessibility and consistency gaps.

What is the best way to ensure keyboard navigation works with Radix UI primitives?▼

The best way to ensure keyboard navigation works with Radix UI primitives is to follow safe composition patterns using semantic HTML and ARIA attributes. This maintains logical focus order and screen reader compatibility across interactive elements.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
mbdeatonmbdeaton

epic-ui-guidelines

Guide UI/UX best practices, accessibility, and component usage in Epic Stack.

Community
Intermediate
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced