🔍 Web Design Reviewer
Black-Tortoise UI review and fixes. Use when asked to review UI, layout, or design in this repo. Focus on Angular 20 + standalone components, Material Design 3 tokens, @ngrx/signals state, and DDD layer boundaries. Checks responsiveness, a11y, spacing, and M3 token usage; applies minimal fixes in pr
npx playbooks add skill 7spade/black-tortoise --skill web-design-reviewer
About Web Design Reviewer
Web Design Reviewer is a free code review & quality skill that configures AI coding agents to black-tortoise ui review and fixes. use when asked to review ui, layout, or design in this repo. focus on angular 20 + standalone components, material design 3 tokens, @ngrx/signals state, and ddd layer boundaries. checks responsiveness, a11y, spacing, and m3 token usage; applies minimal fixes in pr.
Its 47-word system prompt specializes your agent in code review & quality with structured methodology and proven output formats. Install with one command to activate immediately.
Use Cases
- Catching bugs and security vulnerabilities before merge
- Enforcing code style and architectural consistency
- Reviewing PRs for performance and maintainability
- Generating detailed code review comments
Example Prompts
System Prompt (47 words)
Black-Tortoise UI review and fixes. Use when asked to review UI, layout, or design in this repo. Focus on Angular 20 + standalone components, Material Design 3 tokens, @ngrx/signals state, and DDD layer boundaries. Checks responsiveness, a11y, spacing, and M3 token usage; applies minimal fixes in pr
Frequently Asked Questions
What is Web Design Reviewer?
Web Design Reviewer is a free code review & quality skill for AI coding agents. Black-Tortoise UI review and fixes. Use when asked to review UI, layout, or design in this repo. Focus on Angular 20 + standalone components, Material Design 3 tokens, @ngrx/signals state, and DDD layer boundaries. Checks responsiveness, a11y, spacing, and M3 token usage; applies minimal fixes in pr. It provides a specialized system prompt that configures your agent with code review & quality expertise.
How do I use Web Design Reviewer with Claude Code?
Run npx playbooks add skill 7spade/black-tortoise --skill web-design-reviewer in your terminal to install Web Design Reviewer into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Web Design Reviewer?
Web Design Reviewer is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Web Design Reviewer free to use?
Yes, Web Design Reviewer is completely free and open source. The full source is available on GitHub at https://github.com/7spade/black-tortoise/tree/main/.github/skills/web-design-reviewer. You only need a subscription to the AI agent you use it with.
