By hdeibler
Framework-agnostic design principles for visual perception and hierarchy: how the eye groups elements, where it lands first, and what makes a composition read as ordered. Covers Hierarchy, Proximity, Signal-to-Noise Ratio, Color, Alignment, Legibility, Readability, Gestalt Similarity, Closure, and Figure-Ground Relationship. Drawn from the perception-related entries of 'Universal Principles of Design' (Lidwell, Holden, Butler, 2003) and the broader Gestalt and visual-design research literature.
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that "doesn't sit on a grid." Sub-aspect of `alignment`; read that first.
Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency. Trigger when laying out body content, designing tables with mixed types, or fixing alignment issues in dense data displays. Sub-aspect of `alignment`; read that first.
Use this skill whenever the design has more than one element on the page — every layout, every form, every table, every page header, every card. Trigger when designing a layout, picking a grid, fixing a UI that "looks off," debating left vs. center alignment for body text, or auditing why a design feels disorderly. Alignment is one of the most foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — every visible element's edge or center should fall on a shared axis with at least one other element. Misalignment by even a few pixels reads as disorder.
Recognize when closure is the wrong choice — when the perceptual completion work it asks of the user is too costly, ambiguous, or risky. Use when designing for accessibility audiences, novice users, high-stakes interfaces (medical, financial, safety), small rendering sizes that strain perception, or any context where the user shouldn't have to do completion work to understand the form. The skill is judging when explicit forms serve the user better than suggested ones, even at the cost of visual elegance.
Design forms that exploit closure — suggesting shapes through partial outlines, negative space, or strategic gaps so the user's perception completes them. Use when designing icons that need to read at small sizes, logos that need memorability, illustrations with restraint, card layouts with implied containment, or charts with implied structure. The art is suggesting just enough that the user perceives the whole, without leaving so little that they perceive nothing.
A cross-agent skill marketplace of 42 framework-agnostic UX & product-design principles, drawn from Universal Principles of Design (Lidwell, Holden, Butler, 2003) and the broader design and HCI research literature.
Getting Started · Architecture · Principle Index · How Skills Trigger · Attribution · Contributing
A working library of design principles, packaged as portable Agent Skills plus native plugin metadata for Claude Code, Codex, and Cursor. Install one or more plugins and your agent gains access to curated skills that fire automatically whenever you work on UX, UI, or product design — regardless of design system, SDK, framework, or platform.
Each principle is built as a reference-grade entry: a router-style SKILL.md (~350–500 lines), 2–4 sub-aspect skills for context-specific application (~200–300 lines each), and per-skill references/ deep-dive files with origins, research lineage, and worked patterns. The result is a library an agent can apply with the same depth as a senior designer who has internalized the canon.
Many products today are built and reviewed by AI agents. The quality of their design judgment depends heavily on what they've been taught to attend to. Without a working library of principles, an agent will produce designs that are competent on average but blind in specific ways — the typography will drift, hierarchy will collapse on the third screen, the error states will be afterthoughts, the interaction patterns will be inconsistent across surfaces.
This marketplace gives your agent the same canon that experienced designers have internalized over years. Instead of one giant prompt, the canon is split across five composable plugins so you can install only what you need:
| Plugin | What it teaches | Skills |
|---|---|---|
| Perception & Hierarchy | How the eye groups elements, where it lands first, what makes a composition read as ordered | 34 |
| Cognition & Learnability | Mental models, complexity reduction, memory load, how new users get oriented | 33 |
| Interaction & Control | Affordance, feedback, errors, user agency, Fitts's Law for touch targets | 29 |
| Aesthetics & Emotion | Beauty, perceived quality, brand voice, flow, persuasive form | 17 |
| Process & Robustness | Iteration, accessibility, reliability under stress, what to prune | 24 |
Each plugin contains a router skill (which triggers on the plugin's category and points the agent at the right principle), one main skill per principle, and 2–4 sub-aspect skills for principles whose application varies meaningfully by context (e.g., Hick's Law has different shapes in menus vs. defaults vs. pricing).
Pick the agent you actually use. The same skills/<skill-name>/SKILL.md folders are the source of truth for every install path; only the plugin manifest or destination directory changes.
| Agent | Best install path | This repo provides |
|---|---|---|
| Claude Code | Native plugin marketplace | .claude-plugin/marketplace.json and per-plugin .claude-plugin/plugin.json |
| Codex | Native plugin marketplace, or direct Agent Skills | .agents/plugins/marketplace.json and per-plugin .codex-plugin/plugin.json |
| Cursor | Cursor plugin flow, or project rules fallback | .cursor-plugin/marketplace.json and per-plugin .cursor-plugin/plugin.json |
| Gemini CLI | Link or copy Agent Skills | Plain skills/*/SKILL.md folders |
| Copilot, Windsurf, and other agents | Native rules or AGENTS.md fallback | Portable skill folders plus a compact rule/instruction pattern |
The packaging follows the Agent Skills open format, where each skill is a folder containing SKILL.md and optional supporting files.
In Claude Code, add this repository as a plugin marketplace and install the plugins you want:
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimnpx claudepluginhub hdeibler/universal-design-principles --plugin perception-and-hierarchy-principlesFramework-agnostic design principles for interaction, affordance, feedback, errors, and user control. Covers Fitts's Law, Affordance, Forgiveness, Feedback Loop, Errors, Constraint, Mapping, Expectation Effect, and Control. Drawn from the interaction-related entries of 'Universal Principles of Design' (Lidwell, Holden, Butler, 2003) and the broader HCI literature (Fitts, Norman, Nielsen heuristics, Cooper).
Framework-agnostic design principles for cognition, mental models, complexity reduction, and learnability. Covers Hick's Law, Wayfinding, Progressive Disclosure, 80/20 Rule, Chunking, Mental Model, Recognition Over Recall, Consistency, Mimicry, and Iconic Representation. Drawn from the cognition-related entries of 'Universal Principles of Design' (Lidwell, Holden, Butler, 2003) and the broader HCI literature (Norman, Miller, Nielsen, Krug).
Framework-agnostic design principles for aesthetics, perceived quality, brand personality, and emotional response. Covers Aesthetic-Usability Effect, Archetypes, Form Follows Function, Wabi-Sabi, Exposure Effect, and Immersion. Drawn from the aesthetic and emotion-related entries of 'Universal Principles of Design' (Lidwell, Holden, Butler, 2003) and the broader design and consumer-psychology literature.
Framework-agnostic design principles for design process, accessibility, iteration, and robustness against edge cases. Covers Accessibility, Iteration, Factor of Safety, Prototyping, Weakest Link, Scaling Fallacy, and Ockham's Razor. Drawn from the process-related entries of 'Universal Principles of Design' (Lidwell, Holden, Butler, 2003) and the broader engineering and inclusive-design literature (WCAG, Maeda, Cooper, Petroski).
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
This skill should be used when users need to generate ideas, explore creative solutions, or systematically brainstorm approaches to problems. Use when users request help with ideation, content planning, product features, marketing campaigns, strategic planning, creative writing, or any task requiring structured idea generation. The skill provides 30+ research-validated prompt patterns across 14 categories with exact templates, success metrics, and domain-specific applications.
Develop, test, build, and deploy Godot 4.x games with Claude Code. Includes GdUnit4 testing, web/desktop exports, CI/CD pipelines, and deployment to Vercel/GitHub Pages/itch.io.
Upstash Context7 MCP server for up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your LLM context.
A growing collection of Claude-compatible academic workflow bundles. Covers scientific figures, manuscript writing and polishing, reviewer assessment, citation retrieval, data availability, paper reading, literature search, response letters, paper-to-PPTX conversion, and evidence-grounded Chinese invention patent drafting. Rules are organized as reusable skill folders with explicit workflows and quality checks.