design-bible

Align React, Vue, and HTML UI development with token-driven design system rules.

Updated Nov 14, 2025

Search Tags:#ui #accessibility #components #tokens #design-system #style-catalogue

Ready to run

npx skills add https://github.com/automata-network/claude-plugins --skill design-bible

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-bible
Source: https://github.com/automata-network/claude-plugins/tree/main/plugins/design-bible/skills/design-bible
Command: npx skills add https://github.com/automata-network/claude-plugins --skill design-bible

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle to maintain visual consistency across components, platforms, and teams without a single source of truth.

Core Features & Use Cases

Token-driven design that derives visuals from a centralized set of design tokens for typography, color, spacing, and borders.
Style catalogue enforcement that ensures components align with a selected UI style (e.g., Hypereth, 1RPC) including necessary component overrides to preserve fidelity.
Accessibility, motion, and responsive rules baked into the bible to support scalable design systems across devices.

Quick Start

Select a UI style catalogue and start implementing a component that adheres to its tokens and component rules.

Frequently Asked Questions about design-bible

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

FAQPage Schema

How do I enforce token-driven design system consistency across React and Vue?▼

Token-driven design system consistency is enforced by deriving typography, color, and spacing from a centralized token set. This neutralizes browser defaults and applies strict component overrides across React, Vue, and plain HTML interfaces.

What is a style catalogue and how does it maintain UI visual consistency?▼

A style catalogue maintains UI visual consistency by providing a selected UI style, such as Hypereth or 1RPC, with necessary component overrides. It ensures components align with strict token-based styling rules for fidelity.

Can I use design tokens to handle accessibility and motion rules in plain HTML?▼

Yes, you can use design tokens to handle accessibility and motion rules in plain HTML. The design system bakes accessibility, motion, and responsive rules into its tokens to support scalable interfaces across devices.

How do I override default browser styles when implementing a UI component?▼

To override default browser styles when implementing a UI component, apply a strict design system that enforces neutralization of browser defaults. This ensures all styling is driven by centralized design tokens and component rules.

Does the design system support applying component overrides for specific UI styles?▼

Yes, the design system supports applying component overrides for specific UI styles. It enforces style catalogue overrides to ensure components align with a selected UI style and preserve visual fidelity.