Patski123/coding-agent-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add examples of design-review workflows

Browse Source 
Include subagent, clash command, CLAUDE.md config exmaple, and design-principles example
This commit is contained in:
Patrick Ellis
2025-08-11 21:21:04 -07:00
parent 4d20615ee6
commit 315defe846
5 changed files with 330 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@@ -1,2 +1,34 @@
# claude-code-workflows
The best workflows and configurations I've developed heavily using Claude Code since the day of it's release. Workflows are based off applied learnings from our AI-native startup.
## 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 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-review/design-principles-example.md) - Sample design principles document for guiding automated reviews
- [Design Review Agent](./design-review/design-review-agent.md) - Agent configuration for automated design reviews
- [Claude.md Snippet](./design-review/design-review-claude-md-snippet.md) - Claude.md configuration snippet for design review integration
- [Slash Command](./design-review/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/@PatrickOakleyEllis)