design-guide

Name: design-guide
Availability: InStock
Author: mighty-hq

Standardize Paperclip React UI with tokens, typography, and component rules.

Updated Mar 15, 2026

Search Tags:#typography #ui #react #design system #tailwind #status badges #component conventions

Ready to run

npx skills add https://github.com/mighty-hq/mighty-paperclip --skill design-guide-mighty-hq

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/mighty-hq/mighty-paperclip/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/mighty-hq/mighty-paperclip --skill design-guide-mighty-hq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

design-guide prevents UI drift by defining Paperclip’s component patterns, tokens, typography, and interaction rules so frontend work stays consistent and reusable.

Core Features & Use Cases

Design tokens & theming: Standardizes colors, radius, shadows, and data viz tokens via CSS variables (OKLCH) for consistent styling across light/dark modes.
Typography & status systems: Enforces an exact typography scale plus unified status/priority conventions using the app’s StatusBadge/StatusIcon/PriorityIcon patterns.
Component/composition conventions: Guides how to create or extend components, when to update the design-guide page, and how to compose layouts (entity rows, property rows, metric cards, log viewer, etc.) without one-off styling.

Quick Start

Use this skill to build or update a frontend UI component according to Paperclip’s existing tokens, typography scale, and composition patterns.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I maintain consistent UI typography and status badges across React components?▼

Maintain consistent UI typography and status badges by enforcing an exact typography scale and unified status/priority conventions using StatusBadge, StatusIcon, and PriorityIcon patterns. This prevents visual drift by standardizing component composition without one-off styling.

How do I standardize design tokens for light and dark mode using Tailwind CSS v4?▼

Standardize design tokens for light and dark mode using Tailwind CSS v4 by applying semantic CSS variable tokens in OKLCH format. This approach standardizes colors, radius, shadows, and data viz tokens to ensure consistent styling across both theme modes.

Do I need React 19 and TypeScript to use semantic CSS variable tokens for component conventions?▼

Yes, React 19 with TypeScript is required, alongside Tailwind CSS v4 and shadcn/ui Radix patterns. These provide the foundational environment needed to apply semantic CSS variable tokens and standardize component conventions correctly.

What is the best way to compose React UI layouts like entity rows and metric cards without one-off styling?▼

The best way to compose layouts like entity rows, property rows, metric cards, and log viewers without one-off styling is to follow established component composition conventions. These rules guide how to create or extend components while matching control-plane patterns.

When should I update the design-guide showcase page for frontend UI modifications?▼

Update the design-guide showcase page whenever you create new React components, modify existing UI, add pages, or design interactions that must match control-plane conventions. This ensures the showcase accurately reflects the current component patterns and tokens.