BeClaude

agent-ui-ux-designer

2kCommunity RegistryGeneralby softaworks

Expert UI/UX design critic and advisor who provides research-backed, opinionated feedback on interfaces. Pushes back on bad ideas and cites sources.

Community PluginView Source

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)

bash
npx skills add softaworks/agent-toolkit

This method works with multiple AI coding agents (Claude Code, Codex, Cursor, AdaL, etc.)

Register as Plugin Marketplace

Run the following commands in Claude Code:

bash
/plugin marketplace add softaworks/agent-toolkit
/plugin

Install Plugins

Option 1: Via Browse UI

  1. Switch to Marketplaces tab (use arrow keys or Tab)
  2. Select agent-toolkit, press Enter
  3. Browse and select the plugin(s) you want to install
  4. Select Install now

Option 2: Direct Install

bash
# 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-toolkit

Option 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:

  1. Run /plugin in Claude Code
  2. Switch to Marketplaces tab
  3. Select agent-toolkit
  4. Choose Update marketplace

You can also Enable auto-update to get the latest versions automatically.

Manual Installation

For Claude Code (Manual) โ€” Skills only

bash
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

CategorySkillDescription
๐Ÿค– AI ToolscodexAdvanced code analysis with GPT-5.2
๐Ÿค– AI ToolsgeminiLarge-scale review (200k+ context)
๐Ÿค– AI ToolsperplexityWeb search & research
๐Ÿ”ฎ Metaagent-md-refactorRefactor bloated agent instruction files
๐Ÿ”ฎ Metacommand-creatorCreate Claude Code slash commands
๐Ÿ”ฎ Metaplugin-forgeBuild Claude Code plugins & manifests
๐Ÿ”ฎ Metaskill-judgeEvaluate skill design quality
๐Ÿ“ Documentationbackend-to-frontend-handoff-docsAPI handoff docs for frontend
๐Ÿ“ Documentationc4-architectureC4 architecture diagrams with Mermaid
๐Ÿ“ Documentationcrafting-effective-readmesWrite effective README files
๐Ÿ“ Documentationdraw-ioCreate & edit draw.io diagrams
๐Ÿ“ DocumentationexcalidrawWork with Excalidraw diagrams
๐Ÿ“ Documentationfrontend-to-backend-requirementsDocument API requirements
๐Ÿ“ Documentationmarp-slideProfessional presentation slides
๐Ÿ“ Documentationmermaid-diagramsSoftware diagrams with Mermaid
๐Ÿ“ Documentationwriting-clearly-and-conciselyClear, professional writing
๐ŸŽจ Design & Frontenddesign-system-starterCreate design systems
๐ŸŽจ Design & FrontendmuiMaterial-UI v7 patterns
๐ŸŽจ Design & Frontendopenapi-to-typescriptConvert OpenAPI to TypeScript
๐ŸŽจ Design & Frontendreact-devType-safe React 18-19 with TypeScript
๐ŸŽจ Design & Frontendreact-useeffectReact useEffect best practices
๐Ÿ› ๏ธ Developmentdatabase-schema-designerDesign robust database schemas
๐Ÿ› ๏ธ Developmentdependency-updaterSmart dependency management
๐Ÿ› ๏ธ Developmentnaming-analyzerSuggest better variable/function names
๐Ÿ› ๏ธ Developmentlesson-learnedExtract SE lessons from recent code changes
๐Ÿ› ๏ธ Developmentreducing-entropyMinimize codebase size
๐Ÿ› ๏ธ Developmentsession-handoffSeamless AI session transfers
๐ŸŽฏ Planninggame-changing-featuresFind 10x product opportunities
๐ŸŽฏ PlanninggepettoDetailed implementation planning
๐ŸŽฏ Planningrequirements-clarityClarify requirements before coding
๐ŸŽฏ Planningship-learn-nextTurn learning into actionable reps
๐Ÿ‘” Professionaldaily-meeting-updateInteractive daily standup generator
๐Ÿ‘” Professionaldifficult-workplace-conversationsNavigate difficult conversations
๐Ÿ‘” Professionalfeedback-masteryDeliver constructive feedback
๐Ÿ‘” Professionalprofessional-communicationTechnical communication guide
๐Ÿงช Testingqa-test-plannerComprehensive QA test planning
๐Ÿ“ฆ Gitcommit-workHigh-quality git commits
๐Ÿ”ง Utilitiesdatadog-cliDebug with Datadog logs & metrics
๐Ÿ”ง Utilitiesdomain-name-brainstormerGenerate & check domain names
๐Ÿ”ง UtilitieshumanizerRemove AI writing patterns
๐Ÿ”ง Utilitiesmeme-factoryGenerate memes with API
๐Ÿ”ง UtilitiesjiraNatural language Jira interaction
๐Ÿ”ง Utilitiesweb-to-markdownConvert 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:

AgentDescription
ascii-ui-mockup-generatorVisualize UI concepts through ASCII mockups
codebase-pattern-finderFind similar implementations and patterns
communication-excellence-coachEmail refinement, tone calibration, roleplay
general-purposeDefault agent for complex multi-step tasks
mermaid-diagram-specialistCreate flowcharts, sequence diagrams, ERDs
ui-ux-designerResearch-backed UI/UX design feedback

Slash Commands

Reusable workflows invoked with /command-name:

CommandDescription
/codex-planCreate implementation plans using Codex 5.2
/compose-emailDraft professional emails
/explain-changes-mental-modelBuild mental model of code changes
/explain-pr-changesGenerate PR summaries
/sync-branchSync feature branch with main
/sync-skills-readmeUpdate README skills table
/viral-tweetOptimize 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:

  1. Follow the Agent Skills format
  2. Include both SKILL.md (for agents) and README.md (for users)
  3. Add YAML frontmatter to SKILL.md with name: and description: fields
  4. Update this README.md with a link to your skill

๐Ÿ“„ License

MIT


๐Ÿ”— Links

Install & Usage

1
Create the skills directory
mkdir -p .claude/skills
2
Download the skill file
mkdir -p .claude/skills && curl -o .claude/skills/agent-ui-ux-designer.md https://raw.githubusercontent.com/softaworks/agent-toolkit/main/SKILL.md
3
Invoke in Claude Code
/agent-ui-ux-designer
View source on GitHub
designagentagentsuiuxfeedback

Frequently Asked Questions

What is 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.

How to install agent-ui-ux-designer?

To install agent-ui-ux-designer, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /agent-ui-ux-designer.

What is agent-ui-ux-designer best for?

agent-ui-ux-designer is a community categorized under General. It is designed for: design, agent, agents, ui, ux, feedback. Created by softaworks.