design-guide

Document and enforce the Paperclip design language across frontend components.

Updated Apr 14, 2026

Search Tags:#typography #design #ui #consistency #component #pattern #token

Ready to run

npx skills add https://github.com/triss-smith/offwatch --skill design-guide-triss-smith

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Inconsistent UI across Paperclip projects slows development and creates a disjoint user experience. The design guide provides a single source of truth for tokens, typography, status/priority systems, composition patterns, and component usage to ensure consistency across all frontend work.

Core Features & Use Cases

Centralized design tokens and CSS variables for color, spacing, typography, and theming.
Clear component patterns and composition rules that enforce consistent UI across pages, dashboards, and features.
A living showcase and references page that guides designers and developers, enforced by standards in frontend-design and web-design-guidelines.

Quick Start

Open the design guide and follow the sections to align new and existing UI components with Paperclip's design language.

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

To standardize UI design, enforce a centralized design language defining tokens, typography, status systems, and composition patterns. This ensures consistent component usage and a unified user experience across all frontend pages and features.

What is a design token system and when do I need it for web interfaces?▼

A design token system centralizes CSS variables for color, spacing, typography, and theming. You need it when scaling frontend projects to prevent inconsistent styling and maintain a single source of truth for visual attributes.

How do I audit existing web pages for UI consistency?▼

Audit UI consistency by comparing existing frontend components against documented composition patterns and design tokens. This process identifies disjointed styling and aligns pages with the established design language.

How do I define status and priority patterns for UI components?▼

Define status and priority patterns by documenting specific visual states within a comprehensive design system guide. This standardizes component status indicators, priority levels, and typography rules for frontend development.

Does this design system approach work without external UI framework dependencies?▼

Yes, this standardization approach uses centralized CSS variables and internal composition rules without requiring external UI framework dependencies, allowing you to enforce consistent styling directly within your frontend codebase.

Why does inconsistent UI slow down frontend development?▼

Inconsistent UI slows development by forcing engineers to recreate styling rules repeatedly without a shared reference. A centralized design guide solves this by providing a single source of truth for component patterns.