skills.rest
ulle73
ulle73COMMUNITY
Explore all skills by this author →
GitHub

design-guide

Guide UI component design and implementation for Paperclip with React, TypeScript, and Tailwind CSS.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for a cohesive UI design system, ensuring consistency and reusability across Paperclip's frontend components.

Core Features & Use Cases

  • Component Creation: Guide for creating new UI components, adhering to Paperclip's design standards.
  • Design Tokens: Comprehensive documentation on color schemes, typography, and other design tokens.
  • Use Case: When building or modifying UI components in Paperclip, follow this guide to ensure consistency and adhere to the established design language.

Quick Start

Use the design-guide skill to build a new UI component following the Paperclip design system.

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 React using a design system?▼

Use a design system guide to apply standardized design tokens, UI component patterns, and best practices ensuring visual consistency and reusability across your React frontend application.

What are design tokens and how do they standardize Tailwind CSS UI components?▼

Design tokens are predefined values for color schemes and typography that standardize Tailwind CSS UI components by ensuring consistent styling and a cohesive frontend design language.

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

Yes, you need knowledge of React, TypeScript, and Tailwind CSS to build a UI component, as this guide focuses on implementation patterns and design principles within this specific frontend stack.

What is the best way to maintain visual consistency when modifying frontend components?▼

The best way to maintain visual consistency is to follow an established design language guide, ensuring any modified or new UI components adhere to predefined standards and comprehensive documentation.

When should I follow a design guide for building new UI components?▼

You should follow a design guide when building or modifying UI components to ensure consistency, adhering to an established design language and reusing standard component patterns across the 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
Bbeierle12Bbeierle12
8

component-library

Generate production-ready React components for a shadcn/ui component library.

Community
Advanced
HeatMarieHeatMarie

design-guide

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

Community
Intermediate
hashintelhashintel
1.6k

ark-ui

Provide headless React primitives for accessible, customizable UI components.

Official
Intermediate