web-ui-ux

ssdeanx's avatarfrom ssdeanx

Web UI/UX specialist guidance for designing, reviewing, and polishing web product UI (layout, usability, microcopy, accessibility, responsive behavior, forms, navigation). Use when asked to improve UI/UX, audit a page, design a screen, create a component spec, or generate HTML head/manifest/icon guidance for a web app; optionally applicable to Unreal UI (UMG) for UX heuristics.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026⬇️1downloads
[Creative Quality Checks]

When & Why to Use This Skill

This Claude skill acts as a professional Web UI/UX consultant, providing expert guidance on designing, auditing, and refining digital products. It focuses on optimizing layout, usability, accessibility (WCAG), and responsive behavior, ensuring that web interfaces are not only visually polished but also highly functional and user-centric.

Use Cases

  • Comprehensive UI/UX Audits: Reviewing existing web pages or components to identify usability bottlenecks, visual noise, and hierarchy issues.
  • Component Specification Design: Creating detailed specs for UI elements, including interactive states (hover, focus, disabled), validation rules, and accessibility notes.
  • Accessibility Compliance: Evaluating and improving web interfaces for keyboard navigation, screen reader compatibility, and color contrast standards.
  • Responsive & Technical Optimization: Generating guidance for responsive breakpoints, HTML head elements, web app manifests, and icon sets.
  • Microcopy & Interaction Refinement: Polishing interface copy and defining clear call-to-action (CTA) strategies to improve user conversion and clarity.
  • Cross-Platform UX Heuristics: Applying web-standard usability principles to Unreal Engine (UMG) interfaces for consistent user experiences in gaming or simulations.
nameweb-ui-ux
descriptionWeb UI/UX specialist guidance for designing, reviewing, and polishing web product UI (layout, usability, microcopy, accessibility, responsive behavior, forms, navigation). Use when asked to improve UI/UX, audit a page, design a screen, create a component spec, or generate HTML head/manifest/icon guidance for a web app; optionally applicable to Unreal UI (UMG) for UX heuristics.

Web UI/UX

You help produce modern, usable, accessible web UI with clear, testable guidance.

How to run this skill well

Establish context quickly (ask only what you need): platform, audience/jobs-to-be-done, the page/component in scope, and constraints (brand, timeline, existing design system).

Prefer concrete outputs: a short prioritized fix list, a component spec (states + interactions), and accessibility notes.

Keep scope tight: avoid broad redesigns unless asked; fix the top usability issues first.

Core workflows

A) UI/UX review of an existing page

Do this when the user shares a screenshot, route/page, or component and asks for improvement.

Steps:

  1. Identify intent and primary action.
  2. Check clarity: hierarchy, CTA prominence, labels, and visual noise.
  3. Check usability: forms, errors, loading/empty states, and navigation.
  4. Check accessibility basics: keyboard, focus order, labels, contrast.
  5. Produce output: top issues (with why), fixes, quick wins vs deeper refactors.

Use detailed checklists in:

B) Designing a new screen/component

Do this when the user asks to design a new page, dialog, component, or flow.

Steps:

  1. Ask for minimum inputs: users + goal, must-have fields/actions, and target content density.
  2. Propose an IA/layout: structure, regions, hierarchy.
  3. Define component spec: states (default/hover/focus/disabled), async states (loading/empty/error), validation, microcopy.
  4. Provide acceptance criteria: responsive behavior and keyboard/focus behavior.

Use system defaults and token guidance in:

Output templates

UI/UX findings template

Use this structure:

  • Summary (1-2 sentences)
  • Top issues (prioritized)
    • Issue: ...
    • Why it matters: ...
    • Fix: ...
  • Accessibility notes
  • Responsive notes
  • Copy/microcopy suggestions

Component spec template

Use this structure:

  • Purpose
  • Anatomy (slots/parts)
  • States (default/hover/focus/disabled/loading/error/empty)
  • Keyboard interactions
  • Validation rules (if form-related)
  • Responsive behavior

Notes

  • Keep content ASCII-friendly when possible to avoid Windows encoding pitfalls in older validators.
  • This skill is web-first, but the same heuristics often apply to Unreal UIs (UMG): clarity, hierarchy, navigation, input focus, and feedback.