skills.rest
madlado87
madlado87COMMUNITY
Explore all skills by this author →
GitHub

ui-design

Apply design tokens and shadcn/ui primitives to enforce consistent, accessible UI patterns.

Updated Aug 27, 2026
Search Tags:#typography#design#ui#accessibility#tailwind#shadcn#color-tokens
One-click install
npx skills add https://github.com/madlado87/agentes --skill ui-design-madlado87
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/madlado87/agentes/tree/main/.github/skills/ui-design
Command: npx skills add https://github.com/madlado87/agentes --skill ui-design-madlado87

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle to maintain a cohesive UI language across components, leading to inconsistent interfaces and longer UI iteration cycles.

Core Features & Use Cases

  • Visual hierarchy rules: guidance on size, weight, color contrast to create scannable interfaces.
  • Theming with OKLCH tokens: consistent light/dark modes using semantic tokens rather than hard-coded colors.
  • Shadcn/ui primitives adoption: prefer library components over raw HTML for accessibility and design consistency.
  • Use Case: apply guidelines when starting a new feature to deliver polished screens with minimal back-and-forth.

Quick Start

Describe a UI component or screen you want designed and the assistant will apply hierarchy, spacing, typography, color tokens, and shadcn/ui primitives to produce a polished interface.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I maintain consistent UI design tokens across shadcn/ui components?▼

Apply semantic token naming and OKLCH color theming rules to enforce consistent UI design tokens across shadcn/ui components, ensuring theme compatibility and accessible contrast in light and dark modes.

What is the best way to structure visual hierarchy and spacing in a dashboard layout?▼

Apply rules for size, weight, color contrast, and spacing to structure visual hierarchy in dashboard layouts, creating scannable interfaces using shadcn/ui primitives and semantic design tokens.

How do I use OKLCH color tokens for light and dark mode theming?▼

Replace hard-coded colors with semantic OKLCH color tokens for light and dark mode theming, ensuring consistent visual states and accessibility across responsive components and layouts.

Can I apply these UI design rules to existing forms and tables?▼

Yes, you can apply these UI design rules to existing forms and tables by enforcing consistent spacing, typography, and shadcn/ui primitives to polish the interface and improve accessibility.

Do I need raw HTML elements or shadcn/ui primitives for accessible UI patterns?▼

You need shadcn/ui primitives rather than raw HTML elements for accessible UI patterns, as the library components enforce design consistency and accessibility standards across your application.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

algorithmic-color-palette

Generate CSS-ready color tokens and palettes from brand colors using HSL adjustments.

Official
Intermediate
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
djscruggsdjscruggs

shadcn

Apply shadcn/ui patterns with Radix primitives and Tailwind CSS in React or Next.js projects.

Community
Intermediate
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced