epic-ui-guidelines

Provide standardized Epic Stack UI guidelines for semantic HTML, ARIA, Tailwind, and Radix UI.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/M-Kolacz/michalkolacz.com --skill epic-ui-guidelines-m-kolacz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: epic-ui-guidelines
Source: https://github.com/M-Kolacz/michalkolacz.com/tree/main/docs/skills/epic-ui-guidelines
Command: npx skills add https://github.com/M-Kolacz/michalkolacz.com --skill epic-ui-guidelines-m-kolacz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Epic UI guidelines address UI inconsistency and accessibility gaps across components and teams by providing a standardized design and coding approach for the Epic Stack.

Core Features & Use Cases

  • Accessible UI patterns: guidance on semantic HTML, proper ARIA attributes, keyboard navigation, and WCAG-aligned color contrast.
  • Tailwind & Radix UI guidance: recommended usage patterns to ensure consistent styling and accessible components.
  • Pattern library alignment: typography, spacing, components, dark mode, and responsive design across projects.

Quick Start

Review the Epic UI Guidelines and apply the recommended patterns to the next UI component, ensuring semantic structure, accessible labels, and Radix-based interactions.

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 Tailwind and Radix UI?

To build accessible UI components with Tailwind and Radix UI, apply standardized Epic Stack guidelines that enforce semantic HTML, proper ARIA attributes, and keyboard navigation. This approach ensures consistent styling and WCAG-aligned interactions across your projects.

What are the Epic Stack guidelines for dark mode and responsive design?

Epic Stack guidelines for dark mode and responsive design dictate using consistent typography and spacing patterns alongside Tailwind utilities. These practices ensure components maintain WCAG-aligned color contrast and structural accessibility across different screen sizes and themes.

Why does my UI have accessibility gaps and inconsistent component patterns?

UI accessibility gaps and inconsistent component patterns typically occur when teams lack a standardized design approach. Implementing Epic UI guidelines resolves this by enforcing semantic HTML, ARIA attributes, and Radix UI usage to align pattern libraries across projects.

Does the Epic Stack UI guidance support WCAG color contrast requirements?

Yes, Epic Stack UI guidance supports WCAG color contrast requirements by providing accessible UI patterns. It enforces proper semantic HTML, ARIA attributes, and dark mode accessibility considerations to ensure your components meet standardized contrast and accessibility practices.

When do I need semantic HTML and ARIA attributes for UI component development?

You need semantic HTML and ARIA attributes for UI component development whenever you build interactive elements requiring keyboard navigation and screen reader support. Applying Epic Stack guidelines ensures these accessibility practices are consistently integrated with Radix UI and Tailwind styling.

Can I use Radix UI components without Tailwind in an Epic Stack project?

Epic Stack UI guidelines recommend using Radix UI components together with Tailwind to ensure consistent styling and accessible interactions. While Radix handles the behavioral logic, Tailwind provides the standardized design tokens needed to align typography and spacing patterns.