typeui-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.
npx skills add bergside/typeui --skill fundamentals --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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](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-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](ux-principles.md) | Interaction & control principles — 30 UX laws, button/control state contract
- Load order
- Module index
- What these files are NOT
- Conflict resolution
- When the design system is silent, these principles decide
What does the typeui-fundamentals skill do?
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.
How do I install it?
Run `npx skills add bergside/typeui --skill fundamentals --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From bergside/typeui, a repository with 1,701 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.