design-guide

Document Paperclip design system guidelines for tokens, typography, and UI components.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/travelinman1013/royclip --skill design-guide-travelinman1013
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/travelinman1013/royclip/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/travelinman1013/royclip --skill design-guide-travelinman1013

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardize UI design consistency across Paperclip by documenting the design system guidelines.

Core Features & Use Cases

  • Centralized design tokens, typography rules, and color systems to ensure reuse across components.
  • Guidance for creating new UI components, modifying existing ones, and designing pages within the frontend.
  • Use case: unify design language across projects and reduce rework through a living design-guide.

Quick Start

Review the design guide to implement a new component following established 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 standardize UI design consistency across frontend pages?

To standardize UI design consistency, apply a centralized design system that documents design tokens, typography rules, and color systems to ensure reuse across components and features. This reduces rework by providing a living design guide.

What are design tokens and how do they unify a design language?

Design tokens are centralized variables for color, typography, and status systems that unify design language across projects. They ensure reuse across components and reduce frontend rework by maintaining a single source of truth.

How do I create new UI components following established typography and patterns?

To create new UI components, review the design guide to implement them using established tokens, typography rules, and composition patterns. This ensures coherence across frontend pages and meets design system requirements.

What is the best way to document frontend design guidelines for new projects?

The best way to document frontend design guidelines is by maintaining a living design guide that defines typography rules, color systems, and composition patterns. This unifies the design language and provides guidance for modifying existing components.

Does this design system guidance cover status and priority systems?

Yes, the design system guidance covers status and priority systems alongside tokens, typography, and composition patterns. It ensures coherence across frontend pages and features by documenting these requirements comprehensively.

Can I use this design guide to refine existing frontend tokens and typography?

Yes, you can use the design guide to refine existing tokens and typography. It provides guidance for modifying existing components and designing pages within the frontend to ensure consistency across projects.