skills.rest
louisfbuys
louisfbuysCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Provide design guidelines for Paperclip UI components, tokens, and layout.

Updated Apr 7, 2026
Search Tags:#React#design system#ui design#component creation#Paperclip
One-click install
npx skills add https://github.com/louisfbuys/paperclip --skill design-guide-louisfbuys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/louisfbuys/paperclip/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/louisfbuys/paperclip --skill design-guide-louisfbuys

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill unit provides a comprehensive guide for building consistent and reusable UI components in Paperclip, ensuring a uniform design language across the application.

Core Features & Use Cases

  • Component Creation: Detailed guidelines for creating new UI components.
  • Design Tokens: Reference for color, typography, and spacing.
  • Patterns: Best practices for common UI patterns.
  • Layout System: Overview of the three-zone layout system.
  • Quick Start: Navigate to /design-guide to explore all components and patterns.

Quick Start

Visit the Paperclip UI design guide at /design-guide to learn more about component creation, design tokens, and layout patterns.

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 Paperclip?▼

Build consistent UI components in Paperclip by following the provided design guidelines for component creation, design tokens, and layout patterns to ensure a uniform design language across your application.

What are design tokens and how do they work in Paperclip?▼

Design tokens in Paperclip are predefined reference values for color, typography, and spacing, providing a centralized system to maintain visual consistency across all UI components without hardcoding individual values.

Does the Paperclip design guide include a layout system for React applications?▼

The Paperclip design guide includes a three-zone layout system, providing structured guidelines for arranging UI components within React applications to maintain predictable visual hierarchy.

What is the best way to start using the Paperclip UI design system?▼

Start using the Paperclip UI design system by navigating to the /design-guide path, which allows you to explore all available components, design tokens, and layout patterns directly.

Are there best practices for common UI patterns in Paperclip?▼

The guide provides best practices for common UI patterns in Paperclip, helping developers build reusable components efficiently while adhering to established visual and structural design standards.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
fsollafsolla

frontend-ui-engineering

Construct accessible React user interfaces with design system tokens.

Community
Advanced
WeAreBiniWeAreBini
14

design-guide

Guide frontend developers in building consistent UI components for Paperclip.

Official
Intermediate
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced