design-principles

Enforce a 4px grid, typography hierarchy, and accessibility guidelines for enterprise dashboards.

Updated Jan 13, 2026
One-click install
npx skills add https://github.com/yoshihiko555/dotfiles --skill design-principles-yoshihiko555
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/yoshihiko555/dotfiles/tree/main/shared/skills/common/design-principles
Command: npx skills add https://github.com/yoshihiko555/dotfiles --skill design-principles-yoshihiko555

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce a precise, crafted design system for enterprise software and dashboards to ensure pixel-perfect UI.

Core Features & Use Cases

  • Define a clear design direction and color foundation for a cohesive product.
  • Set typography, spacing, depth, and surface rules to guide consistent UI with measurable quality.
  • Use in dashboards, admin interfaces, and any UI that requires a refined, minimalist aesthetic.

Quick Start

Identify your product's design direction and implement the 4px grid, typography, and depth rules in your UI components.

Frequently Asked Questions about design-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce consistent typography and spacing in enterprise dashboards?

To enforce consistent typography and spacing in enterprise dashboards, apply a precise 4px grid system alongside defined depth strategy and typography hierarchy rules to ensure pixel-perfect, cohesive UI components across your web app.

What is a 4px grid system and when do I need it for UI design?

A 4px grid system is a layout framework where all spacing, padding, and element dimensions align to a 4-pixel baseline. You need it for enterprise software and SaaS dashboards to achieve a refined, minimalist aesthetic with measurable visual consistency.

How do I set up accessibility guidelines for a SaaS admin interface?

Set up accessibility guidelines for a SaaS admin interface by defining a clear design direction, color foundation, and typography hierarchy that establishes measurable quality and consistent surface rules across all UI components.

Can I use this design system approach for minimalist web apps without a defined color foundation?

No, you cannot achieve a pixel-perfect UI without a defined design direction. This approach requires a predefined color foundation and depth strategy to establish consistent surface rules and typography hierarchy for minimalist web apps.

What's the best way to establish a depth strategy for admin interface components?

The best way to establish a depth strategy for admin interface components is to define surface rules and depth parameters alongside your 4px grid and typography hierarchy, ensuring a cohesive, crafted design system across your enterprise software.