Agent skill · design visual · bergside
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.
Why this skill is useful
Provides domain-specific knowledge on universal design principles and accessibility requirements that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-07-04. 1,717 stars on the source repository.
What this skill does
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 sou …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills bergside/fundamentals