| 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):
- default
- hover
- focus-visible
- active
- disabled
- loading
- error
- selected
- 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
