design-guide

Name: design-guide
Availability: InStock
Author: felipeotarola

Guide frontend UI component creation with design tokens and composition patterns.

Updated Mar 5, 2026

Search Tags:#ui #frontend #react #design system #components #tailwind

Ready to run

npx skills add https://github.com/felipeotarola/CEO --skill design-guide-felipeotarola

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/felipeotarola/CEO/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/felipeotarola/CEO --skill design-guide-felipeotarola

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to Paperclip's UI design system, ensuring consistency, reusability, and adherence to design principles across all frontend development.

Core Features & Use Cases

Component Creation Guidelines: Learn how to build new UI components following established patterns.
Design Token Usage: Understand and apply semantic tokens for colors, typography, and spacing.
Composition Patterns: Discover standard ways to combine components for common UI elements.
Use Case: When developing a new feature that requires a data table, consult this guide to understand the correct EntityRow and StatusBadge usage, ensuring it matches the existing UI's look and feel.

Quick Start

Use the design-guide skill to understand how to create a new button component.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I build consistent and reusable React UI components?▼

To build consistent React UI components, follow a design system guide covering design principles, composition patterns, and component hierarchy to ensure reusability and a cohesive user interface across your frontend application.

What are design tokens and how do they work for frontend styling?▼

Design tokens are semantic variables for colors, typography, and spacing. They work by standardizing styling decisions across UI components, ensuring visual consistency and easier maintenance when using tools like Tailwind.

How do I use composition patterns to combine UI components?▼

Composition patterns provide standard ways to combine UI components for common elements like data tables. You use established component hierarchies, such as combining EntityRow and StatusBadge, to match the existing interface look and feel.

Does this UI design guide work with Tailwind and React?▼

Yes, this UI design guide works with Tailwind and React. It provides a tech stack overview and component creation guidelines specifically designed to maintain a cohesive professional user interface within these frontend frameworks.

What's the best way to implement a status system in a design system?▼

The best way to implement a status system is to use semantic design tokens and standard composition patterns. This ensures status indicators like StatusBadge components remain visually consistent across all application features.

Why do I need a design system guide for frontend development?▼

You need a design system guide to solve the problem of inconsistent frontend UI. It provides comprehensive rules for design tokens, typography, and component hierarchy, ensuring reusability and adherence to established design principles.