design-guide

Document Paperclip UI components, design principles, and tokens for React projects.

Updated Mar 29, 2026

Search Tags:#react #tailwind css #ui design #paperclip #component guide

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive guide for creating consistent, reusable UI components using Paperclip's design system. It helps developers streamline their frontend development by adhering to a standardized approach.

Core Features & Use Cases

UI Component Guide: Offers detailed documentation on various UI components, their usage, and best practices.
Design Principles: Outlines the principles behind Paperclip's UI design, ensuring a coherent and intuitive user experience.
Tech Stack: Lists the technologies and frameworks used in Paperclip's UI development for easy integration.
Design Tokens: Defines color, typography, and spacing guidelines to maintain consistency across components.
Component Index: Provides a complete inventory of all UI components and their usage guidelines.

Quick Start

Use the design-guide skill to reference the UI component guide for your frontend development project.

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 with Tailwind CSS?▼

Using a design system guide for React UI components provides standardized design tokens, principles, and a component inventory to ensure usability and consistency across your application.

What are design tokens and how do they standardize UI component styling?▼

Design tokens standardize UI component styling by defining color, typography, and spacing variables, ensuring visual consistency across your React application without hardcoding values.

Do I need TypeScript knowledge to use a React UI component design system?▼

Yes, TypeScript knowledge is required to use this React UI component design system, as it requires familiarity with React, TypeScript, Tailwind CSS, and UI design principles for proper integration.

Can I use these UI design principles for frontend projects not using Tailwind CSS?▼

These UI design principles are tailored for frontend projects using React and Tailwind CSS. Applying them to non-Tailwind CSS projects requires significant adaptation of the design tokens and styling conventions.

What's the best way to maintain spacing and typography consistency across React components?▼

The best way to maintain spacing and typography consistency across React components is by applying predefined design tokens from a design system guide, which standardizes these values across your application.