skills.rest
PriyanshKuniyal
PriyanshKuniyalCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Generate modular typography scales and 8-point grid spacing systems.

Updated Jul 8, 2026
Search Tags:#typography#UI/UX#visual design#color theory#iconography
One-click install
npx skills add https://github.com/PriyanshKuniyal/gemini-cli-resources --skill visual-design-foundations-priyanshkuniyal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/PriyanshKuniyal/gemini-cli-resources/tree/main/extensions/claude-code-workflows/plugins/ui-design/skills/visual-design-foundations
Command: npx skills add https://github.com/PriyanshKuniyal/gemini-cli-resources --skill visual-design-foundations-priyanshkuniyal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides the essential knowledge to apply typography, color theory, spacing systems, and iconography principles, ensuring a consistent and accessible visual design.

Core Features & Use Cases

  • Typography Scale: Offers a modular scale for consistent typography sizing.
  • Spacing System: Implements an 8-point grid system for consistent spacing.
  • Color System: Provides a semantic color token system for theming and accessibility.
  • Iconography: Offers a system for icon sizing and component design.
  • Use Case: For a UI designer establishing design tokens and building a style guide for a new project.

Quick Start

Use the visual-design-foundations skill to generate a modular typography scale for your project.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema
How do I establish a consistent typography scale for a UI design system?▼

A modular typography scale provides consistent text sizing across your UI design system. This Skill generates a modular scale to ensure text hierarchy and visual consistency in your UI/UX layouts.

What is an 8-point grid system and how does it improve UI spacing?▼

An 8-point grid system standardizes UI spacing by using multiples of eight for layout padding and margins. Implementing this spacing system ensures consistent visual rhythm and alignment across all UI components.

How do I create semantic color tokens for accessible UI theming?▼

Semantic color tokens define UI colors by their purpose rather than hex value, enabling accessible theming. This Skill provides a semantic color token system to maintain accessibility and consistency across light and dark modes.

Can I use this to build a style guide for a new UI project?▼

Yes, you can use this Skill to build a style guide for a new UI project. It offers foundational visual design principles including typography, color, spacing, and iconography systems necessary for establishing cohesive UI design.

What is the best way to standardize icon sizing in a UI component library?▼

Standardizing icon sizing requires a systematic approach to icon dimensions and component design. This Skill offers an iconography system that defines icon sizing rules to maintain visual consistency within your UI component library.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
TehminanazTehminanaz
1

frontend-component-architect

Design and implement pixel-perfect UI components for Next.js 16 with Tailwind CSS and Shadcn UI.

Community
Advanced
therealityreporttherealityreport

audit-responsive-accessibility

Audit generated UI for WCAG compliance across article and brand pages.

Community
Intermediate
vintasoftwarevintasoftware
2

new-component

Generate reusable UI components and layout primitives with shadcn/ui templates.

Official
Intermediate