What is the benefit of the 8-point grid included in this skill?

The 8-point grid is an industry standard that ensures consistent vertical rhythm and visual harmony across different screen sizes and components.

How does this skill help with accessibility?

It provides built-in WCAG contrast ratio guidelines and programmatic checks to ensure your color palettes and typography meet modern web accessibility standards.

Can I use this with frameworks like Tailwind CSS?

Absolutely. It includes specific patterns for extending the Tailwind config with custom design tokens for fonts, colors, and spacing.

Does it support dark mode implementation?

Yes, it provides semantic token mapping strategies that make implementing and maintaining light and dark themes straightforward.

Visual Design Foundations

Name: Visual Design Foundations
Author: wshobson

bywshobson

•

26,570

•

Design Tools

Implements professional visual design systems including typography scales, semantic color palettes, and spacing grids to ensure UI consistency and accessibility.

This skill empowers Claude to act as a seasoned UI designer and frontend architect by providing a structured framework for visual foundations. It facilitates the creation of design tokens, modular type scales, and 8-point spacing systems while ensuring all choices meet WCAG accessibility standards. Whether you are initializing a new project's CSS variables, configuring Tailwind CSS, or auditing an existing interface for visual hierarchy, this skill provides the implementation patterns needed to build cohesive, production-grade interfaces.

Key Features

01Accessible semantic color token generation with WCAG contrast ratio validation

0226,570 GitHub stars

03Standardized 8-point grid system for consistent layout and component spacing

04Systematic iconography sizing and dark mode theming strategies

05Modular typography scale generation with responsive fluid sizing patterns

06Tailwind CSS theme configuration for rapid design system implementation

Use Cases

01Refactoring legacy styles to eliminate 'magic numbers' in favor of standardized tokens

02Implementing a WCAG-compliant dark mode and accessibility-first color palette

03Initializing a design system and CSS variables for a new web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add wshobson/agents visual-design-foundations

For use in Claude.ai and ChatGPT

Download Skill