skills.rest
dawitlabs
dawitlabsCOMMUNITY
Explore all skills by this author →
GitHub

UI Design Principles — Everyday Knowledge Base

Apply documented design heuristics to standardize UI color, typography, layout, and motion decisions.

3|Updated May 16, 2026
Search Tags:#typography hierarchy#color systems#ui principles#accessibility contrast#animation timing#layout alignment
One-click install
npx skills add https://github.com/dawitlabs/ui-skills --skill ui-design-principles-everyday-knowledge-base
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Design Principles — Everyday Knowledge Base
Source: https://github.com/dawitlabs/ui-skills/tree/main/skills/ui-design-principles
Command: npx skills add https://github.com/dawitlabs/ui-skills --skill ui-design-principles-everyday-knowledge-base

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents UI work from drifting into inconsistent, low-quality choices by giving a single, actionable reference for color, typography, layout, alignment, motion, and UX decision rules.

Core Features & Use Cases

  • Color systems guidance: Apply rules for deriving darker/lighter variants, hue shifts, and accessible contrast planning instead of ad-hoc hex tweaking.
  • Typography foundations: Enforce readable type hierarchy (size/weight/spacing), limit typeface chaos, and use line-height and baseline scales correctly.
  • UI/UX execution rules: Follow principles for spacing/white space, alignment cleanliness, animation timing and reduced-motion, and interaction patterns like locality and dropdown avoidance.
  • Use case: When redesigning a screen, quickly standardize button states, surface neutrals, headline/body hierarchy, spacing rhythm, and motion behavior using the same set of principles across components.

Quick Start

Ask your AI to apply the UI Design Principles knowledge base to your proposed UI and return a revised set of colors, typography hierarchy, spacing rules, and motion guidelines that follow the principles precisely.

Frequently Asked Questions about UI Design Principles — Everyday Knowledge Base

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

FAQPage Schema
How do I create consistent color systems and accessible contrast for UI components?▼

Create consistent color systems by applying rules for deriving darker/lighter variants and hue shifts, ensuring accessible contrast planning rather than ad-hoc hex tweaking. This prevents UI work from drifting into inconsistent, low-quality choices.

What's the best way to standardize UI typography hierarchy and spacing rhythm?▼

Standardize UI typography hierarchy and spacing rhythm by enforcing readable type scales, correct line-height baselines, and whitespace alignment rules. This limits typeface chaos and maintains visual consistency across product features.

How do I implement animation timing and prefers-reduced-motion guidelines?▼

Implement animation timing and prefers-reduced-motion guidelines by following documented motion heuristics and interaction patterns. This standardizes motion behavior across components while ensuring accessibility compliance.

Can I use these UI principles to review existing screens for hierarchy and contrast?▼

Yes, you can use these UI principles to review existing screens for hierarchy and contrast. The knowledge base provides actionable reference rules to evaluate and standardize design-system behavior across features.

Why does my UI design drift into inconsistent button states and surface neutrals?▼

UI design drifts into inconsistent button states and surface neutrals due to arbitrary adjustments. Applying documented design heuristics for color variations and interaction patterns prevents low-quality, ad-hoc choices.

Related Skills

Explore More Design & Creative Skills→
ouakarouakar

ui-designer

Define UI design systems and UX specifications bridging BRD and frontend implementation.

Community
Advanced
Chai-UnChai-Un

frontend-design

Generate production-grade frontend interfaces with cohesive theming via CSS variables.

Community
Advanced
Aurora-AIAurora-AI
1

cinematographer-master

Animate static web layouts with GSAP, Lenis, and ScrollTrigger.

Community
Advanced
tyhuffman7tyhuffman7
1

design-review

Audits live pages for spacing, typography, hierarchy problems and generates visual reports.

Community
Advanced