skills.rest
kangnam7654
kangnam7654COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-guide

Guide UI teams in standardizing frontend design tokens, typography, and component patterns.

1|Updated Mar 31, 2026
Search Tags:#typography#consistency#frontend#ui-design#design-system#design-tokens#design-guide
One-click install
npx skills add https://github.com/kangnam7654/stapler --skill design-guide-kangnam7654
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/kangnam7654/stapler/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/kangnam7654/stapler --skill design-guide-kangnam7654

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a cohesive UI language and governance for Paperclip frontend components, enabling faster development, consistent visuals, and scalable design across projects.

Core Features & Use Cases

  • Design tokens and typography governance to ensure consistent colors, spacing, and type scales.
  • Component patterns and guidelines for building reusable UI elements, pages, and design-system showcases.
  • Guidance for cross-team collaboration by aligning frontend work with frontend-design and web-design-guidelines.
  • Use cases include creating new UI components, modifying existing ones, styling pages, or when documenting and sharing design decisions.

Quick Start

Review this guide and apply tokens, typography, and component patterns to your frontend work.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I create a cohesive frontend design system for consistent UI components?▼

Build a cohesive frontend design system by establishing governance rules for design tokens, typography, and component patterns. This standardizes colors, spacing, and type scales to ensure consistent visuals across projects.

What are design tokens and how do they standardize UI styling?▼

Design tokens are centralized variables that govern visual attributes like colors and spacing. Applying token governance rules ensures consistent UI styling and scalable frontend design across teams.

How do I maintain typography consistency across multiple frontend projects?▼

Maintain typography consistency by defining a standardized type scale and governance rules within your design system. This aligns frontend work with web design guidelines to ensure consistent visuals across projects.

Can I use this design guide to align cross-team collaboration on frontend components?▼

Yes, you can align cross-team collaboration by applying component patterns and guidelines. This guides UI teams in building reusable elements and documenting design decisions to align frontend work.

What is the best way to structure reusable UI component patterns?▼

The best way to structure reusable UI component patterns is to follow a design guide specifying frontend tooling recommendations and governance rules. This ensures components remain consistent and scalable across pages.

When do I need to apply design tokens and component patterns in frontend development?▼

Apply design tokens and component patterns when creating new UI components, modifying existing ones, styling pages, or documenting design decisions. This ensures your frontend development maintains consistent and cohesive visuals.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
congthang12312congthang12312

frontend-design

Convert design briefs into reusable frontend UI components with design tokens.

Community
Advanced
Andrej1601Andrej1601

tailwindcss-framework-integration

Configure Tailwind CSS across React, Vue, and Next.js projects.

Community
Intermediate
yusifengyusifeng
192

formax-web-style-system

Apply token-based desktop web styling to harmonize frontend visuals.

Community
Advanced