skills.rest
HeatMarie
HeatMarieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/HeatMarie/paperclip --skill design-guide-heatmarie
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
jwilgerjwilger

atomic-design

Organize UI components into atoms, molecules, organisms, and templates.

Community
Basic
aesthezelaesthezel
8

tailwind-css-patterns

Generate responsive UI styles using Tailwind CSS utility classes.

Community
Intermediate
inbharataiinbharatai
22

design-system

Generate component tokens, Storybook stories, Figma variables, and living style guides.

Community
Intermediate