Is it useful for refactoring existing projects?

Absolutely. It can be used to audit current designs for consistency and to replace arbitrary 'magic numbers' with a standardized spacing and sizing scale.

Does it support specific CSS frameworks?

It provides direct configurations for Tailwind CSS and standard CSS custom properties (variables) that work with any modern frontend framework.

Can this skill help with accessibility compliance?

Yes, it includes guidelines for WCAG 2.1 contrast ratios and provides code patterns to programmatically check color accessibility.

How does it handle responsive design?

The skill includes fluid typography principles using the CSS clamp() function and modular scales that adapt gracefully to different screen sizes.

Visual Design Foundations

Name: Visual Design Foundations
Author: duanbiao2000

byduanbiao2000

0•

Design Tools

Establishes professional UI design systems using typography scales, 8-point grids, and accessible color palettes.

The Visual Design Foundations skill provides Claude with the specialized knowledge required to build cohesive, high-quality user interfaces. It streamlines the creation of design tokens by implementing industry-standard modular typography scales, 8-point spacing systems, and semantic color palettes. By incorporating accessibility best practices like WCAG-compliant contrast ratios and responsive fluid typography, this skill ensures that developers can generate production-ready CSS and Tailwind configurations that are both visually harmonious and inclusive. It is ideal for bootstrapping new projects, creating design systems, or auditing existing UIs for visual consistency.

Key Features

01Iconography systems and SVG component implementation patterns

02Modular typography scales with responsive font-pairing recommendations

03WCAG 2.1 accessibility contrast checking and guidelines

04Standardized 8-point grid systems for consistent layout spacing

05Semantic color token generation with dark mode support

060 GitHub stars

Use Cases

01Establishing a robust design token system for a new web application

02Implementing accessible and themeable color systems with Tailwind CSS

03Improving visual hierarchy and readability in legacy frontend codebases

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add duanbiao2000/obsidiandoc26 visual-design-foundations

For use in Claude.ai and ChatGPT

Download Skill