agent-ui-ux-designer
Expert UI/UX design critic and advisor who provides research-backed, opinionated feedback on interfaces. Pushes back on bad ideas and cites sources.
Summary
This skill transforms Claude Code into an expert UI/UX design critic and advisor, providing research-backed, opinionated feedback on interfaces.
- It helps developers improve design quality by pushing back on bad ideas and citing relevant sources, making it ideal for teams without dedicated designers.
Overview
Opinionated skills shared by @leonardocouy for improving daily work efficiency with Claude Code. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.
Skills follow the Agent Skills format.
๐งญ Quick Navigation
[๐ Installation](#-installation) โข [๐ Available Skills](#-available-skills) โข [๐ค Agents & Commands](#-agents--commands) โข [๐ Skill Structure](#-skill-structure) โข [๐ค Contributing](#-contributing) โข [๐ License](#-license) โข [๐ Links](#-links)
๐ Installation
Quick Install (Recommended)
npx skills add softaworks/agent-toolkitThis method works with multiple AI coding agents (Claude Code, Codex, Cursor, AdaL, etc.)
Register as Plugin Marketplace
Run the following commands in Claude Code:
/plugin marketplace add softaworks/agent-toolkit
/pluginInstall Plugins
Option 1: Via Browse UI
- Switch to Marketplaces tab (use arrow keys or Tab)
- Select agent-toolkit, press Enter
- Browse and select the plugin(s) you want to install
- Select Install now
Option 2: Direct Install
# Install specific skill
/plugin install codex@agent-toolkit
/plugin install humanizer@agent-toolkit
# Install specific agent
/plugin install agent-codebase-pattern-finder@agent-toolkit
# Install specific command
/plugin install command-codex-plan@agent-toolkitOption 3: Ask the Agent
Simply tell Claude Code:
Please install Skills from github.com/softaworks/agent-toolkit
Available Plugins
Each skill, agent, and command is an individual plugin that can be installed separately:
- โขSkills โ See Available Skills for the full list
- โขAgents โ See Agents (install as
agent-<name>@agent-toolkit) - โขCommands โ See Slash Commands (install as
command-<name>@agent-toolkit)
Update Plugins
To update plugins to the latest version:
- Run
/pluginin Claude Code - Switch to Marketplaces tab
- Select agent-toolkit
- Choose Update marketplace
You can also Enable auto-update to get the latest versions automatically.
Manual Installation
For Claude Code (Manual) โ Skills only
cp -r skills/<skill-name> ~/.claude/skills/For claude.ai โ Skills only
Add skills to project knowledge or paste SKILL.md contents into the conversation.
๐ Available Skills
| Category | Skill | Description |
|---|---|---|
| ๐ค AI Tools | codex | Advanced code analysis with GPT-5.2 |
| ๐ค AI Tools | gemini | Large-scale review (200k+ context) |
| ๐ค AI Tools | perplexity | Web search & research |
| ๐ฎ Meta | agent-md-refactor | Refactor bloated agent instruction files |
| ๐ฎ Meta | command-creator | Create Claude Code slash commands |
| ๐ฎ Meta | plugin-forge | Build Claude Code plugins & manifests |
| ๐ฎ Meta | skill-judge | Evaluate skill design quality |
| ๐ Documentation | backend-to-frontend-handoff-docs | API handoff docs for frontend |
| ๐ Documentation | c4-architecture | C4 architecture diagrams with Mermaid |
| ๐ Documentation | crafting-effective-readmes | Write effective README files |
| ๐ Documentation | draw-io | Create & edit draw.io diagrams |
| ๐ Documentation | excalidraw | Work with Excalidraw diagrams |
| ๐ Documentation | frontend-to-backend-requirements | Document API requirements |
| ๐ Documentation | marp-slide | Professional presentation slides |
| ๐ Documentation | mermaid-diagrams | Software diagrams with Mermaid |
| ๐ Documentation | writing-clearly-and-concisely | Clear, professional writing |
| ๐จ Design & Frontend | design-system-starter | Create design systems |
| ๐จ Design & Frontend | mui | Material-UI v7 patterns |
| ๐จ Design & Frontend | openapi-to-typescript | Convert OpenAPI to TypeScript |
| ๐จ Design & Frontend | react-dev | Type-safe React 18-19 with TypeScript |
| ๐จ Design & Frontend | react-useeffect | React useEffect best practices |
| ๐ ๏ธ Development | database-schema-designer | Design robust database schemas |
| ๐ ๏ธ Development | dependency-updater | Smart dependency management |
| ๐ ๏ธ Development | naming-analyzer | Suggest better variable/function names |
| ๐ ๏ธ Development | lesson-learned | Extract SE lessons from recent code changes |
| ๐ ๏ธ Development | reducing-entropy | Minimize codebase size |
| ๐ ๏ธ Development | session-handoff | Seamless AI session transfers |
| ๐ฏ Planning | game-changing-features | Find 10x product opportunities |
| ๐ฏ Planning | gepetto | Detailed implementation planning |
| ๐ฏ Planning | requirements-clarity | Clarify requirements before coding |
| ๐ฏ Planning | ship-learn-next | Turn learning into actionable reps |
| ๐ Professional | daily-meeting-update | Interactive daily standup generator |
| ๐ Professional | difficult-workplace-conversations | Navigate difficult conversations |
| ๐ Professional | feedback-mastery | Deliver constructive feedback |
| ๐ Professional | professional-communication | Technical communication guide |
| ๐งช Testing | qa-test-planner | Comprehensive QA test planning |
| ๐ฆ Git | commit-work | High-quality git commits |
| ๐ง Utilities | datadog-cli | Debug with Datadog logs & metrics |
| ๐ง Utilities | domain-name-brainstormer | Generate & check domain names |
| ๐ง Utilities | humanizer | Remove AI writing patterns |
| ๐ง Utilities | meme-factory | Generate memes with API |
| ๐ง Utilities | jira | Natural language Jira interaction |
| ๐ง Utilities | web-to-markdown | Convert webpages to Markdown |
๐ค Agents & Commands
Requires [Claude Code CLI](https://docs.anthropic.com/claude-code) โ These agents and commands are exclusive to Claude Code users.
For full access, add the marketplace and install plugins:
```bash
/plugin marketplace add softaworks/agent-toolkit
/plugin install codex@agent-toolkit
```
Agents
Specialized sub-agents that Claude Code can delegate tasks to:
| Agent | Description |
|---|---|
| ascii-ui-mockup-generator | Visualize UI concepts through ASCII mockups |
| codebase-pattern-finder | Find similar implementations and patterns |
| communication-excellence-coach | Email refinement, tone calibration, roleplay |
| general-purpose | Default agent for complex multi-step tasks |
| mermaid-diagram-specialist | Create flowcharts, sequence diagrams, ERDs |
| ui-ux-designer | Research-backed UI/UX design feedback |
Slash Commands
Reusable workflows invoked with /command-name:
| Command | Description |
|---|---|
/codex-plan | Create implementation plans using Codex 5.2 |
/compose-email | Draft professional emails |
/explain-changes-mental-model | Build mental model of code changes |
/explain-pr-changes | Generate PR summaries |
/sync-branch | Sync feature branch with main |
/sync-skills-readme | Update README skills table |
/viral-tweet | Optimize tweet ideas for X engagement |
๐ Skill Structure
Each skill contains:
- โข
SKILL.md- Detailed instructions for the agent (with YAML frontmatter) - โข
README.md- User-friendly documentation with examples - โข
scripts/- Helper scripts for automation (optional) - โข
references/- Supporting documentation (optional)
๐ค Contributing
Contributions are welcome! When adding new skills:
- Follow the Agent Skills format
- Include both
SKILL.md(for agents) andREADME.md(for users) - Add YAML frontmatter to
SKILL.mdwithname:anddescription:fields - Update this README.md with a link to your skill
๐ License
MIT
๐ Links
Install & Usage
mkdir -p .claude/agentsAdd the configuration to .claude/agents/agent-ui-ux-designer.md
@agent-ui-ux-designerUse Cases
Usage Examples
/agent-ui-ux-designer review this login page mockup: [attach image or describe layout]
/agent-ui-ux-designer critique our current dashboard design and suggest three improvements with citations
/agent-ui-ux-designer compare these two button styles and recommend which one is better for conversion
Security Audits
Frequently Asked Questions
What is agent-ui-ux-designer?
This skill transforms Claude Code into an expert UI/UX design critic and advisor, providing research-backed, opinionated feedback on interfaces. It helps developers improve design quality by pushing back on bad ideas and citing relevant sources, making it ideal for teams without dedicated designers.
How to install agent-ui-ux-designer?
To install agent-ui-ux-designer: create the agents directory (mkdir -p .claude/agents), then add the config to .claude/agents/agent-ui-ux-designer.md. Finally, @agent-ui-ux-designer in Claude Code.
What is agent-ui-ux-designer best for?
agent-ui-ux-designer is a agent categorized under General. It is designed for: design, agent, agents, ui, ux, feedback. Created by softaworks.
What can I use agent-ui-ux-designer for?
agent-ui-ux-designer is useful for: Get a critical review of a wireframe or mockup to identify usability issues before development.; Receive opinionated feedback on a proposed UI change, with citations from design research.; Evaluate an existing interface against accessibility standards and suggest improvements.; Compare two design alternatives and get a data-driven recommendation on which to implement.; Generate a list of UI improvements for a specific page or component based on UX best practices.; Validate a design decision by asking for research-backed pros and cons..