design-guide

Name: design-guide
Availability: InStock
Author: louisfbuys

Provide design guidelines for Paperclip UI components, tokens, and layout.

Updated Apr 7, 2026

Search Tags:#React #design system #ui design #component creation #Paperclip

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill unit provides a comprehensive guide for building consistent and reusable UI components in Paperclip, ensuring a uniform design language across the application.

Core Features & Use Cases

Component Creation: Detailed guidelines for creating new UI components.
Design Tokens: Reference for color, typography, and spacing.
Patterns: Best practices for common UI patterns.
Layout System: Overview of the three-zone layout system.
Quick Start: Navigate to /design-guide to explore all components and patterns.

Quick Start

Visit the Paperclip UI design guide at /design-guide to learn more about component creation, design tokens, and layout patterns.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I create consistent UI components in Paperclip?▼

Build consistent UI components in Paperclip by following the provided design guidelines for component creation, design tokens, and layout patterns to ensure a uniform design language across your application.

What are design tokens and how do they work in Paperclip?▼

Design tokens in Paperclip are predefined reference values for color, typography, and spacing, providing a centralized system to maintain visual consistency across all UI components without hardcoding individual values.

Does the Paperclip design guide include a layout system for React applications?▼

The Paperclip design guide includes a three-zone layout system, providing structured guidelines for arranging UI components within React applications to maintain predictable visual hierarchy.

What is the best way to start using the Paperclip UI design system?▼

Start using the Paperclip UI design system by navigating to the /design-guide path, which allows you to explore all available components, design tokens, and layout patterns directly.

Are there best practices for common UI patterns in Paperclip?▼

The guide provides best practices for common UI patterns in Paperclip, helping developers build reusable components efficiently while adhering to established visual and structural design standards.