design-principles_skill

Overview

This skill provides a practical UI/UX design system tailored for dashboards, admin panels, SaaS interfaces, and web apps. It enforces a coherent visual language—spacing, typography, color, elevation, and component surface treatment—so interfaces look intentional, modern, and professional. Use it to design new UIs or to fix ugly, inconsistent, or cluttered screens.

How this skill works

It codifies a 4px spacing grid, typography scale, border-radius system, shadow/elevation strategies, and component surface rules (cards, controls, forms, sidebars). It prescribes a design direction workflow: choose product context, personality, color foundation, layout, and depth approach before styling. It also provides dark-mode adjustments, animation timings, and anti-pattern guidance to keep everything consistent and craft-driven.

When to use it

• Building a new dashboard, admin panel, or SaaS interface
• Refactoring inconsistent component styles across a codebase
• Fixing spacing, typography, or color-related visual chaos
• Implementing a design system with React + Tailwind or styled-components
• Styling complex controls (filters, selects, date pickers) and card layouts

Best practices

• Commit to a single design direction before coding (precision, warmth, sophistication, etc.).
• Always use the 4px grid for spacing and symmetric padding patterns.
• Pick one depth strategy (borders-only, subtle shadow, or layered) and apply it consistently.
• Treat controls as crafted objects; avoid native form elements if you need custom styling.
• Reserve color for meaning — use neutral structure and color only for status or actions.
• Use monospace and tabular-nums for numeric/data-heavy content; follow the typography scale.

Example use cases

• Modernize an ugly admin panel: unify spacing, fix typography, and choose a depth strategy.
• Design a metrics dashboard: dense grids, tabular numbers, consistent card surfaces and sparklines.
• Build a branded SaaS UI: pick a color foundation, single accent color, and cohesive shadow/border approach.
• Refactor inconsistent components into a shared design token set for Tailwind or styled-components.
• Implement dark mode: swap shadow strategy to borders and desaturate semantic colors.