skills.rest
mjraraujo
mjraraujoCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Organize and standardize Paperclip UI design language for consistent frontend implementation.

Updated Aug 27, 2026
Search Tags:#typography#frontend#design-system#component-patterns#design-guide#ui-tokens#paperclip
One-click install
npx skills add https://github.com/mjraraujo/paperclip-proxy --skill design-guide-mjraraujo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/mjraraujo/paperclip-proxy/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/mjraraujo/paperclip-proxy --skill design-guide-mjraraujo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip's design guide centralizes the UI design language, tokens, and patterns to ensure consistent, high-quality frontend implementations across teams.

Core Features & Use Cases

  • Provides design tokens, typography rules, status/priority systems, and composition patterns.
  • Documents guidelines for creating, modifying, and styling UI components, pages, and features.
  • Serves as the living showcase page for the design system.

Quick Start

Review tokens and typography sections before implementing a new or updated UI component.

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 tokens and typography for consistent frontend implementation?▼

A UI design guide organizes components, tokens, typography, and patterns into a centralized reference. It enforces frontmatter presence and descriptive sections for problem, features, and quick start to maintain consistency.

When should I create or modify UI component patterns in a design system?▼

You create or modify UI component patterns when styling new pages or features. The design guide dictates guidelines for creating, modifying, and styling components to ensure high-quality frontend implementations.

What is the best way to document UI tokens and composition patterns for frontend teams?▼

The best way to document UI tokens and composition patterns is a centralized living showcase page. It enforces descriptive guide bodies and frontmatter to provide clear rules for frontend teams.

Do I need frontmatter and specific documentation sections for a design system guide?▼

Yes, you need frontmatter and specific sections for a design system guide. It enforces frontmatter presence and a descriptive guide body featuring sections for problem, features, and quick start.

How do I structure a living showcase page for a UI design language?▼

You structure a living showcase page by enforcing frontmatter and a descriptive guide body with sections for problem, features, and quick start. It serves as the central showcase for the UI design language.

Related Skills

Explore More Design & Creative Skills→
chifambachifamba

design-guide

Define centralized UI design tokens, typography, and component patterns.

Community
Intermediate
elijahbowieelijahbowie

design-guide

Codify frontend UI design standards for tokens, typography, and components.

Community
Advanced
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
vobasevobase
59

extract

Extract reusable UI components, design tokens, and patterns from frontend codebases.

Official
Intermediate