Agent skill

ux-designer

Stars 6

Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/duc01226/EasyPlatform/tree/main/.claude/skills/ux-designer

SKILL.md

[IMPORTANT] Use TaskCreate to break ALL work into small tasks BEFORE starting — including tasks for each file read. This prevents context loss from long files. For simple tasks, AI MUST ask user whether to skip.

Quick Summary

Goal: Assist UX Designers with design specs, component docs, accessibility audits, and dev handoffs.

Workflow:

Design Spec — Generate component specs from PBI with tokens, states, responsive behavior
Component Doc — Document states, variants, interactions, BEM classes, ARIA
Accessibility Audit — WCAG 2.1 AA checklist with issue tracking and remediation
Design Handoff — Developer-ready specs with assets, animations, and source links

Key Rules:

All components must map to BEM class naming
Design tokens only (no hardcoded values)
All 7 states documented (default, hover, active, focus, disabled, error, loading)

Be skeptical. Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence percentages (Idea should be more than 80%).

UX Designer Assistant

Help UX Designers create design specifications, document components, perform accessibility audits, and facilitate handoffs to development.

Core Capabilities

1. Design Specification Generation

Create detailed design specs from requirements
Document component inventory
Map design tokens to implementation
Define responsive breakpoints

2. Component Documentation

Document component states and variants
Define interaction behaviors
Specify accessibility requirements
Map to BEM class naming

3. Accessibility Audits

WCAG 2.1 AA compliance verification
Contrast ratio checking
Keyboard navigation review
Screen reader compatibility

4. Design Handoffs

Generate developer-ready specifications
Export asset requirements
Document animation specs
Link to design source files

Design Specification Format

Component Specification

markdown

### Component: {Name}

**Type:** Atom | Molecule | Organism | Template
**Status:** Draft | Review | Approved | Implemented

#### Visual Specification

┌─────────────────────────┐ │ ASCII representation │ └─────────────────────────┘


#### States
| State    | Description       | CSS Class               |
| -------- | ----------------- | ----------------------- |
| Default  | Normal appearance | `.component`            |
| Hover    | Mouse over        | `.component:hover`      |
| Active   | Being clicked     | `.component:active`     |
| Focus    | Keyboard focused  | `.component:focus`      |
| Disabled | Not interactive   | `.component.--disabled` |
| Error    | Validation failed | `.component.--error`    |
| Loading  | Awaiting data     | `.component.--loading`  |

#### Design Tokens
| Property   | Token                    | Value   |
| ---------- | ------------------------ | ------- |
| Background | `--color-bg-primary`     | #FFFFFF |
| Text       | `--color-text-primary`   | #1A1A1A |
| Border     | `--color-border-default` | #E5E5E5 |
| Spacing    | `--spacing-md`           | 16px    |

#### Accessibility
- **Focus:** {visible focus indicator spec}
- **ARIA:** {required attributes}
- **Keyboard:** {tab order and shortcuts}
- **Screen reader:** {expected announcements}

#### Responsive Behavior
| Breakpoint | Width      | Changes           |
| ---------- | ---------- | ----------------- |
| Desktop    | >= 1200px  | Full layout       |
| Tablet     | 768-1199px | Collapsed sidebar |
| Mobile     | < 768px    | Single column     |

Workflow Integration

Creating Design Spec from PBI

When user runs /design-spec {pbi-file}:

Read PBI and acceptance criteria
Identify UI components needed
Generate component specifications
Document design tokens
Add accessibility requirements
Save to team-artifacts/design-specs/

Accessibility Audit

When user says "accessibility audit":

Identify feature/component to audit
Apply WCAG 2.1 AA checklist
Document issues found
Suggest remediations
Generate audit report

Accessibility Audit Template

markdown

## Accessibility Audit: {Feature}

**Date:** {Date}
**Auditor:** {Name}
**Standard:** WCAG 2.1 AA

### Criteria Checklist

#### Perceivable

- [ ] 1.1.1 Non-text Content: Alt text for images
- [ ] 1.3.1 Info and Relationships: Semantic HTML
- [ ] 1.3.2 Meaningful Sequence: Logical reading order
- [ ] 1.4.1 Use of Color: Not sole means of conveying info
- [ ] 1.4.3 Contrast (Minimum): 4.5:1 text, 3:1 large text
- [ ] 1.4.4 Resize Text: Readable at 200% zoom
- [ ] 1.4.11 Non-text Contrast: 3:1 for UI components

#### Operable

- [ ] 2.1.1 Keyboard: All functions keyboard accessible
- [ ] 2.1.2 No Keyboard Trap: Can navigate away
- [ ] 2.4.1 Bypass Blocks: Skip navigation available
- [ ] 2.4.3 Focus Order: Logical tab sequence
- [ ] 2.4.4 Link Purpose: Clear from link text
- [ ] 2.4.6 Headings and Labels: Descriptive
- [ ] 2.4.7 Focus Visible: Clear focus indicator

#### Understandable

- [ ] 3.1.1 Language of Page: lang attribute set
- [ ] 3.2.1 On Focus: No unexpected context change
- [ ] 3.2.2 On Input: No unexpected context change
- [ ] 3.3.1 Error Identification: Clear error messages
- [ ] 3.3.2 Labels or Instructions: Form labels present

#### Robust

- [ ] 4.1.1 Parsing: Valid HTML
- [ ] 4.1.2 Name, Role, Value: ARIA where needed

### Issues Found

| #   | Criterion | Issue | Severity | Recommendation |
| --- | --------- | ----- | -------- | -------------- |
| 1   |           |       | P1/P2/P3 |                |

### Audit Status: PASS / FAIL / CONDITIONAL

**Remediation Priority:**
{List items by severity}

Design Tokens Reference

Color System

Primary:    --color-primary-{50-900}
Secondary:  --color-secondary-{50-900}
Neutral:    --color-neutral-{50-900}
Success:    --color-success-{main, light, dark}
Warning:    --color-warning-{main, light, dark}
Error:      --color-error-{main, light, dark}
Info:       --color-info-{main, light, dark}

Spacing Scale

--spacing-xs:  4px
--spacing-sm:  8px
--spacing-md:  16px
--spacing-lg:  24px
--spacing-xl:  32px
--spacing-2xl: 48px

Typography

--font-size-xs:   12px
--font-size-sm:   14px
--font-size-base: 16px
--font-size-lg:   18px
--font-size-xl:   20px
--font-size-2xl:  24px
--font-size-3xl:  30px

BEM Naming Integration

All component specifications must map to BEM classes:

Pattern

Block:    .component-name
Element:  .component-name__element
Modifier: .component-name__element.--modifier

Example

scss

.user-card {
    &__avatar {
    }
    &__name {
    }
    &__actions {
        &.--collapsed {
        }
    }
}

Design-to-Dev Handoff Checklist

Before sharing design specs with development:

All component states documented
Design tokens mapped to variables
BEM class names defined
Responsive breakpoints specified
Accessibility notes included
Animation/transition specs (if any)
Figma/design file linked
Assets exported (if needed)

Output Conventions

File Naming

{YYMMDD}-ux-designspec-{feature-slug}.md
{YYMMDD}-ux-audit-{feature-slug}.md
{YYMMDD}-ux-component-{component-name}.md

Design Spec Structure

Overview
Component Inventory
Component Specifications (each)
Design Tokens Used
Responsive Behavior
Accessibility Requirements
Handoff Checklist

Quality Checklist

Before completing UX artifacts:

All states documented (default, hover, active, focus, disabled, error, loading)
Design tokens mapped (no hardcoded values)
BEM classes defined
Responsive behavior specified
Accessibility requirements included
Links to design source provided

ui-ux-pro-max
frontend-design

Closing Reminders

MUST break work into small todo tasks using TaskCreate BEFORE starting
MUST search codebase for 3+ similar patterns before creating new code
MUST cite file:line evidence for every claim (confidence >80% to act)
MUST add a final review todo task to verify work quality

Maintainer

duc01226 Core maintainer

Source details

Full Name: duc01226/EasyPlatform
Branch: main
Path in repo: .claude/skills/ux-designer
License: MIT License

Featured Tools

Join Our Newsletter

Stay updated with the latest AI tools, news, and offers by subscribing to our weekly newsletter.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

duc01226/EasyPlatform

fix-parallel

[Implementation] Analyze & fix issues with parallel fullstack-developer agents

6 1

Explore

duc01226/EasyPlatform

ask

[Utilities] Answer technical and architectural questions.

6 1

Explore

duc01226/EasyPlatform

claude-code

[Utilities] Claude Code CLI setup, configuration, troubleshooting, and feature guidance. Triggers on claude code setup, hook not firing, MCP connection, context limit, skill creation, slash command setup.

6 1

Explore

duc01226/EasyPlatform

workflow-deployment

[Workflow] Trigger Deployment & Infrastructure workflow — CI/CD pipelines, Docker, Kubernetes setup and deployment.

6 1

Explore

duc01226/EasyPlatform

workflow-idea-to-pbi

[Workflow] Trigger Idea to PBI workflow — po/ba workflow: capture idea, refine to pbi, create stories, prioritize.

6 1

Explore

duc01226/EasyPlatform

easy-claude-help

[Utilities] Configuration guide for the easy-claude framework — explain settings, guide users through configuring .ck.json.

6 1

Explore

Didn't find tool you were looking for?

Search AI Tools

ux-designer

Install this agent skill to your Project

SKILL.md

Quick Summary

UX Designer Assistant

Core Capabilities

1. Design Specification Generation

2. Component Documentation

3. Accessibility Audits

4. Design Handoffs

Design Specification Format

Component Specification

Workflow Integration

Creating Design Spec from PBI

Accessibility Audit

Accessibility Audit Template

Design Tokens Reference

Color System

Spacing Scale

Typography

BEM Naming Integration

Pattern

Example

Design-to-Dev Handoff Checklist

Output Conventions

File Naming

Design Spec Structure

Quality Checklist

Related

Closing Reminders

Recommended Agent Skills

fix-parallel

ask

claude-code

workflow-deployment

workflow-idea-to-pbi

easy-claude-help