By hdeibler
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).
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Use this skill when the question is whether users can *operate* a UI — keyboard, switch device, voice, screen-reader gestures — not just by mouse or touch. Trigger when designing keyboard navigation, focus management for modals/menus/popovers, drag-and-drop with alternatives, motion-heavy interactions, or any flow that asks the user to do something. Covers WCAG Principle 2 (Operable). Sub-aspect of `accessibility`; read that first if you haven't already.
Use this skill when the question is whether users can *perceive* the content — see it, hear it, or feel it — regardless of impairment. Trigger when designing color systems, picking text sizes, building image-heavy surfaces, working with video/audio, designing for low-vision users, or running an accessibility audit. Covers WCAG Principle 1 (Perceivable). Sub-aspect of `accessibility`; read that first if you haven't already.
Use this skill when the question is whether assistive technologies — screen readers, voice control, switch devices, refreshable braille displays — can reliably interpret your UI. Trigger when picking between semantic HTML and a custom-built component, when reaching for ARIA, when designing live regions for dynamic content (toasts, validation, search results), or when reviewing a UI built largely from `<div>` elements. Covers WCAG Principle 4 (Robust). Sub-aspect of `accessibility`; read that first if you haven't already.
Use this skill when the question is whether users can *understand* the UI — predict its behavior, recover from errors, comprehend its labels and copy. Trigger when writing form labels and error messages, when designing flows with surprising state changes, when picking microcopy for the destructive moments, or when reviewing a UI that "works correctly but confuses people." Covers WCAG Principle 3 (Understandable). Sub-aspect of `accessibility`; read that first if you haven't already.
Use this skill on every design task that produces a user-facing surface. Trigger on every screen, component, prototype, or design review — accessibility isn't a phase, it's a property each surface either has or doesn't. Trigger when the user mentions accessibility, a11y, WCAG, screen readers, keyboard navigation, contrast, motion sensitivity, ARIA, color blindness, "section 508," "EAA," or compliance. Also trigger when the user is *not* asking about accessibility — because most of the highest-impact accessibility decisions are made silently when no one was asking. Routes to sub-aspect skills for the four WCAG sub-principles: perceivable, operable, understandable, robust.
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 process-and-robustness-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 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.
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.