skills.rest
yusufcmg
yusufcmgCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Apply visual design principles to create accessible digital interfaces.

1|Updated Feb 19, 2026
Search Tags:#typography#design system#visual design#design tokens#color theory#spacing#iconography
One-click install
npx skills add https://github.com/yusufcmg/Antigravity-Agents-Workflows --skill visual-design-foundations-yusufcmg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/yusufcmg/Antigravity-Agents-Workflows/tree/main/.agent/skills/design/visual-design-foundations
Command: npx skills add https://github.com/yusufcmg/Antigravity-Agents-Workflows --skill visual-design-foundations-yusufcmg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps establish and maintain consistent, accessible, and aesthetically pleasing visual design systems by providing foundational principles and practical examples for typography, color, spacing, and iconography.

Core Features & Use Cases

  • Design Token Creation: Define reusable design tokens for typography, color, and spacing.
  • Style Guide Development: Build comprehensive style guides based on established design principles.
  • Visual Hierarchy & Consistency: Improve the overall visual appeal and user experience of digital products.
  • Use Case: When starting a new project, use this Skill to define your core design tokens and establish an 8-point spacing system and a harmonious color palette.

Quick Start

Use the visual-design-foundations skill to generate a basic Tailwind CSS configuration for typography and spacing.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema
How do I create design tokens for typography and spacing?▼

Yes, this Skill enforces WCAG contrast ratios to ensure accessible digital interfaces. It applies color theory principles to generate harmonious palettes that meet accessibility standards for both light and dark mode implementation.

What is the best way to set up an 8-point spacing system?▼

An 8-point spacing system is established by defining base spacing design tokens that scale consistently. This Skill applies foundational visual design principles to generate these spacing systems, ensuring visual hierarchy and layout consistency across your project.

Can I generate a Tailwind CSS configuration for typography and spacing?▼

Visual hierarchy is improved by systematically applying typography scales, spacing systems, and iconography principles. This Skill processes your design foundations to establish consistent proportions and contrast, resulting in a more cohesive user experience.

Does this support dark mode implementation and responsive design?▼

Yes, this Skill supports dark mode implementation and responsive design by adhering to visual design best practices. It establishes flexible design tokens and style guides that maintain visual consistency and WCAG compliance across different screen contexts.

Related Skills

Explore More Design & Creative Skills→
PingMe-NetworkPingMe-Network

extract

Extract reusable UI patterns, components, and design tokens into a centralized design system.

Official
Advanced
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

neon

Standardize high-contrast design systems with color, typography, and spacing tokens.

Community
Intermediate