Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
Fetches bencium-controlled-ux-designer from bencium/bencium-marketplace and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/bencium-controlled-ux-designer
Restart Cursor to activate bencium-controlled-ux-designer. Access via /bencium-controlled-ux-designer in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.
Core Philosophy
CRITICAL: Design Decision Protocol
ALWAYS ASK before making any design decisions (colors, fonts, sizes, layouts)
Never implement design changes until explicitly instructed
The guidelines below are practical guidance for when design decisions are approved
Present alternatives and trade-offs, not single "correct" solutions
Purpose: Does every element serve a clear function?
Hierarchy: Is visual importance aligned with content importance?
Consistency: Do similar elements look and behave similarly?
Accessibility: Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)
Responsiveness: Does it work on mobile, tablet, desktop?
Uniqueness: Does this break from generic SaaS patterns?
Approval: Have I asked before implementing colors, fonts, sizes, layouts?
Design System Framework:
For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, see DESIGN-SYSTEM-TEMPLATE.md (meta-framework, project templates, decision trees).
Visual Design Standards
Color & Contrast
Color System Architecture:
Every interface needs two color roles:
Base/Neutral Palette (4-5 colors):
Backgrounds (lightest)
Surface colors (cards, inputs)
Borders and dividers
Text (darkest)
Use slightly desaturated, warm or cool greys based on brand
Accent Palette (1-3 colors):
Primary action (CTA buttons)
Status indicators (success, warning, error, info)
Focus/hover states
Use saturated colors for clear contrast against neutrals
// Example with Tailwind<h1className="text-3xl md:text-4xl lg:text-5xl"> Responsive Headline
</h1>// Or with CSS clamp (fluid)h1 { font-size:clamp(2rem, 5vw, 4rem);}
Reduce sizes on mobile (20-30% smaller than desktop)
Reduce hierarchy levels on small screens (fewer distinct sizes)
Layout & Spatial Design
Compositional Balance:
Every screen should feel balanced
Pay attention to visual weight and negative space
Use generous negative space to focus attention
Add sufficient margins and paddings for professional, spacious look
Grid Discipline:
Maintain consistent underlying grid system
Create sense of order while allowing meaningful exceptions
Use grid/flex wrappers with gap for spacing
Prioritize wrappers over direct margins/padding on children
Spatial Relationships:
Group related elements through proximity, alignment, and shared attributes
Use size, color, and spacing to highlight important elements
Guide user focus through visual hierarchy
Attention Guidance:
Design interfaces that guide user attention effectively
Avoid cluttered interfaces where elements compete
Create clear paths through the content
Interaction Design
Motion & Animation
Purposeful Animation:
Every animation must serve a functional purpose:
Orient users: Smooth transitions during navigation changes
Establish relationships: Show how elements connect (expand from source, slide between states)
Provide feedback: Confirm interactions (button press, form submission)
Guide attention: Direct focus to important changes (new messages, errors)
Animation & Gestalt Principles:
Motion should reinforce visual relationships:
Proximity: Elements near each other move together (grouped cards animating)
Similarity: Similar elements animate similarly (all buttons have same hover timing)
Continuity: Movement follows natural paths (smooth curves, not jumpy angles)
Figure-ground: Important elements animate while backgrounds stay stable
Natural Physics:
Animations should feel organic, not mechanical:
Easing: Use ease-out for entrances (fast start, slow end)
Easing: Use ease-in for exits (slow start, fast end)
Easing: Use ease-in-out for transitions (smooth both ends)
Avoid linear easing (feels robotic) except for continuous loops
Apply appropriate mass/momentum (lightweight UI vs weighty modals)
Subtle Restraint:
Animations should be felt rather than seen
Don't delay user actions unnecessarily (keep under 300ms for interactive feedback)
Never block critical actions with decorative animations
›Claude Desktop or compatible AI client with skill support
›Clear understanding of task or problem to solve
›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
⚠Expecting perfect results without iteration
⚠Not providing enough context in prompts
⚠Using skill for tasks outside its intended scope
⚠Accepting outputs without review and validation
Best Practices
✓ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
✗ Don't
−Don't use without understanding skill limitations
−Don't skip validation of outputs
−Don't share sensitive information in prompts
−Don't expect skill to replace human judgment
💡 Pro Tips
★Be specific about desired format and style
★Ask for multiple options to choose from
★Request explanations to understand reasoning
★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation
