What is the primary spacing logic used?

It implements the industry-standard 8-point grid system to ensure consistent vertical and horizontal rhythm across all UI components.

How does it handle web accessibility?

The skill enforces WCAG 2.1 contrast requirements for text and UI components, providing programmatic contrast ratio checks and accessible color pairings.

Does this skill support Tailwind CSS?

Yes, it includes specific patterns and snippets for exporting design tokens directly into your tailwind.config.js file.

Can I use this for dark mode implementation?

Yes, it provides a comprehensive strategy for dark mode using CSS variables and data-theme attributes to manage background, text, and border tokens.

Visual Design Foundations

Name: Visual Design Foundations
Author: gwickman

bygwickman

0•

디자인 도구

Implements professional visual systems using modular typography scales, 8-point spacing grids, and accessible semantic color palettes.

This skill equips Claude with the foundational principles and implementation patterns required to build cohesive, high-quality user interfaces. It streamlines the creation of design tokens, modular typography, and semantic color systems while ensuring strict adherence to WCAG accessibility standards. Whether you are bootstrapping a new project or auditing an existing UI for visual consistency, this skill provides the necessary CSS variables, Tailwind configurations, and layout logic to establish a robust, production-ready design language.

주요 기능

01Comprehensive dark mode and theming strategy implementation

02Tailwind CSS configuration integration for rapid design system setup

03Modular typography scales with responsive fluid type systems

04Semantic color token generation with built-in accessibility checks

050 GitHub stars

06Standardized 8-point spacing grids for consistent layout rhythm

사용 사례

01Establishing a scalable design system and style guide for a new web application

02Auditing existing CSS for visual consistency and WCAG accessibility gaps

03Refactoring hardcoded CSS values into a maintainable design token system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gwickman/auto-dev-test-target-1 visual-design-foundations

For use in Claude.ai and ChatGPT

Download Skill