By hdeibler
Framework-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).
Based on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Use this skill when designing or fixing controls that mislead users — elements that look interactive but aren't (false affordance), or controls that need to clearly communicate "you can't do that here" (anti-affordance, like disabled states). Trigger when reviewing UIs where users tap inert elements expecting response, when designing disabled states, when picking treatments for read-only fields, or when a "decorative" element is being mistaken for a button. Sub-aspect of `affordance`; read that first.
Use this skill when the design has interactive capability but users aren't *seeing* it — when the affordance is technically present but the signifier (the visible cue that tells users "you can do this") is missing or weak. Trigger when reviewing flat-design UIs where everything looks the same, when designing custom controls, when stakeholders ask "should this be more obvious?", or when picking signifier strength for primary vs. secondary actions. Sub-aspect of `affordance`; read that first.
Use this skill whenever the question is whether the user can tell what an element does — whether it looks clickable, draggable, expandable, editable, or interactive at all. Trigger when designing buttons, links, custom controls, drag handles, draggable cards, editable inline fields, or any interactive element. Trigger on reviews when users hesitate, miss controls, or click on things that aren't interactive. Affordance is one of the most decisive principles in interaction design — Norman placed it at the center of *The Design of Everyday Things* — and it's one of the most violated by modern flat-design conventions that strip the visual cues users rely on.
Use this skill when designing structural constraints that prevent invalid actions through the shape, layout, or behavior of the design itself — paths (channels of motion), axes (rotary controls), barriers (blocks). Trigger when designing input controls, drag-and-drop affordances, modal dialogs, or hardware-style structural prevention. Sub-aspect of `constraint`; read that first.
Use this skill when designing constraints that work through perception, expectation, and learned convention — symbols, conventions, mappings. Trigger when designing iconography, picking control conventions, or designing for behavioral predictability. Sub-aspect of `constraint`; read that first.
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 interaction-and-control-principlesFramework-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.
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).
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.
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.
Complete creative writing suite with 10 specialized agents covering the full writing process: research gathering, character development, story architecture, world-building, dialogue coaching, editing/review, outlining, content strategy, believability auditing, and prose style/voice analysis. Includes genre-specific guides, templates, and quality checklists.
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.
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.