skills.rest
Ezequielpereyraa
EzequielpereyraaCOMMUNITY
Explore all skills by this author →
Website𝕏@EzhePereyraGitHub

ui-design

Align React UI components with typography, color, and spacing tokens.

Updated Mar 5, 2026
Search Tags:#typography#design#ui#accessibility#components#spacing#color-tokens
One-click install
npx skills add https://github.com/Ezequielpereyraa/ai-config --skill ui-design-ezequielpereyraa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/Ezequielpereyraa/ai-config/tree/main/cursor/skills/ui-design
Command: npx skills add https://github.com/Ezequielpereyraa/ai-config --skill ui-design-ezequielpereyraa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI design standard provides a unified set of principles to ensure consistent typography, spacing, color, and interactions across projects, reducing ambiguity and rework.

Core Features & Use Cases

  • Establish typography scales, color tokens, and spacing guidelines to accelerate design-to-code handoffs.
  • Provide reusable patterns for common UI elements and layouts to maintain visual coherence across apps.
  • Use Case: when starting a new feature, apply the standard to all components to achieve a cohesive look and predictable behavior.

Quick Start

Review the current UI module and align typography, spacing, color tokens, and interaction patterns with the UI design standard.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create a unified UI design system for React components?▼

Apply a unified UI design standard to align typography, color tokens, and spacing guidelines across React components to ensure visual coherence and reduce rework across projects.

What is the best way to establish typography scales and color tokens for web interfaces?▼

Establish typography scales and color tokens by defining reusable design system principles that standardize visual elements, accelerating design-to-code handoffs and maintaining consistency across web interfaces.

How does a design system standard handle accessibility in UI components?▼

A UI design system standard handles accessibility by incorporating accessibility considerations directly into the implementation of typography, color tokens, and interaction patterns for web interfaces.

Can I use this UI design standard with existing layouts and visual refinements?▼

Yes, you can apply the UI design standard to existing layouts and visual refinements by reviewing the current UI module and aligning its typography, spacing, color tokens, and interactions with the standard.

Why does my UI design look inconsistent across different web interfaces?▼

Your UI design looks inconsistent because it lacks a unified set of principles for typography, spacing, color, and interactions, causing ambiguity and rework that a standardized design system resolves.

Related Skills

Explore More Design & Creative Skills→
remiconnessonremiconnesson

frontend-design

Design distinctive frontend interfaces with cohesive typography, color, motion, and code.

Community
Advanced
toddmoytoddmoy
1

figma implementation

Convert Figma designs into React components with CSS flex/grid and variables.

Community
Advanced
Hey-ViswaHey-Viswa

nvidia-design-skill

Integrates the Braille alphabet into the digital world.

Community
Advanced
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic