skills.rest
Tigha66
Tigha66COMMUNITY
Explore all skills by this author →
GitHub

design-guide

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

Updated Mar 14, 2026
Search Tags:#react#design system#tailwind css#frontend development#ui components#paperclip ui
One-click install
npx skills add https://github.com/Tigha66/paperclip --skill design-guide-tigha66
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Tigha66/paperclip/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Tigha66/paperclip --skill design-guide-tigha66

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 established design principles across the frontend.

Core Features & Use Cases

  • Component Standards: Defines how to create and use reusable React components.
  • Design Tokens: Details color palettes, typography scales, and spacing.
  • Pattern Library: Illustrates common composition patterns and interactive elements.
  • Use Case: When developing a new feature, consult this guide to understand the correct way to implement buttons, forms, and layout structures, ensuring they match the existing application's look and feel.

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 maintain UI consistency when building React components for a frontend design system?▼

Maintain UI consistency by following a design system guide that defines reusable React component standards, design tokens for color and spacing, and composition patterns. This ensures new components match the established application look and feel.

What design tokens and typography scales should I use for Tailwind CSS UI components?▼

Use design tokens that detail specific color palettes, typography scales, and spacing values aligned with Tailwind CSS and shadcn/ui best practices. These tokens standardize visual properties across all frontend components.

How do I create a new button component using a React and TypeScript design system?▼

Create a new button component by consulting the design system guide for composition patterns and component standards. It provides the correct implementation approach using React and TypeScript to ensure visual consistency.

Can I use shadcn/ui conventions when composing interactive elements in a frontend application?▼

Yes, the design system references shadcn/ui best practices for composing interactive elements. It illustrates common composition patterns for interactive elements to ensure they adhere to established design conventions.

What is the best way to structure forms and layout structures in a Tailwind CSS design system?▼

The best way to structure forms and layouts is to follow the design system's pattern library, which illustrates common composition patterns. This ensures your layout structures match the existing application's look and feel.

Does the Paperclip UI design system work with React and TypeScript for frontend development?▼

Yes, the Paperclip UI design system provides a detailed guide covering component creation and composition patterns specifically referencing React, TypeScript, and Tailwind CSS for frontend development.

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
hakushunhakushun

vercel-composition-patterns

Implement scalable React component APIs using composition patterns.

Community
Basic
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
ATD04ATD04

design-guide

Guide frontend developers in building Paperclip UI components with design tokens and patterns.

Community
Intermediate