Fundamentals

Skill bergside/typeui/skills/fundamentals

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.From its SKILL.md

Install

npx -y skills add bergside/typeui --skill fundamentals

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.4 KB, 645 tokens by cl100k_base, as published. Nobody here has run it

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
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	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.

What ships with it: 5 files

271.0 KB alongside SKILL.md

Gives 0 of the 12 instructions most design systems skills give in 645 tokens

Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06

Extract colors, typography, spacing, radii, shadows, breakpointsin 20 of 501, across 10 files
Create a self-contained dependency-free HTML preview pagein 20 of 501, across 10 files
Keep touch targets at least 44x44pxin 20 of 501
Score the UI across ten dimensionsin 18 of 501, across 8 files
Animate exclusively via transform and opacityin 18 of 501, across 15 files
Ensure WCAG AA color contrastin 18 of 501, across 13 files
Generate DESIGN.md with rationale for each decisionin 17 of 501, across 7 files
Ensure proper contrast and readabilityin 15 of 501, across 10 files
Scan the codebase for existing style patternsin 15 of 501, across 6 files
Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
Propose a design token setin 14 of 501, across 5 files
Create a custom theme when none fitin 14 of 501, across 9 files

Said here and by no other author read

Read the principle files after loading the design system
Let the design system decide concrete values
Let fundamentals decide structural principle conflicts
Let the vertical layer decide process and content architecture
Treat accessibility as non-negotiable everywhere
Fall back to these principles when the design system is silent

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.