skills.rest
Hashzin-0
Hashzin-0COMMUNITY
Explore all skills by this author →
GitHub

design-system-rigoroso

Enforce token-based styling and required visual states across UI components.

Updated Mar 12, 2026
Search Tags:#ui#css#components#tokens#design-system#visual-consistency
One-click install
npx skills add https://github.com/Hashzin-0/Curion --skill design-system-rigoroso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-rigoroso
Source: https://github.com/Hashzin-0/Curion/tree/main/.opencode/skills/design-system-rigoroso
Command: npx skills add https://github.com/Hashzin-0/Curion --skill design-system-rigoroso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents duplicated styling, inconsistent visual states, and ad-hoc UI rules by enforcing a token-driven, component-first design system so interfaces remain consistent, maintainable, and accessible across the application.

Core Features & Use Cases

  • Centralized design tokens for colors, spacing, typography, and shadows to avoid hardcoded values.
  • Clear component architecture with primitives, composites, patterns, and templates to maximize reuse.
  • Mandated visual states for every component: loading, error, empty, and success, ensuring predictable UX in asynchronous and edge scenarios.
  • Use Case: Build a Button and Card that share tokens and state handling so theme changes or accessibility updates propagate without code duplication.

Quick Start

Create a new Button component that uses the design-system tokens for colors, spacing, and typography and implements loading, error, empty, and success states without hardcoding styles.

Frequently Asked Questions about design-system-rigoroso

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

FAQPage Schema
How do I enforce design tokens for UI components to prevent hardcoded styles?▼

To enforce design tokens for UI components, you must centralize values for colors, spacing, typography, and shadows. This token-driven approach prevents duplicated styles and ad-hoc visual rules, ensuring every component relies on a single source of truth for styling.

How do I implement loading, error, empty, and success states for UI components?▼

To implement loading, error, empty, and success states for UI components, you apply a component-first design system that mandates these visual states. This ensures predictable UX across asynchronous scenarios and edge cases without duplicating styling logic.

Why does my UI design system have duplicated styling and inconsistent visual states?▼

Your UI design system has duplicated styling and inconsistent visual states due to ad-hoc visual rules and hardcoded values. Implementing a token-driven, component-first architecture enforces consistent styling and mandates predictable loading, error, empty, and success states.

What is the best way to structure a UI component architecture for maximum reuse?▼

The best way to structure a UI component architecture for maximum reuse is organizing it into primitives, composites, patterns, and templates. This token-based structure maximizes reuse and ensures theme changes propagate without code duplication.

Can I use design system tokens to build buttons and cards with consistent state handling?▼

Yes, you can use design system tokens to build buttons and cards with consistent state handling. By sharing centralized tokens for colors and spacing, components implement loading, error, empty, and success states, allowing theme changes to propagate without code duplication.

Related Skills

Explore More Design & Creative Skills→
vadimcomanescuvadimcomanescu
24

ui-design-system

Generate design tokens from brand colors and export to JSON, CSS, or SCSS.

Community
Intermediate
jonathanbelolojonathanbelolo
3

composable-svelte-components

Assemble reusable Svelte UI components with Tailwind styling and accessibility patterns.

Community
Intermediate
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced
IsthisreelIsthisreel

Brand Design System

Enforce design tokens for color, typography, and spacing across UI components.

Community
Advanced