skills.rest
DragonCore-OS
DragonCore-OSCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Provides a design system guide for Paperclip UI components.

Updated Mar 26, 2026
Search Tags:#React#design system#UI design#UI components#Paperclip
One-click install
npx skills add https://github.com/DragonCore-OS/paperclip --skill design-guide-dragoncore-os
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/DragonCore-OS/paperclip/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/DragonCore-OS/paperclip --skill design-guide-dragoncore-os

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, scalable design system across your Paperclip frontend components, making UI development efficient and consistent.

Core Features & Use Cases

  • Design System Guide: Comprehensive documentation for building and styling UI components.
  • Component Creation: Step-by-step instructions for creating reusable UI components.
  • Design Tokens: Reference for using colors, typography, and spacing consistently.
  • Use Case: For UI designers and developers building new components or updating existing ones within the Paperclip ecosystem.

Quick Start

Review the Paperclip design guide for guidance on component creation, design tokens, typography, and status systems.

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

To build consistent React UI components, use the Paperclip design system guide, which provides step-by-step instructions for component creation, design tokens, typography, and status systems to ensure scalable and cohesive UI development.

Can I use this design system guide for existing Paperclip UI components?▼

Yes, the design system guide can be used for both creating new and updating existing Paperclip UI components. It offers comprehensive documentation on styling, design tokens, typography, and priority systems for consistent maintenance.

What's the best way to manage typography and status systems in Paperclip?▼

The best way to manage typography and status systems is by referencing the Paperclip design guide, which defines specific rules and tokens for text styling and component priority states to maintain visual consistency across the ecosystem.

What limitations exist when scaling a UI design system for React?▼

A key limitation when scaling a UI design system is maintaining token consistency across components. The Paperclip guide addresses this by enforcing strict references for typography, spacing, and status systems, though adherence requires manual alignment within your React codebase.

Related Skills

Explore More Design & Creative Skills→
DinudaDinuda

design-guide

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

Community
Intermediate
gil00pitagil00pita

styled-components

Style React components with CSS-in-JS using styled-components.

Community
Advanced
IncomeStreamSurferIncomeStreamSurfer
71

design-guide

Guide Paperclip UI component creation with design tokens, typography, and status systems.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate