skills.rest
chifamba
chifambaCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

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

Updated Mar 28, 2026
Search Tags:#typography#accessibility#frontend#tokens#design-system#design-patterns#ui-guidelines
One-click install
npx skills add https://github.com/chifamba/vashandi --skill design-guide-chifamba
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/chifamba/vashandi/tree/main/vashandi/.claude/skills/design-guide
Command: npx skills add https://github.com/chifamba/vashandi --skill design-guide-chifamba

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).

Core Features & Use Cases

  • Centralized tokens and typography guidelines to ensure consistency across all UI
  • Component creation and composition patterns to accelerate frontend work
  • A /design-guide showcase page demonstrating UI variants, states, and usage

Quick Start

Consult the design guide whenever starting new frontend work to ensure tokens, typography, and patterns are applied consistently.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I maintain UI consistency across frontend components using design tokens?▼

Centralize UI design tokens to standardize components, typography, and patterns, ensuring consistent styling and accessibility across all frontend pages and features.

What is a centralized UI design system and how does it standardize frontend work?▼

A centralized UI design system defines component creation rules, design tokens, typography, and composition patterns to ensure consistent and reusable frontend interface development.

How do I apply composition patterns and status systems when creating new UI components?▼

Consult the design guide to apply standardized composition patterns and status or priority systems, accelerating frontend work while maintaining UI consistency and accessibility.

Does this frontend design guide address accessibility and typography rules?▼

Yes, the frontend design guide defines centralized typography guidelines and design principles that ensure accessibility and visual consistency across all UI components.

What's the best way to document UI variants and states for a frontend design system?▼

Create a dedicated showcase page to demonstrate UI variants, states, and usage patterns, providing a centralized reference for frontend teams building new components.

Do I need additional skills to handle visual quality and web best practices alongside this design system?▼

Use this skill alongside frontend-design for visual quality and web-design-guidelines for web best practices to ensure comprehensive coverage of frontend UI standards.

Related Skills

Explore More Design & Creative Skills→
yonatangrossyonatangross
3

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

Community
Advanced
fgarofalo56fgarofalo56
6

component-library

Develop reusable component libraries with design tokens and Storybook documentation.

Community
Advanced
LittleSongxxLittleSongxx
2

web-design-guidelines

Validate UI code for compliance with Web Interface Guidelines.

Community
Basic
giosuetedeschi-specgiosuetedeschi-spec

core-components

Enforce semantic design tokens and centralized components in Next.js UI development.

Community
Intermediate