ui-design

Apply Tailwind-based design guidelines for typography, color, spacing, and components.

Updated Jan 30, 2026

Search Tags:#design #ui #accessibility #tailwind #ux #design-tokens #component-library

Ready to run

npx skills add https://github.com/poko8nada/honox-sample --skill ui-design-poko8nada

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/poko8nada/honox-sample/tree/main/.github/skills/ui-design
Command: npx skills add https://github.com/poko8nada/honox-sample --skill ui-design-poko8nada

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI/UX design guidelines provide a cohesive framework for building accessible, visually consistent interfaces using Tailwind-based tooling and design tokens, reducing design debt and fragmentation.

Core Features & Use Cases

Tailwind-based design guidelines for colors, typography, spacing, and components
Accessibility-first principles aligned with WCAG 2.1 AA
Design-token strategy and usage across projects to ensure consistency
Use cases include starting new dashboards or pages with a unified visual language

Quick Start

Consult these guidelines at the start of a new UI component to ensure typography, spacing, and token usage stay consistent.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I build accessible UI components using Tailwind and design tokens?▼

Build accessible UI components using Tailwind by applying centralized guidelines for typography, color, and spacing alongside WCAG 2.1 AA compliance. This approach uses design tokens to ensure visual consistency and reduce design debt across web apps and dashboards.

What is the best way to manage design tokens for a Tailwind component library?▼

Manage design tokens for a Tailwind component library by centralizing definitions for typography, color, and spacing. This strategy ensures consistency across projects and reduces fragmentation by applying a unified visual language to interface design and component styling.

Can I use these UI design guidelines with shadcn/ui?▼

Yes, you can use these UI design guidelines with shadcn/ui. The framework provides integration support for component libraries like shadcn/ui, applying Tailwind-based styling and accessibility-first principles to ensure cohesive interface design across your project.

How do I ensure WCAG 2.1 AA accessibility compliance when styling web dashboards?▼

Ensure WCAG 2.1 AA accessibility compliance when styling web dashboards by applying accessibility-first design principles. These Tailwind-based guidelines govern token usage, responsive behavior, and component styling to maintain compliant and accessible interface design.

When should I consult UI design guidelines for a new web page?▼

Consult UI design guidelines at the start of a new UI component or web page to ensure typography, spacing, and token usage remain consistent. Applying these centralized Tailwind guidelines early prevents design debt and maintains a unified visual language.