skills.rest
Raphte-byte
Raphte-byteCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Codifies Paperclip UI design system rules for frontend consistency.

Updated Aug 23, 2026
Search Tags:#typography#design#ui#frontend#components#tokens#design-system
One-click install
npx skills add https://github.com/Raphte-byte/Paperclip-x-Byan --skill design-guide-raphte-byte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Raphte-byte/Paperclip-x-Byan/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Raphte-byte/Paperclip-x-Byan --skill design-guide-raphte-byte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip UI design guide standardizes the visual language, tokens, and patterns to reduce divergence and speed frontend development.

Core Features & Use Cases

  • Defines design principles, tokens, typography scale, and status/priority systems.
  • Documents component hierarchy, composition patterns, and the /design-guide showcase page.
  • Provides conventions for file structure, components, and UI guidelines to ensure consistency across new UI work.

Quick Start

Study the design-guide to implement new UI components using tokens, typography, and patterns.

Frequently Asked Questions about design-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I maintain frontend UI consistency across multiple components?▼

Maintain frontend UI consistency by codifying a single design system that manages typography, design tokens, and composition patterns to guide component creation and modification across your codebase.

What are design tokens and how do they standardize frontend development?▼

Design tokens are standardized variables that store visual style decisions like typography and status systems, reducing UI divergence and speeding up frontend development by applying unified rules across components.

How do I implement new UI components using a design system?▼

Implement new UI components by studying the design-guide showcase to apply predefined conventions for file structure, design tokens, and composition patterns, ensuring consistent UI guidelines across your frontend codebase.

Does the design-guide work with my existing frontend component hierarchy?▼

Yes, the design-guide documents component hierarchy and composition patterns, providing conventions that integrate with your existing frontend file structure to ensure visual language consistency during modification.

What is the best way to document UI status and priority systems in frontend code?▼

Document UI status and priority systems by codifying them into a design system that defines visual language rules, ensuring consistent application across component documentation and the showcase page.

Why does my frontend UI diverge without a standardized design system?▼

Frontend UI diverges without a standardized design system because component creation lacks unified tokens, typography scales, and composition patterns, leading to inconsistent visual language and slower development.

Related Skills

Explore More Design & Creative Skills→
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
buvisbuvis
2

design-system

Extract design tokens and map components across a codebase.

Official
Advanced
bychrisrbychrisr

design-guide

Standardize frontend components with Tailwind CSS tokens and Radix UI primitives.

Community
Intermediate
Hey-ViswaHey-Viswa

mongodb-design-skill

Apply MongoDB design-system guidelines to React/Next.js UI patterns.

Community
Advanced