Agent-Skills.md

Agent Skills: UX Designer Skill

>

UncategorizedID: d-oit/do-novelist-ai/ux-designer

Repository

d-oit/do-novelist-ai
d-oitLicense: MIT

Install this agent skill to your local

pnpm dlx add-skill https://github.com/d-oit/do-novelist-ai/tree/HEAD/.claude/skills/ux-designer

Skill Files

Browse the full folder contents for ux-designer.

Download Skill

Loading file tree…

.claude/skills/ux-designer/SKILL.md

Skill Metadata

Name
ux-designer
Description
>

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-blur or 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

  1. Analyze: Check existing patterns and constraints.
  2. Propose: Ask the user for direction on mood, color, and layout.
  3. Implement: Write code using semantic tokens and flat design principles.
  4. 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.