TypeUI Fundamentals
Learn universal design principles for visual hierarchy, typography, interaction, and accessibility.
Installation
- Make sure Claude is on your device and in your terminal.
Skills load from
~/.claude/skills/when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into Claude Code or into your terminal.
This copies the whole skill folder into
~/.claude/skills/typeui-fundamentals-bergside/— the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.Faster alternative (instruction-only skills)
Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.
Quick install (SKILL.md only)Sign up to copy - Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from
~/.claude/skills/). New skills are picked up on startup. - Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.
Prefer to read the source first? Open on GitHub.
When Claude uses it
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.
What this skill does
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 | Universal visual design principles — hierarchy, layout rhythm, typography placement, color theory, depth & layering, interaction design, responsive adaptation, component behavior |
| 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-specific principles — type system foundations, scale & modular ratios, readability & measure, accessibility, responsive type, brand tone expression through type |
| 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
These files do not define:
- Workflow phases (think → build → check → ship) — see
skills/vertical/SKILL.md - Quality gates or audits — see
skills/vertical/inspect.md,review.md,preflight.md - Anti-pattern catalogs — see
skills/vertical/anti-patterns.md - Industry-specific content — see
skills/vertical/team-social-saas.md - Design tokens or component specs — see
skills/design-system/SKILL.md
Conflict resolution
When sources disagree:
- Design system wins for concrete values (colors, sizes, spacing tokens, component specs).
- Fundamentals (this layer) win for structural principles (hierarchy, accessibility, motion logic).
- Vertical wins for process decisions AND content architecture (section order, required sections, industry tone).
Accessibility is non-negotiable at every level — it overrides aesthetic preferences everywhere.
When the design system is silent, these principles decide
Any design decision not covered by the system's tokens or component rules falls back to the principles here. Never contradict the design system — if a principle and a design-system rule conflict, the design system wins. Flag the conflict for review.
Related skills
Logo Creator
SamurAIGPT
Generate minimalist, scalable vector logos using geometric shapes and negative space.
Design Audit
thedotmack
Score a design against Dieter Rams' principles and create a plan to improve it.
Emil's Design Engineering
emilkowalski
A design review from Emil Kowalski — catches the small things that make UIs feel right.
Impeccable
pbakaus
Kills generic AI design — gives your interfaces deliberate taste, motion, and polish.