agentsclimarketplace

Web ui ux

Skill ssdeanx/AI-Skills/skills/web-ui-ux

Claude Skills, Modular, self-contained "Skills" that extend AI capabilities with specialized knowledge, workflows, and tool integrations. Github Copilot, Opencode compatible

Install
npx -y skills add ssdeanx/AI-Skills --skill web-ui-ux

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.9 KB, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.