design-system

Community

Craft stunning UIs with consistent design patterns.

Authordogespartano-cyber
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill ensures visual consistency and adherence to the Token Milagre brand identity across all UI elements, eliminating design discrepancies and speeding up component development. It provides clear guidelines for styling, layout, and component usage.

Core Features & Use Cases

  • Visual Identity Guidelines: Defines spacing, color systems (CSS variables), card effects, and icon usage for a cohesive look.
  • Component Patterns: Provides ready-to-use patterns for common UI elements like search/filters, scroll-to-top buttons, and theme toggles.
  • Anti-Patterns: Clearly outlines what to avoid in design and styling to maintain simplicity and performance.
  • Use Case: When creating a new page, use this skill to quickly apply the correct spacing, color variables, and card styles, ensuring it seamlessly integrates with the existing design system.

Quick Start

Use the design-system skill to get the CSS variables for primary text and background colors for a new component.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-system
Download link: https://github.com/dogespartano-cyber/tokenmilagre-platform/archive/main.zip#design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.