nezam-typeui-fundamentals

name	nezam-typeui-fundamentals
description	Universal design law baseline from the TypeUI system. Loads one or more of the 4 TypeUI fundamentals modules based on task type: ui-principles, ux-principles, typography-principles, accessibility. These are design-system-agnostic structural principles — the 'why' behind design decisions. WCAG 2.2 rules are non-negotiable and override aesthetic preferences.
license	MIT
metadata	{"version":"1.0.0","source":"docs/reference/typeui-main/skills/fundamentals/","modules":["ui-principles","ux-principles","typography-principles","accessibility"]}
tier	2
version	1.0.0
updated	"2026-05-29T00:00:00.000Z"
breaking_changes	false
changelog	[{"version":"1.0.0","date":"2026-05-29T00:00:00.000Z","notes":"Initial NEZAM skill metadata for canonical .cursor/skills."}]

TypeUI Fundamentals Skill

Provides universal design law baseline for any NEZAM design task. Works as a wrapper that routes to the correct module(s) in the TypeUI fundamentals directory.

Source Modules

All modules located at docs/reference/typeui-main/skills/fundamentals/:

Module 1: UI Principles

File: ui-principles.md Load for: Visual hierarchy, layout, color theory, depth, interaction design, responsive adaptation

Key rules:

• Visual hierarchy through size, weight, color, position — never just color alone
• Vary spacing for rhythm; identical margins everywhere is monotony
• Tonal contrast creates depth; shadows only for elevated elements
• Grid-breaking elements create dynamism

Module 2: UX Principles

File: ux-principles.md Load for: 30 UX laws, component states, cognitive load, feedback loops

Key rules (excerpt from 30 laws):

• Fitts's Law: Large + close = fast. Make primary actions prominent
• Hick's Law: Fewer choices = faster decisions. Minimize options shown
• Miller's Law: 7±2 chunks. Group and chunk information
• Tesler's Law: Complexity is conserved. Simplify interface, not the model
• Peak-End Rule: Judgment is by peak + final moment. Nail the critical interaction and the exit

9 Component States (all required for every interactive element):

1. default
2. hover
3. focus-visible
4. active
5. disabled
6. loading
7. error
8. selected
9. pressed

Module 3: Typography Principles

File: typography-principles.md Load for: Type scale, readability, leading, tracking, weight contrast, responsive type, brand tone

Key rules:

• Body measure: 65–75ch maximum
• Line-height: 1.6 for body, 1.1–1.3 for display
• Type scale: ≥1.25× ratio between adjacent steps
• Fluid headings: clamp() for responsive sizing
• Never justify body text
• Tracking: negative for large display (−0.02 to −0.04em), tight for body (0 to 0.01em)

Module 4: Accessibility

File: accessibility.md Load for: WCAG 2.2 AA/AAA compliance

Non-negotiable minimums:

• Text contrast: ≥ 4.5:1 (AA), ≥ 7:1 (AAA)
• Large text (18px+ regular, 14px+ bold): ≥ 3:1 (AA)
• UI components: ≥ 3:1 against adjacent colors
• Focus rings: ≥ 3:1 contrast, visible without color alone
• Touch targets: 44×44px minimum (WCAG 2.2)
• Motion: prefers-reduced-motion: reduce on all animations
• Keyboard: All interactive elements tab-navigable in logical order
• Semantic HTML: proper element choices, not just ARIA
• ARIA: Only add aria where semantic HTML falls short. Incorrect aria is worse than none.

Loading Protocol

Call this skill with the task type to get the right module:

Task Type	Load Module(s)
New component / page	ui-principles + ux-principles
Complete design review	All 4 modules
Typography system	typography-principles
Accessibility audit	accessibility
Interaction patterns	ux-principles + ui-principles
Responsive design	ui-principles + accessibility

Conflict Resolution

When TypeUI rules conflict with NEZAM DESIGN.md:

• TypeUI wins for structural principles (hierarchy, accessibility, motion rules)
• NEZAM DESIGN.md wins for concrete values (hex colors, border-radius, spacing tokens)
• Accessibility is absolute — WCAG 2.2 AA overrides everything