diff --git a/README.md b/README.md index 946d95f..79021e8 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,13 @@ -# 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. +# 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 +Workflows are covered in detail with tutorials and demos on [Patrick Ellis' YouTube channel](https://www.youtube.com/@PatrickOakleyEllis). -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. +## Workflows -### Concept +### [Design Review Workflow](./design-review/) +An automated design review system that provides comprehensive feedback on front-end code changes. This workflow uses Playwright browser automation and specialized Claude Code agents to ensure UI/UX consistency, accessibility compliance, and adherence to world-class design standards. Perfect for maintaining design quality across teams and catching visual issues before they reach production. -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) +*More workflows coming soon...* diff --git a/design-review/README.md b/design-review/README.md new file mode 100644 index 0000000..d28e3d3 --- /dev/null +++ b/design-review/README.md @@ -0,0 +1,31 @@ +# 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-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/@PatrickOakleyEllis) \ No newline at end of file