Agent skill
ux-designer
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".
Install this agent skill to your Project
npx add-skill https://github.com/d-oit/do-novelist-ai/tree/main/.claude/skills/ux-designer
SKILL.md
UX Designer Skill
Purpose
This skill acts as a strict design controller to ensure all frontend output is:
- Intentional: No arbitrary decisions without user approval.
- Distinctive: Avoids generic "AI slop" (e.g., standard SaaS blue, glassmorphism).
- Accessible: Meets WCAG 2.1 AA standards by default.
- Minimal: Enforces a flat design aesthetic without unnecessary shadows or gradients.
Key Principles
1. Design Decision Protocol
ALWAYS ASK before making design decisions.
- Colors, fonts, sizes, and layouts require approval.
- Present alternatives and trade-offs.
- No unilateral design changes.
2. Stand Out From Generic Patterns
Avoid typical "AI-generated" aesthetics:
- ❌ Generic SaaS blue, liquid glass, Apple mimicry.
- ✅ Unique color pairs, thoughtful typography, custom visuals.
3. Flat, Minimal Design
Current style preference:
- No shadows: Use borders and spacing for separation.
- No gradients: Use solid, semantic colors.
- No glass effects: Avoid
backdrop-bluror semi-transparent overlays. - Focus: Typography, whitespace, and high-contrast colors.
4. Accessibility by Default
- WCAG 2.1 AA compliance.
- Keyboard navigation: Ensure visible focus states (using rings, not glows).
- Screen reader support: Proper ARIA labels and roles.
- Contrast: Ensure text meets 4.5:1 contrast ratio.
Usage Guidelines
When to use
- Creating new components or pages.
- Refactoring existing UI.
- "Make this look better" requests.
Interaction Model
- Analyze: Check existing patterns and constraints.
- Propose: Ask the user for direction on mood, color, and layout.
- Implement: Write code using semantic tokens and flat design principles.
- Verify: Check against accessibility rules.
Anti-Slop Checklist
Before finalizing UI, verify:
- Are there any arbitrary shadows? -> Remove them.
- Are there any gradients? -> Remove them.
- Is the font generic (Inter/Roboto)? -> Suggest alternatives.
- Is the primary color "SaaS Blue"? -> Suggest a unique palette.
- Is focus visible? -> Ensure it's a clear ring.
Supporting Files
RESPONSIVE-DESIGN.md: Guidelines for mobile-first layouts.ACCESSIBILITY.md: Checklist for WCAG compliance.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
d-oit/do-novelist-ai
novel-development
Work on novel-specific features including plot engines, character development, world-building, timeline management, and GOAP-based story generation. Use when implementing narrative systems, character arcs, or story planning tools.
d-oit/do-novelist-ai
tech-stack-specialist
Manage framework usage, dependencies, build configuration, and environment setup. Use when adding new dependencies, updating packages, configuring build tools, or setting up development environment.
d-oit/do-novelist-ai
performance-engineer
Optimize application performance including build times, runtime speed, bundle size and resource usage. Use when addressing performance issues, implementing caching strategies, or optimizing rendering.
d-oit/do-novelist-ai
e2e-test-optimizer
Optimize Playwright E2E tests by removing anti-patterns, implementing smart waits, enabling test sharding, and improving reliability.
d-oit/do-novelist-ai
domain-expert
Apply domain-driven design principles for business logic, entities, events and aggregate boundaries. Use when modeling domain concepts, implementing business rules, or defining clear separation between domain and infrastructure layers.
d-oit/do-novelist-ai
qa-engineer
Define comprehensive testing strategies, write tests with proper naming conventions, organize tests by type, and implement mocking strategies. Use when creating tests, refactoring test suites, or improving test coverage.
Didn't find tool you were looking for?