Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
Detected risks:
The 'visual-design-foundations' skill helps design professionals establish cohesive, accessible visual systems using core design principles like typography, color theory, spacing, and iconography. It aims to create consistent and user-friendly designs by applying these foundational elements to various projects. This skill solves the challenge of building scalable design systems and ensures designs are visually balanced and aligned with accessibility standards.
The typography scale helps in creating a consistent and harmonious text layout by applying modular scales for font sizes. This ensures proportionality and balance across the design.
The spacing system standardizes spacing intervals based on an 8-point grid, improving layout consistency and alignment. It aids in maintaining balance and readability within the design.
Yes, the skill includes guidelines and principles for implementing dark mode, ensuring visual consistency and readability in themed designs.
You can integrate design tokens into your project by extending your configuration file (e.g., Tailwind CSS) to include the provided typography, spacing, and color system values.
Yes, the design principles can be adapted and integrated into various design frameworks, including but not limited to Tailwind CSS, ensuring flexibility across different platforms.
Quick Setup:
.claude/skills/Repository
wshobson/agents