ux-webapp
🥈SilverProfessional UX tooling for Claude that automates audits, accessibility checks, design specs, and usability testing with structured workflows and templates.
600Updated 2mo ago
Intermediate30min to implementautomation
Saves ~60 min per use
Quick InstallView Source
git clone https://github.com/altock/ux-webapp.gitWorks with:
Claude
Overview
About This Skill
The UX Skill for Claude is a knowledge-based tooling plugin that equips Claude with structured workflows, reference materials, and templates for professional UX work. It enables UX audits using Nielsen's heuristics, accessibility reviews against WCAG 2.2 AA standards, design specification generation with acceptance criteria, and usability test planning. The skill includes pre-built checklists for forms, accessibility, navigation, and responsive design, plus output templates for audit reports and implementation specs. Designers, product managers, and developers use it to systematize UX validation, catch usability issues early, and document design requirements within their Claude-powered workflows.
How to Use
Install via the plugin marketplace with '/plugin marketplace add altock/ux-webapp' and '/plugin install ux-webapp', or manually copy the .claude/skills/ux-webapp/ directory to your project's .claude/skills/ folder. Once installed, Claude can access Nielsen heuristics, checklists, and templates to conduct audits, create design specs, and plan usability tests.
Use Cases
Conduct structured UX audits on web applications using Nielsen heuristics
Generate accessibility compliance reports against WCAG 2.2 AA standards
Create design specifications with acceptance criteria for developers
Plan and document usability testing protocols
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-webappRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
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.
Apply to these tools
Browse all toolsClaude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Drata
Automate security compliance and monitor real-time security posture seamlessly.
GPT for work
Automate your spreadsheet tasks with AI power
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan