skills.rest
triss-smith
triss-smithCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/triss-smith/offwatch --skill design-guide-triss-smith
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
AlexandrePontesjrAlexandrePontesjr

reversa-design-system

Extract design tokens and markdown documentation from legacy styling sources.

Community
Intermediate
jiaiyanjiaiyan
8

naive-ui-design-typography

Document and enforce typography standards for Naive UI projects.

Community
Advanced
navyapdh11navyapdh11

design-guide

Codify design tokens, typography, and component patterns into a single frontend reference.

Community
Basic
wzyxdwllwzyxdwll
14

extract

Identify reusable UI patterns and design tokens for consolidation into a centralized design system.

Community
Intermediate