visual-design-foundations
CommunityBuild cohesive, accessible visual designs.
Design & Creative#typography#accessibility#visual design#design systems#color theory#spacing#iconography
AuthorDrLuggels
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps establish and maintain consistent, accessible visual design systems by providing principles and practical examples for typography, color, spacing, and iconography.
Core Features & Use Cases
- Design Token Establishment: Define foundational design tokens for typography, spacing, and color.
- System Building: Create or refine style guides, spacing systems, and color palettes.
- Visual Consistency: Improve hierarchy, readability, and overall visual harmony across interfaces.
- Use Case: When starting a new project, use this Skill to define your core design tokens in Tailwind CSS, ensuring a consistent visual language from the outset.
Quick Start
Use the visual-design-foundations skill to generate a Tailwind CSS configuration for typography, spacing, and color.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-design-foundations Download link: https://github.com/DrLuggels/my_dhbw/archive/main.zip#visual-design-foundations Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.