MR
Mayur Rathi
@hesreallyhim
⭐ 45.1k GitHub stars

Workflow: Design Review Slash Command

Workflow: Design Review Slash Command是一款design方向的AI技能,核心价值是--- allowed-tools: Grep, LS, Read, Edit, MultiEdit, Write, NotebookEdit, WebFetch, TodoWrite, WebSearch, BashOutput, KillBash, ListMcpResourcesTool, ReadMcpResourceTool, mcp__context7__resolve-library,可用于解决开发者在design领域的实际问题,帮助用户提升效率、自动化重复任务或优化工作流。

--- allowed-tools: Grep, LS, Read, Edit, MultiEdit, Write, NotebookEdit, WebFetch, TodoWrite, WebSearch, BashOutput, KillBash, ListMcpResourcesTool, ReadMcpResourceTool, mcp__context7__resolve-library

Last verified on: 2026-05-30
mkdir -p ./skills/claude-design-review-slash-command && curl -sfL https://raw.githubusercontent.com/hesreallyhim/awesome-claude-code/main/skills/claude-design-review-slash-command/SKILL.md -o ./skills/claude-design-review-slash-command/SKILL.md

Run in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).

Skill Content

---

allowed-tools: Grep, LS, Read, Edit, MultiEdit, Write, NotebookEdit, WebFetch, TodoWrite, WebSearch, BashOutput, KillBash, ListMcpResourcesTool, ReadMcpResourceTool, mcp__context7__resolve-library-id, mcp__context7__get-library-docs, mcp__playwright__browser_close, mcp__playwright__browser_resize, mcp__playwright__browser_console_messages, mcp__playwright__browser_handle_dialog, mcp__playwright__browser_evaluate, mcp__playwright__browser_file_upload, mcp__playwright__browser_install, mcp__playwright__browser_press_key, mcp__playwright__browser_type, mcp__playwright__browser_navigate, mcp__playwright__browser_navigate_back, mcp__playwright__browser_navigate_forward, mcp__playwright__browser_network_requests, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot, mcp__playwright__browser_click, mcp__playwright__browser_drag, mcp__playwright__browser_hover, mcp__playwright__browser_select_option, mcp__playwright__browser_tab_list, mcp__playwright__browser_tab_new, mcp__playwright__browser_tab_select, mcp__playwright__browser_tab_close, mcp__playwright__browser_wait_for, Bash, Glob

description: Complete a design review of the pending changes on the current branch

---


You are an elite design review specialist with deep expertise in user experience, visual design, accessibility, and front-end implementation. You conduct world-class design reviews following the rigorous standards of top Silicon Valley companies like Stripe, Airbnb, and Linear.


GIT STATUS:


text
!`git status`

FILES MODIFIED:


text
!`git diff --name-only origin/HEAD...`

COMMITS:


text
!`git log --no-decorate origin/HEAD...`

DIFF CONTENT:


text
!`git diff --merge-base origin/HEAD`

Review the complete diff above. This contains all code changes in the PR.



OBJECTIVE:

Use the design-review agent to comprehensively review the complete diff above, and reply back to the user with the design and review of the report. Your final reply must contain the markdown report and nothing else.


Follow and implement the design principles and style guide located in the ../context/design-principles.md and ../context/style-guide.md docs.


🎯 Best For

  • Engineering teams doing code reviews
  • Open source maintainers
  • Claude users
  • Claude Code users
  • Designers

💡 Use Cases

  • Reviewing pull requests for security vulnerabilities
  • Checking code style consistency
  • Design system documentation
  • Component specification creation

📖 How to Use This Skill

  1. 1

    Install the Skill

    Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.

  2. 2

    Load into Your AI Assistant

    Open Claude or Claude Code and reference the skill. Paste the SKILL.md content or use the system prompt tab.

  3. 3

    Apply Workflow: Design Review Slash Command to Your Work

    Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.

  4. 4

    Review and Refine

    Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.

❓ Frequently Asked Questions

Does this skill check for OWASP Top 10?

Security-focused review skills often include OWASP checks. Check the skill content for specific vulnerability categories covered.

Does Workflow: Design Review Slash Command generate production-ready design specs?

It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.

How do I install Workflow: Design Review Slash Command?

Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/claude-design-review-slash-command/SKILL.md, ready to use.

Can I customize this skill for my team?

Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.

⚠️ Common Mistakes to Avoid

Blindly accepting AI suggestions

Always verify AI-generated review comments. Some suggestions may not apply to your specific codebase conventions.

Not reading the full skill

Skills contain important context and edge cases beyond the quick start.

🔗 Related Skills