design-guide

Provides design guidance for creating reusable components in the Draxarvasse ecosystem.

Updated Mar 9, 2026

Search Tags:#react #design system #component library #tailwind css #frontend development #ui design

Ready to run

npx skills add https://github.com/plwsdytcj/opc --skill design-guide-plwsdytcj

💬 Prompt for ChatGPT / Claude Chat▼

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

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 established design principles across the frontend.

Core Features & Use Cases

Component Creation Guidelines: Learn how to build new, reusable UI components.
Design Token Usage: Understand and apply semantic color, typography, and radius tokens.
Pattern Implementation: Follow established composition patterns for common UI structures.
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 design language.

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 React UI components using a design system?▼

To build consistent React UI components, follow a structured design system guide covering design principles, tech stack conventions, and component hierarchy. This ensures new components adhere to established patterns, maintaining a cohesive and professional user interface across your frontend application.

What are design tokens and how do I use them for frontend UI development?▼

Design tokens are semantic variables for colors, typography, and border radii used in frontend UI development. You apply them to ensure visual consistency across components, allowing centralized updates to the design language without modifying individual component styles manually.

How do I implement composition patterns for reusable component libraries?▼

Implement composition patterns by structuring reusable component libraries around established file conventions and hierarchical structures. This involves combining smaller, purpose-built elements like EntityRow and StatusBadge into complex interfaces, ensuring predictable behavior and visual alignment.

Can I use Tailwind CSS to apply semantic typography and status system tokens?▼

Yes, you can use Tailwind CSS to apply semantic typography and status system tokens. By mapping design tokens to utility classes, you maintain a strict visual hierarchy and ensure that status indicators render consistently across all UI components.

What is the best way to structure a React component library for a cohesive user interface?▼

The best way to structure a React component library for a cohesive user interface is to enforce strict file conventions, utilize a clear component hierarchy, and standardize composition patterns. This approach guarantees reusability and simplifies maintenance across the application.

When should I consult a design guide for creating new frontend components?▼

You should consult a design guide before creating any new frontend UI components or features. It provides the necessary design principles, token usage rules, and composition patterns to ensure new additions match the existing design language perfectly.