skills.rest
Mothership-Foundry
Mothership-FoundryOFFICIAL
Explore all skills by this author →
GitHub

design-guide

Standardize Paperclip UI design tokens, typography, and layout across frontend components.

Updated Aug 23, 2026
Search Tags:#typography#design#accessibility#design-tokens#ui-patterns#component-library#design-guide
One-click install
npx skills add https://github.com/Mothership-Foundry/foundry-dashboard --skill design-guide-mothership-foundry
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Mothership-Foundry/foundry-dashboard/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Mothership-Foundry/foundry-dashboard --skill design-guide-mothership-foundry

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip UI design guidelines help teams maintain a cohesive and scalable design language across the frontend, preventing visual drift and rework.

Core Features & Use Cases

  • Design principles and governance for component creation
  • Design tokens, typography, and color systems to ensure consistency
  • Patterns and composition guidance for building reusable UI blocks
  • A living design-guide showcase page that demonstrates usage and variants
  • Alignment with frontend-design and web-design-guidelines for quality and accessibility

Quick Start

Review the Design Guide and apply tokens, typography, and patterns when creating or updating UI components.

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 across frontend components?▼

You standardize UI design tokens and typography by applying a centralized design guide that enforces consistent color systems, typography scales, and layout patterns to prevent visual drift across all frontend components.

What is a living design guide showcase and how does it work?▼

A living design guide showcase is a page that demonstrates component usage and variants. It functions as an active reference that must be updated whenever new UI patterns or components are added to the system.

How do I enforce accessibility and design principles when creating new UI components?▼

You enforce accessibility and design principles by aligning component creation with governance rules and web design guidelines, validating typography and tokens for consistency and quality during the build process.

Can I use this design guide to update existing frontend components without breaking layout consistency?▼

Yes, you can update existing frontend components by validating them against established design tokens and UI patterns, ensuring layout consistency and preventing visual drift across pages during rework.

What's the best way to maintain a cohesive design language across a scaling frontend application?▼

The best way to maintain a cohesive design language is to standardize component creation using design tokens, typography systems, and composition guidance, preventing rework and visual drift as the application scales.

Why does my frontend UI experience visual drift between different pages?▼

Frontend UI experiences visual drift when teams lack a centralized design language. Establishing a design guide with standardized tokens, typography, and UI patterns resolves this inconsistency across pages.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
Avishai-TsabariAvishai-Tsabari

design-guide

Centralize Paperclip UI design tokens, typography, and component patterns.

Community
Advanced
robotostudiorobotostudio
172

web-design-guidelines

Review UI code against the latest Web Interface Guidelines for accessibility and design compliance.

Official
Basic
brief-hqbrief-hq
3

brief-design

Enforce Brief design system tokens and components for UI development.

Official
Intermediate