design-guide

Name: design-guide
Availability: InStock
Author: Paperclip

Guide frontend UI component creation within the Paperclip ecosystem.

76.0k|14.2k|Updated Mar 2, 2026

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

Ready to run

npx skills add https://github.com/paperclipai/paperclip --skill design-guide-paperclipai

💬 Prompt for ChatGPT / Claude Chat▼

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

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 Tokens & Typography: Understand and utilize the defined color palettes, spacing, and typographic scales.
Composition Patterns: Discover standard ways to combine components for common UI structures.
Use Case: When developing a new feature that requires a data table with status indicators and actions, consult this guide to ensure the implementation aligns with existing UI patterns and uses the correct components.

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 UI components in React?▼

To build consistent UI components in React, follow a structured design guide covering design principles, tech stack choices, and composition patterns. This ensures reusability and adherence to established frontend development standards.

What are design tokens and how do they standardize frontend development?▼

Design tokens are predefined variables for color palettes, spacing, and typographic scales that standardize frontend development. They ensure visual consistency across reusable UI components by centralizing styling decisions.

How do I structure a React component library using Tailwind CSS?▼

Structure a React component library using Tailwind CSS by following established file conventions, component hierarchy rules, and composition patterns. This approach maintains a cohesive user interface while enabling flexible component creation.

When do I need a design system for my frontend development?▼

You need a design system for frontend development when maintaining a cohesive and professional user interface across multiple features. It is essential for ensuring consistency, reusability, and adherence to design principles like status indicators and layout structures.

Can I use existing UI patterns for data tables with status indicators?▼

Yes, you can use existing UI patterns for data tables with status indicators by consulting a component creation guide. This ensures your implementation aligns with the established design system and uses the correct interactive elements and layout components.