Can I use this for dark mode implementation?

Absolutely. The skill includes specific CSS strategies and semantic token structures for implementing robust, maintainable dark mode and theming.

What spacing system does it recommend?

It implements the industry-standard 8-point grid system to ensure consistent vertical rhythm and professional component alignment across all screen sizes.

How does it handle accessibility?

The skill provides WCAG contrast ratio requirements and programmatic methods to verify color accessibility between foreground and background elements.

Does this skill work with Tailwind CSS?

Yes, it includes specific configurations and best practices for implementing design tokens directly into tailwind.config.js.

Visual Design Foundations

Name: Visual Design Foundations
Author: Microck

byMicrock

•

デザインツール

Establishes professional design systems using typography, color theory, spacing, and accessible iconography principles.

This skill provides a comprehensive framework for building cohesive and accessible visual systems within Claude Code. It guides users through the creation of design tokens, modular typography scales, and 8-point spacing grids while ensuring strict compliance with WCAG accessibility standards. Whether you are initializing a new project with Tailwind CSS, refining a spacing system, or auditing an existing UI for visual consistency, this skill provides the essential implementation patterns and CSS/React components needed for high-quality frontend design.

主な機能

01Comprehensive iconography systems with standardized sizing and React components

02Pre-configured Tailwind CSS theme extensions for fonts, colors, and spacing

03Semantic color token generation with built-in WCAG contrast ratio checks

04Standardized 8-point grid spacing system for consistent layout rhythm

05Modular typography scales with fluid type and responsive sizing guidelines

062 GitHub stars

ユースケース

01Bootstrapping design tokens and theme configurations for new web applications

02Auditing and refactoring legacy CSS to improve visual hierarchy and accessibility

03Implementing robust dark mode strategies and theme-aware UI components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck visual-design-foundations

For use in Claude.ai and ChatGPT

Download Skill