ux-webapp

🥈Silver

@altock

Claude UX skill plugin for web app usability audits, accessibility checks, and design specs

600Updated Today

Intermediate30min to implementautomation

Saves ~60 min per use

Quick InstallView Source

git clone https://github.com/altock/ux-webapp.git

Works with:

Claude

Overview

About This Skill

Claude UX skill plugin for web app usability audits, accessibility checks, and design specs

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/altock/ux-webapp

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Conduct a UX audit for a [COMPANY] web app in the [INDUSTRY] sector. Focus on accessibility, usability, and design consistency. Provide actionable recommendations based on [DATA] from user testing and analytics.

Example Output

## UX Audit Report for [Company] Web App

### Accessibility Findings
- **Color Contrast Issues**: Several buttons and text elements fail WCAG AA contrast standards. Recommend adjusting colors to meet #454545 on #FFFFFF for better readability.
- **Keyboard Navigation**: Some interactive elements are not reachable via keyboard. Ensure all clickable elements are focusable and operable via keyboard.

### Usability Recommendations
- **Navigation Clarity**: The main menu is overly complex. Simplify to 5 primary categories based on user testing data.
- **Form Optimization**: Reduce form fields from 12 to 8 by combining related inputs and using smart defaults.

### Design Consistency
- **Button Styles**: Standardize button styles across the app. Use primary, secondary, and tertiary styles consistently.
- **Typography**: Ensure consistent font sizes and weights. Use 16px for body text and 20px for headings.