skills.rest
dogespartano-cyber
dogespartano-cyberCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Provides CSS variables and UI component patterns for the Token Milagre brand identity.

Updated Aug 23, 2026
Search Tags:#frontend#UI/UX#design system#components#CSS#styling#visual identity
Ready to run
npx skills add https://github.com/dogespartano-cyber/tokenmilagre-platform --skill design-system
💬 Prompt for ChatGPT / Claude Chat▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/dogespartano-cyber/tokenmilagre-platform/tree/main/tokenmilagre-platform/.claude/skills/design-system
Command: npx skills add https://github.com/dogespartano-cyber/tokenmilagre-platform --skill design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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.