skills.rest
az9713
az9713COMMUNITY
Explore all skills by this author →
GitHub

design-guide

Guide React UI component design with design tokens and layout structure.

2|Updated Apr 5, 2026
Search Tags:#React#layout#design system#Tailwind CSS#ui design#consistent components
One-click install
npx skills add https://github.com/az9713/paperclip-gstack-company --skill design-guide-az9713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/az9713/paperclip-gstack-company/tree/main/paperclip/.claude/skills/design-guide
Command: npx skills add https://github.com/az9713/paperclip-gstack-company --skill design-guide-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, tailwindcss, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to build consistent, reusable UI components, ensuring high-quality frontend development standards.

Core Features & Use Cases

  • Design Principles: Adheres to best practices for density, keyboard-first interaction, and dark themes.
  • Tech Stack: Integrates with React, TypeScript, Vite, Tailwind CSS, and other relevant technologies.
  • Design Tokens: Utilizes OKLCH color space and CSS variables for consistent theming.
  • Typography Scale: Standardizes typography usage for readability and accessibility.
  • Component Hierarchy: Provides a clear structure for component development and reuse.
  • Composition Patterns: Illustrates how components interact and work together within the application.
  • Interactive Patterns: Defines hover states, focus, disabled states, and inline editing.
  • Layout System: Implements a three-zone layout with sidebar, breadcrumb bar, and main content.
  • Design Guide Page: Offers a living showcase of all components and patterns.
  • Component Index: Lists all available UI components with usage guidance.
  • File Conventions: Standardizes code organization and naming conventions.
  • Common Mistakes: Highlights common pitfalls to avoid in UI development.

Quick Start

To understand the design system, refer to the design-guide page in the Paperclip UI project.

Frequently Asked Questions about design-guide

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

FAQPage Schema
What is the best way to build consistent UI components in React and Tailwind CSS?▼

Building consistent UI components requires a design system with standardized typography, OKLCH color tokens, and clear component hierarchy. This guide provides a living showcase of these patterns to ensure high-quality frontend development standards.

Do I need TypeScript to use this React design system and its component hierarchy?▼

Yes, TypeScript is required to use this React design system. The guide requires knowledge of React, TypeScript, and Tailwind CSS to implement its standardized component hierarchy, interactive patterns, and file conventions effectively.

How do I implement design tokens for consistent theming in a React application?▼

To implement design tokens for consistent theming, utilize the OKLCH color space and CSS variables. This approach standardizes your design system color palette, ensuring reliable and accessible visual consistency across all UI components.

How does the three-zone layout system work for React applications?▼

The three-zone layout system organizes your application interface using a sidebar, breadcrumb bar, and main content area. This layout structure provides a clear, standardized navigation and content presentation pattern for your UI.

What are common mistakes to avoid when developing UI components?▼

Common mistakes in UI component development include neglecting keyboard-first interaction density, inconsistent hover and focus states, and ignoring dark theme best practices. This guide highlights these pitfalls to help you maintain strict development standards.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

uupm-ui-styling

Integrate shadcn/ui components with Tailwind CSS for React-based UI styling.

Community
Intermediate
jokken79jokken79
1

frontend-design

Design frontend interfaces with typography, color, layout, motion, and accessibility.

Community
Advanced
mustafazeydanimustafazeydani

tailwind-v4-shadcn

Configure React apps with Tailwind CSS v4, shadcn/ui, and Vite.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate