Can I use this with frameworks like Tailwind CSS or Bootstrap?

Yes. The principles are framework-agnostic and provide the underlying logic needed to choose the correct utility classes or customize theme variables effectively.

Is this a tool for accessibility compliance?

While it includes guidance on contrast ratios and legibility, its primary focus is aesthetics and hierarchy. For full compliance, it should be used alongside dedicated accessibility tools like wcag-2.2.

How does this skill help with responsive design?

It provides rules for relative sizing, column-based layouts, and mobile-first workflows, ensuring that content doesn't just stretch to fill the screen but maintains proper constraints.

Does this skill provide specific font or color recommendations?

No, this skill focuses on the logic and principles of design, such as how to scale typography and adjust HSL values. For specific assets, use skills like font-recommendations or color-palettes.

UI Design Principles

Name: UI Design Principles
Author: svengraziani

bysvengraziani

•

Design Tools

Applies professional visual hierarchy, systematic spacing, and polished styling rules to enhance HTML and CSS interfaces.

The UI Design Principles skill equips Claude with a robust framework for creating professional-grade user interfaces. Instead of relying on generic defaults, this skill provides specific guidance on establishing visual hierarchy through contrast and weight, implementing a rigorous 16px-based spacing system, and managing depth through sophisticated shadow techniques. It is particularly useful for developers looking to bridge the gap between functional code and aesthetic design, offering logic for HSL color manipulation, typographic scales, and layout strategies that prioritize clarity and user experience.

Key Features

01Systematic spacing scales based on 16px increments to ensure layout consistency.

02Advanced visual hierarchy techniques using font weight and color de-emphasis.

03Typographic optimization including baseline alignment and proportional line-heights.

04Multi-part shadow systems to emulate realistic light sources and depth.

05HSL-based color management for creating accessible and harmonious palettes.

062 GitHub stars

Use Cases

01Refactoring existing CSS to improve whitespace, balance, and visual clarity.

02Establishing a design system from scratch using grayscale-first principles.

03Applying professional polish to UI components like cards, buttons, and navigation.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svengraziani/ui-design ui-design-principles

For use in Claude.ai and ChatGPT

Download Skill