skills.rest
nabitllc
nabitllcOFFICIAL
Explore all skills by this author →
GitHub

design-guide

Guides creation of consistent React UI components using Todero design tokens and patterns.

Updated Mar 26, 2026
Search Tags:#frontend#react#design system#design tokens#shadcn/ui#tailwind css#ui components
One-click install
npx skills add https://github.com/nabitllc/todero --skill design-guide-nabitllc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/nabitllc/todero/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/nabitllc/todero --skill design-guide-nabitllc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend work on the Todero app often produces inconsistent styling, ad-hoc typography, and hardcoded colors that break the design system. This Skill enforces the established design language so every new component, page, or feature matches the existing UI. ## Core Features & Use Cases - Design Token Enforcement: Defines semantic CSS variable tokens (OKLCH colors, radius, shadows) and forbids raw hex values, ensuring dark/light theme compatibility. - Component & Pattern Catalog: Documents the three-tier component hierarchy (shadcn/ui primitives, custom composites like StatusBadge and EntityRow, page components) plus composition patterns such as entity rows, grouped lists, metric card grids, and log viewers. - Status & Priority Systems: Standardizes status colors, priority icons, and agent status dots across all entity types. - Use Case: When adding a new issues list page, use this Skill to compose EntityRow with StatusIcon and PriorityIcon, apply the correct typography scale, and register the new component in the /design-guide showcase page. ## Quick Start Use the design-guide skill to create a new reusable UI component for the Todero frontend following the design system conventions.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I create a new UI component for the Todero frontend?▼

Create a PascalCase file in ui/src/components/, use cn() for class merging and CVA for variants, and build from shadcn/ui primitives via composition. Then add the component to the /design-guide page and the component index reference.

What styling approach does the Todero design system use?▼

It uses Tailwind CSS v4 with CSS variables in OKLCH color space, shadcn/ui (new-york style), and Radix UI primitives. All colors must reference semantic tokens like --background or --muted-foreground, never raw hex values.

When should I create a reusable component versus using Tailwind directly?▼

Create a component when a visual pattern appears in two or more places, has interactive behavior, or encodes domain logic like status colors. Use plain Tailwind classes for one-off layouts and simple class combinations.

Does the design system support both dark and light themes?▼

Yes, both themes are defined via CSS variables in ui/src/index.css using OKLCH. Dark theme is the default. Always use semantic tokens so components adapt automatically without hardcoded color values.

Why should I avoid hardcoding status colors in components?▼

Hardcoded status colors drift from the canonical mappings and break consistency across entity types. Use StatusBadge, StatusIcon, and PriorityIcon, which centralize the color and icon mappings for all 20-plus statuses.

Related Skills

Explore More Design & Creative Skills→
MaxMiksaMaxMiksa
2.3k

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui for React and Vite projects.

Community
Advanced
BruceTyndallBruceTyndall

figma-parity-checker

Validate Figma design modules against React code implementations and data wiring.

Community
Intermediate
fabriqaaifabriqaai
201

frontend-design

Build accessible, responsive frontend interfaces with cohesive design systems.

Official
Basic
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced