design-system-rules

Enforce design system tokens, colors, typography, and state validations for UI screens.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/fabioaap/Prototipacao-Adsmagic --skill design-system-rules
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-rules
Source: https://github.com/fabioaap/Prototipacao-Adsmagic/tree/main/references/upstream/adsmagic-aiox-source/.agents/skills/design-system-rules
Command: npx skills add https://github.com/fabioaap/Prototipacao-Adsmagic --skill design-system-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Regras para criacao e revisao de telas antes da exportacao para o Figma, garantindo consistencia visual, reaproveitamento de componentes e validacao de estados.

Core Features & Use Cases

  • Padronizacao de tokens de cor, tipografia e espacamento para toda a base de telas.
  • Reuso de componentes existentes para evitar duplicação e inconsistencias.
  • Fluxo de validacao de estados: vazio, carregando, sucesso, erro e estados de drawer/modal.

Quick Start

Aplique as regras de design system para revisar uma tela antes da exportação para o Figma.

Frequently Asked Questions about design-system-rules

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

FAQPage Schema
How do I enforce design system rules for UI consistency before Figma export?

To enforce design system rules for UI consistency before Figma export, apply standardized tokens for color, typography, and spacing to validate screens, reuse existing components, and check empty, loading, success, and error states.

What is the best way to standardize color and typography tokens for UI screens?

The best way to standardize color and typography tokens for UI screens is to define a centralized set of visual design system rules that mandate specific token usage across all interfaces, preventing duplication and ensuring visual consistency.

How do I validate empty, loading, and error states for UI components?

To validate empty, loading, and error states for UI components, apply a design system review workflow that checks each interface state against established rules before Figma export, ensuring all drawer and modal conditions meet visual consistency standards.

Can I use this design system approach to review Figma export workflows?

Yes, you can use this design system approach to review Figma export workflows by applying visual validation rules that verify component reuse and token standardization, ensuring screens meet consistency requirements before the final export process.

Why does UI component reuse prevent visual inconsistencies in design systems?

UI component reuse prevents visual inconsistencies in design systems by eliminating duplication, enforcing standardized token usage across screens, and ensuring all interface elements adhere to the same visual validation rules for states like success and error.

Do I need specific dependencies to apply visual design system rules to Adsmagic projects?

No specific dependencies are required to apply visual design system rules to Adsmagic projects, as the validation process focuses on standardizing tokens, colors, and typography directly within the UI screens and Figma export workflow.