Typeui Fundamentals

This is the layer that explains why design systems make the choices they do. It covers visual hierarchy, the 30 UX interaction laws, typography fundamentals, and WCAG compliance requirements. Use it when your design system doesn't specify something, when you need to validate that a decision follows sound principles, or when aesthetics and accessibility are at odds. The load order matters: read your design system first for concrete tokens, then load this to understand the reasoning. It won't tell you which blue to use, but it will tell you why that blue needs 4.5:1 contrast and when to break visual rhythm for emphasis.

GitHub stars: 1.1K
last updated: Jun 4, 2026

View on GitHub

Install

$ npx -y skills add bergside/typeui --skill typeui-fundamentals --agent claude-code

Installs into .claude/skills of the current project.

Files

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.