skills.rest
bychrisr
bychrisrCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Standardize frontend components with Tailwind CSS tokens and Radix UI primitives.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of UI inconsistency and design debt by providing a centralized, authoritative source of truth for Paperclip's design language, component library, and interaction patterns.

Core Features & Use Cases

  • Component Inventory: Provides a complete reference for shadcn/ui primitives and custom Paperclip composites like StatusBadge and EntityRow.
  • Design System Enforcement: Defines strict rules for typography, color tokens, spacing, and layout to ensure a cohesive dark-themed, keyboard-first interface.
  • Use Case: When building a new dashboard feature, use this skill to ensure your layout, status indicators, and interactive elements align perfectly with the existing Paperclip design system.

Quick Start

Use the design-guide skill to verify the correct component composition and status color tokens for a new issue tracking table.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I maintain consistent UI design standards in a React and Tailwind CSS dashboard?▼

Maintain consistent UI design standards in a React and Tailwind CSS dashboard by applying standardized Tailwind tokens, Radix UI primitives, and established typography scales to ensure cohesive component implementation across all views.

What is the best way to enforce design system tokens and color mappings in frontend components?▼

Enforce design system tokens and color mappings in frontend components by referencing a centralized source of truth that defines strict rules for typography, status color mappings, and spacing for professional-grade control planes.

How do I build a new dashboard feature using shadcn/ui components and custom composites?▼

Build a new dashboard feature using shadcn/ui components and custom composites by verifying correct component composition against established layout conventions, ensuring your interactive elements align perfectly with the existing dark-themed, keyboard-first interface.

Does this design guide support custom composite patterns like StatusBadge and EntityRow?▼

Yes, this design guide supports custom composite patterns like StatusBadge and EntityRow, providing a complete component inventory for both shadcn/ui primitives and custom Paperclip composites to facilitate consistent application across dashboard views.

How do I resolve UI inconsistency and design debt when building new frontend interfaces?▼

Resolve UI inconsistency and design debt by applying a centralized, authoritative source of truth for your design language, component library, and interaction patterns to standardize frontend component implementation and ensure compliance.

When should I use standardized design system rules over custom styling for control plane views?▼

Use standardized design system rules over custom styling for control plane views when you need to ensure professional-grade compliance with established layout conventions, typography scales, and status color mappings across all dashboard views.

Related Skills

Explore More Design & Creative Skills→
wredziowredzio

using-tailwind-design-tokens

Enforce Tailwind design tokens from globals.css in TSX/CSS files.

Community
Basic
syncfusionsyncfusion

syncfusion-aspnetcore-lineargauge

Build Syncfusion Linear Gauge interfaces for ASP.NET Core applications.

Official
Advanced
notdpnotdp
8

shadcn-ui

Build accessible React UI components with shadcn/ui patterns.

Community
Advanced
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced