skills.rest
d-oit
d-oitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-designer

Enforce flat, minimal, WCAG 2.1 AA-compliant frontend design with pre-approved colors, typography, and layouts.

Updated Aug 23, 2026
Search Tags:#accessibility#a11y#wcag#ux#design-system
One-click install
npx skills add https://github.com/d-oit/do-novelist-ai --skill ux-designer-d-oit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/d-oit/do-novelist-ai/tree/main/.claude/skills/ux-designer
Command: npx skills add https://github.com/d-oit/do-novelist-ai --skill ux-designer-d-oit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill acts as an expert UX designer that enforces flat, minimal design, strict accessibility (WCAG 2.1 AA), and collaborative design decisions. Use this skill for all UI/UX tasks to avoid "AI slop".

Core Features & Use Cases

  • Design Governance: Enforces flat, minimal design with a design system.
  • Accessibility by Default: Ensures WCAG 2.1 AA compliance and keyboard navigation.
  • Collaborative Decision Protocol: Always asks before making design decisions and presents alternatives.
  • Distinctive Visual Language: Guides against generic AI aesthetics and promotes deliberate typography and spacing.

Quick Start

Propose UI changes or component designs; the skill will respond with accessible, design-system-aligned options and rationale.

Frequently Asked Questions about ux-designer

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

FAQPage Schema
How do I ensure my UI design meets WCAG 2.1 AA accessibility standards?▼

WCAG 2.1 AA compliance requires keyboard navigation, sufficient color contrast, ARIA labels, and visible focus states. This Skill enforces those standards by default, rejecting inaccessible patterns and guiding component design toward keyboard-first, screen-reader-compatible interfaces.

What's the best way to avoid generic AI-generated UI aesthetics?▼

Enforce intentional design decisions through a design system, flat minimal layouts, and deliberate typography and spacing choices. This Skill applies design governance to prevent AI slop by requiring pre-approval for colors, typography, and layouts, ensuring distinctive rather than generic outputs.

How do I conduct a design review for accessibility and consistency?▼

Present UI changes or component designs for evaluation against accessibility requirements and design-system alignment. This Skill reviews proposals, identifies WCAG violations, rejects inaccessible patterns like shadows and gradients, and suggests accessible alternatives with rationale.

Can I use this for refactoring existing frontend components?▼

Yes. This Skill applies to component creation, refactors, and accessibility audits. It evaluates existing frontends for inconsistent UI quality, keyboard navigation gaps, missing ARIA labels, and non-compliant focus states, then guides improvements.

What design patterns does this Skill reject or avoid?▼

This Skill rejects shadows, gradients, glass morphism effects, and any design that prioritizes aesthetics over accessibility. It enforces flat, minimal design and mandatory keyboard-visible focus states, ensuring functional and accessible interfaces over decorative complexity.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
logistics00logistics00

modern-accessible-html-jsx

Convert design intents into semantic, accessible HTML and JSX code.

Community
Intermediate
bipinksbipinks
3

accessibility-patterns

Apply WCAG 2.1 AA/AAA patterns to improve UI accessibility.

Community
Advanced
InnerScopeHearingInnerScopeHearing

wcag-audit-patterns

Audit web content for WCAG 2.2 compliance with automated testing and remediation guidance.

Official
Intermediate