# Typeui Fundamentals

Universal UI/UX design principles covering visual hierarchy, interaction laws...

- Repository: https://github.com/bergside/typeui (2187 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add bergside/typeui --skill typeui-fundamentals -g -a claude-code -y`
Codex: `npx skills add bergside/typeui --skill typeui-fundamentals -g -a codex -y`
Cursor: `npx skills add bergside/typeui --skill typeui-fundamentals -g -a cursor -y`
Gemini CLI: `npx skills add bergside/typeui --skill typeui-fundamentals -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add bergside/typeui`

## Description

Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements. Use when making design decisions not covered by a specific design system, validating principle compliance, or resolving conflicts between aesthetics and accessibility. Design-system-agnostic and applies to every surface.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design Fundamentals, Agent Instructions

Universal design principles that define **why** patterns work, **how** to apply them correctly, and **what** accessibility requirements are non-negotiable. These are timeless, design-system-agnostic foundations that apply to every surface regardless of vertical or workflow phase.

## Load order

Read these files **after** loading the design system (`SKILL.md` / `DESIGN.md` + token modules). The design system tells you *what* token to use; these files explain *why* that decision is correct and *how* to avoid common principle violations.

## Module index

| File | Purpose |
|---|---|
| [ui-principles.md](ui-principles.md) | Universal visual design principles, hierarchy, layout rhythm, typography placement, color theory, depth & layering, interaction design, responsive adaptation, component behavior |
| [spacing-principles.md](spacing-principles.md) | Spacing-specific principles, 4-point grid, proximity grouping, inner vs outer gaps, vertical and horizontal rhythm, heading→paragraph spacing, section and component spacing tiers |
| [ux-principles.md](ux-principles.md) | Interaction & control principles, 30 UX laws, button/control state contracts (9 states), hover/active technique palettes, touch targets, cognitive load, feedback loops |
| [typography-principles.md](typography-principles.md) | Typography-specific principles, type system foundations, scale & modular ratios, readability & measure, accessibility, responsive type, brand tone expression through type |
| [accessibility.md](accessibility.md) | WCAG 2.1/2.2 compliance, contrast ratios, color-as-information rules, focus visibility, keyboard navigation, motion safety, target sizes, text spacing, semantic structure, ARIA |

## What these files are NOT

The rest: https://github.com/bergside/typeui/blob/HEAD/skills/fundamentals/SKILL.md