skills.rest
automata-network
automata-networkOFFICIAL
Explore all skills by this author →
Website𝕏@AutomataNetworkGitHub

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
One-click install
npx skills add https://github.com/automata-network/claude-plugins --skill design-bible
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
dralgorhythmdralgorhythm
111

design-systems

Standardize UI components and design tokens across projects.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
gunning4itgunning4it

ui-design

Enforce cohesive UI design standards across React and Tailwind components.

Community
Advanced
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced