skills.rest
evengul
evengulCOMMUNITY
Explore all skills by this author →
GitHub

docs-product

Document MC-ORG design tokens, component patterns, and layout utilities.

Updated Jun 26, 2022
Search Tags:#design system#ui/ux#component library#brand guidelines#design tokens#mc-org
One-click install
npx skills add https://github.com/evengul/mc-org --skill docs-product
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: docs-product
Source: https://github.com/evengul/mc-org/tree/main/.claude/skills/docs-product
Command: npx skills add https://github.com/evengul/mc-org --skill docs-product

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a definitive guide to the MC-ORG design system, ensuring UI consistency and efficient implementation across the application.

Core Features & Use Cases

  • Comprehensive Design Tokens: Details color, typography, and spacing rules.
  • Component Guidelines: Outlines patterns for interactive elements like toggles, buttons, and badges.
  • Layout and Motion: Specifies layout utilities and animation principles.
  • Use Case: A developer needs to implement a new feature and must adhere to the existing design language. They consult this Skill to understand the correct colors, fonts, spacing, and component styles to use.

Quick Start

Refer to the color tokens section to apply the correct background color for cards.

Frequently Asked Questions about docs-product

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

FAQPage Schema
How do I enforce UI consistency when implementing new application features?▼

You enforce UI consistency by consulting a comprehensive design system reference that provides ground truth for color tokens, typography scales, spacing units, and component patterns to guide all visual implementation decisions.

What design tokens are included in a comprehensive design system reference?▼

A comprehensive design system reference includes color tokens, typography scales, and spacing units, providing the foundational visual rules needed to maintain aesthetic direction and UI consistency across an application.

Where do I find the correct component patterns for interactive UI elements like toggles and badges?▼

Component patterns for interactive elements like toggles, buttons, and badges are outlined in the component guidelines section of the design system reference, ensuring standardized visual and functional behavior across the application.

Can I use this design system reference for layout utilities and animation principles?▼

Yes, the design system reference specifies layout utilities and motion animation principles, providing the necessary guidelines to standardize structural layouts and interactive animations across the application's UI.

What is the best way to apply the correct background color for UI cards?▼

The best way to apply the correct card background color is to refer directly to the color tokens section of the design system reference, which defines the exact visual values required for accurate implementation.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic
fashraf94fashraf94

MarketClash Components

Provide React components and design tokens for MarketClash game interfaces.

Community
Intermediate
luanzebaluanzeba

normalize

Enforces design tokens and accessibility across UI elements and layouts.

Community
Advanced