skills.rest
bencium
benciumCOMMUNITY
Explore all skills by this author →
Website𝕏@benciumGitHub

UX Designer

Provide UI/UX design guidance with WCAG 2.1 AA compliance.

383|53|Updated Oct 18, 2025
Search Tags:#accessibility#web development#responsive design#front-end#design system#user interface#UI/UX design
One-click install
npx skills add https://github.com/bencium/bencium-claude-code-design-skill --skill ux-designer-bencium
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UX Designer
Source: https://github.com/bencium/bencium-claude-code-design-skill/tree/main/ux-designer
Command: npx skills add https://github.com/bencium/bencium-claude-code-design-skill --skill ux-designer-bencium

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the challenge of creating unique, accessible, and user-centered interfaces while avoiding generic "AI-generated" aesthetics. It streamlines the design process by providing expert guidance, enforcing collaborative decision-making, and ensuring compliance with accessibility standards, saving you time and reducing design complexity.

Core Features & Use Cases

  • Collaborative Design Decisions: Always asks for your input before making design choices, presenting alternatives and trade-offs to ensure your vision is met.
  • Unique Aesthetic Guidance: Breaks away from generic patterns, suggesting fresh color pairs, thoughtful typography, and custom visuals to make your UI stand out.
  • Built-in Accessibility: Ensures WCAG 2.1 AA compliance by default, covering semantic HTML, keyboard navigation, ARIA attributes, and color contrast.
  • Responsive Layout Expertise: Guides you through mobile-first design, optimal breakpoints, fluid typography, and touch-friendly interfaces for seamless cross-device experiences.
  • Use Case: Ask to design a call-to-action button, and Claude will prompt you for emphasis, brand colors, and desired emotion before suggesting unique directions. Or, request an accessibility audit for a form, and Claude will identify issues against WCAG 2.1 AA standards and provide specific fixes.

Quick Start

Help me design a hero section for my new product. Make it stand out and accessible.

Frequently Asked Questions about UX Designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design an accessible UI that meets WCAG 2.1 AA standards?▼

Accessible UI design requires semantic HTML, keyboard navigation, ARIA attributes, and sufficient color contrast. This Skill enforces WCAG 2.1 AA compliance by default, auditing forms, buttons, and layouts for accessibility issues and providing specific fixes aligned with modern patterns like Tailwind CSS and shadcn/ui.

Can I create responsive designs that work across mobile and desktop without generic aesthetics?▼

Responsive design balances mobile-first layouts, optimal breakpoints, fluid typography, and touch-friendly interfaces. This Skill guides you through responsive decisions while avoiding generic patterns, suggesting unique color pairs, typography, and custom visuals that maintain distinctiveness across devices.

How do I make design decisions collaboratively without settling for default UI patterns?▼

Collaborative design means presenting alternatives and trade-offs before implementing changes. This Skill asks for your input on emphasis, brand colors, and desired emotion, then suggests fresh directions for components like call-to-action buttons and hero sections instead of applying generic aesthetics.

What's the best way to audit a form for accessibility and design issues?▼

Form audits check semantic structure, keyboard navigation, ARIA labels, color contrast, and responsive behavior against WCAG 2.1 AA. This Skill identifies specific accessibility violations and design gaps, then provides targeted fixes for web components built with React patterns and Tailwind CSS.

Do I need design system knowledge to create consistent, accessible interfaces?▼

Design systems establish reusable components, typography, spacing, and color rules for consistency. This Skill works within design system frameworks, advising on color, typography, layouts, and spacing while ensuring accessibility and helping you build distinctive web components and pages aligned with modern tools like shadcn/ui.

How do I balance unique branding with accessibility compliance in web interfaces?▼

Unique branding and accessibility are complementary—custom colors, typography, and layouts can meet WCAG 2.1 AA standards through proper contrast, semantic markup, and keyboard support. This Skill enforces both, guiding you to distinctive UIs that avoid generic aesthetics while maintaining compliance across responsive designs.

Related Skills

Explore More Design & Creative Skills→
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate
WiseWolfPTWiseWolfPT

Landing Page Steal

Copy a landing page design from a URL or image into a codebase page using Playwright MCP.

Community
Advanced
locdinh209locdinh209

ui-styling

Design accessible responsive interfaces with shadcn/ui, Tailwind CSS, and canvas.

Community
Advanced
KyaniteLabsKyaniteLabs
3

tasteroll

Generates UI prototypes and design systems with WCAG AA accessibility checks and PRNG-based roll history.

Official
Advanced