Workflow: Readme
Workflow: Readme是一款code方向的AI技能，核心价值是# Design Review Workflow This directory contains templates and examples for implementing an automated design review system that provides feedback on front-end code changes with design implications，可用于解决开发者在code领域的实际问题，帮助用户提升效率、自动化重复任务或优化工作流。
# Design Review Workflow This directory contains templates and examples for implementing an automated design review system that provides feedback on front-end code changes with design implications. T
mkdir -p ./skills/claude-readme && curl -sfL https://raw.githubusercontent.com/hesreallyhim/awesome-claude-code/main/skills/claude-readme/SKILL.md -o ./skills/claude-readme/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# Design Review Workflow
This directory contains templates and examples for implementing an automated design review system that provides feedback on front-end code changes with design implications. This workflow allows engineers to automatically run design reviews on pull requests or working changes, ensuring design consistency and quality throughout the development process.
Concept
This workflow establishes a comprehensive methodology for automated design reviews in Claude Code, leveraging multiple advanced features to ensure world-class UI/UX standards in your codebase:
**Core Methodology:**
- **Automated Design Reviews**: Trigger comprehensive design assessments either automatically on PRs or on-demand via slash commands
- **Live Environment Testing**: Uses [Playwright MCP](https://github.com/microsoft/playwright-mcp) server integration to interact with and test actual UI components in real-time, not just static code analysis
- **Standards-Based Evaluation**: Follows rigorous design principles inspired by top-tier companies (Stripe, Airbnb, Linear), covering visual hierarchy, accessibility (WCAG AA+), responsive design, and interaction patterns
**Implementation Features:**
- **Claude Code Subagents**: Deploy specialized design review agents with pre-configured tools and prompts for consistent, thorough reviews, by taging `@agent-code-reviewer`
- **Slash Commands**: Enable instant design reviews with `/design-review` that automatically analyzes git diffs and provides structured feedback
- **CLAUDE.md Memory Integration**: Store design principles and brand guidelines in your project's CLAUDE.md file, ensuring Claude Code always references your specific design system
- **Multi-Phase Review Process**: Systematic evaluation covering interaction flows, responsiveness, visual polish, accessibility, robustness testing, and code health
This approach transforms design reviews from manual, subjective processes into automated, objective assessments that maintain consistency across your entire frontend development workflow.
Resources
Templates & Examples
- [Design Principles Example](./design-principles-example.md) - Sample design principles document for guiding automated reviews
- [Design Review Agent](./design-review-agent.md) - Agent configuration for automated design reviews
- [Claude.md Snippet](./design-review-claude-md-snippet.md) - Claude.md configuration snippet for design review integration
- [Slash Command](./design-review-slash-command.md) - Custom slash command implementation for on-demand design reviews
Video Tutorial
For a detailed walkthrough of this workflow, watch the comprehensive tutorial on YouTube: [Patrick Ellis' Channel](https://www.youtube.com/watch?v=xOO8Wt_i72s)
🎯 Best For
- Engineering teams doing code reviews
- Open source maintainers
- Claude users
- Claude Code users
- Software engineers
💡 Use Cases
- Reviewing pull requests for security vulnerabilities
- Checking code style consistency
- Code quality improvement
- Best practice enforcement
📖 How to Use This Skill
- 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
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
Apply Workflow: Readme to Your Work
Open your project in the AI assistant and ask it to apply the skill. Start with a small module to verify the output quality.
- 4
Review and Refine
Review AI suggestions before committing. Run tests, check for regressions, and iterate on the skill output.
❓ 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.
Is Workflow: Readme compatible with Cursor and VS Code?
Yes — this skill works with any AI coding assistant including Cursor, VS Code with Copilot, and JetBrains IDEs.
Do I need specific dependencies for Workflow: Readme?
Check the install command and Works With section. Most code skills only require the AI assistant and your codebase.
How do I install Workflow: Readme?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/claude-readme/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.
Skipping validation
Always test AI-generated code changes, even for simple refactors.
Missing dependency updates
Check if the skill requires updated dependencies or new packages.