design-guide

Standardize design-language governance for Paperclip UI components and design tokens.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/jkeith10/operatorOS --skill design-guide-jkeith10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/jkeith10/operatorOS/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/jkeith10/operatorOS --skill design-guide-jkeith10

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Paperclip UI teams need a single source of truth for building consistent, reusable frontend components and documenting design decisions across projects.

Core Features & Use Cases

  • Establish design tokens, typography scales, and status conventions to ensure visual and interaction consistency across all components.
  • Provide comprehensive guidelines for component creation, composition patterns, tokens, accessibility, and the living design-guide page.
  • Serve as a living reference used when adding new components, updating design language, and educating designers and engineers.

Quick Start

Add a new reusable UI component and document it on the design-guide page following the component-index guidelines and token conventions.

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 tokens and typography across frontend projects?▼

To standardize UI tokens and typography, this Skill enforces predefined design tokens, typography scales, and CVA variants for creating and updating Paperclip UI components across all frontend projects.

What is a living design-guide page and when do I need to update it?▼

A living design-guide page documents UI design decisions and component indexes. You need to update it whenever introducing new components, modifying design tokens, or changing typography conventions.

How do I add a new reusable UI component following design system rules?▼

To add a reusable UI component, apply predefined tokens, use CVA variants, follow header and section conventions, and document the new component on the design-guide page and component index.

Can I use this design guide for frontend projects not built with Paperclip?▼

No, this design guide specifically standardizes design-language governance for Paperclip UI components and is tailored for frontend projects using the Paperclip framework.

What's the best way to govern design-language consistency for a UI component library?▼

The best way to govern design-language consistency is enforcing predefined tokens, CVA variants, and strict header conventions while requiring updates to the component index and design-guide page for every new component.

Why does my new UI component break visual consistency in the design system?▼

Your new UI component breaks visual consistency if it bypasses predefined design tokens, typography scales, or CVA variants instead of following the established design-guide conventions.