fundamentals

Name: fundamentals
Author: bergside

1.6kstars122forks

How to install fundamentals?

bergside/typeui/fundamentals

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

Installs into the current project.

Summary

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 ae

Files · 1

View on GitHub

SKILL.md

1	# Design Fundamentals — Agent Instructions
2
3	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.
4
5	## Load order
6
7	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.
8
9	## Module index
10
11	\| File \| Purpose \|
12	\|---\|---\|
13	\| [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 \|
14	\| [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 \|
15	\| [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 \|
16	\| [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 \|
17	\| [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 \|
18
19	## What these files are NOT
20
21	These files do not define:
22	- Workflow phases (think → build → check → ship) — see `skills/vertical/SKILL.md`
23	- Quality gates or audits — see `skills/vertical/inspect.md`, `review.md`, `preflight.md`
24	- Anti-pattern catalogs — see `skills/vertical/anti-patterns.md`
25	- Industry-specific content — see `skills/vertical/team-social-saas.md`
26	- Design tokens or component specs — see `skills/design-system/SKILL.md`
27
28	## Conflict resolution
29
30	When sources disagree:
31
32	1. Design system wins for concrete values (colors, sizes, spacing tokens, component specs).
33	2. Fundamentals (this layer) win for structural principles (hierarchy, accessibility, motion logic).
34	3. Vertical wins for process decisions AND content architecture (section order, required sections, industry tone).
35
36	Accessibility is non-negotiable at every level — it overrides aesthetic preferences everywhere.
37
38	## When the design system is silent, these principles decide
39
40	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.

People who liked this also viewed

6 picks

Type

fundamentals

1.6kstars122forks

View on GitHub

How to install fundamentals?

bergside/typeui/fundamentals

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Fundamentals — Agent Instructions
2
3	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.
4
5	## Load order
6
7	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.
8
9	## Module index
10
11	\| File \| Purpose \|
12	\|---\|---\|
13	\| [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 \|
14	\| [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 \|
15	\| [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 \|
16	\| [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 \|
17	\| [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 \|
18
19	## What these files are NOT
20
21	These files do not define:
22	- Workflow phases (think → build → check → ship) — see `skills/vertical/SKILL.md`
23	- Quality gates or audits — see `skills/vertical/inspect.md`, `review.md`, `preflight.md`
24	- Anti-pattern catalogs — see `skills/vertical/anti-patterns.md`
25	- Industry-specific content — see `skills/vertical/team-social-saas.md`
26	- Design tokens or component specs — see `skills/design-system/SKILL.md`
27
28	## Conflict resolution
29
30	When sources disagree:
31
32	1. Design system wins for concrete values (colors, sizes, spacing tokens, component specs).
33	2. Fundamentals (this layer) win for structural principles (hierarchy, accessibility, motion logic).
34	3. Vertical wins for process decisions AND content architecture (section order, required sections, industry tone).
35
36	Accessibility is non-negotiable at every level — it overrides aesthetic preferences everywhere.
37
38	## When the design system is silent, these principles decide
39
40	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.

People who liked this also viewed

6 picks

Type