skills.rest
paperclipai
paperclipaiOFFICIAL
Explore all skills by this author →
Website𝕏@paperclipingGitHub

design-guide

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

Related Skills

Explore More Design & Creative Skills→
blencorpblencorp
101

shadcn

Guide React and TypeScript projects integrating shadcn/ui components with Tailwind CSS.

Official
Intermediate
felipeotarolafelipeotarola

design-guide

Guide frontend UI component creation with design tokens and composition patterns.

Community
Intermediate
Higashi-KotaHigashi-Kota

architecture-review

Audit design token architecture and generate a refactoring plan.

Community
Intermediate
Tigha66Tigha66

design-guide

Guide React, TypeScript, Tailwind CSS, and shadcn/ui component creation with design tokens.

Community
Intermediate