Patski123/coding-agent-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
coding-agent-examples/design-review/design-review-claude-md-snippet.md
Patrick Ellis 315defe846 Add examples of design-review workflows 
Include subagent, clash command, CLAUDE.md config exmaple, and design-principles example
2025-08-11 21:21:04 -07:00

1.3 KiB
Raw Permalink Blame History

Visual Development

Design Principles

  • Comprehensive design checklist in /context/design-principles.md
  • Brand style guide in /context/style-guide.md
  • When making visual (front-end, UI/UX) changes, always refer to these files for guidance

Quick Visual Check

IMMEDIATELY after implementing any front-end change:

  1. Identify what changed - Review the modified components/pages
  2. Navigate to affected pages - Use mcp__playwright__browser_navigate to visit each changed view
  3. Verify design compliance - Compare against /context/design-principles.md and /context/style-guide.md
  4. Validate feature implementation - Ensure the change fulfills the user's specific request
  5. Check acceptance criteria - Review any provided context files or requirements
  6. Capture evidence - Take full page screenshot at desktop viewport (1440px) of each changed view
  7. Check for errors - Run mcp__playwright__browser_console_messages

This verification ensures changes meet design standards and user requirements.

Comprehensive Design Review

Invoke the @agent-design-review subagent for thorough design validation when:

  • Completing significant UI/UX features
  • Before finalizing PRs with visual changes
  • Needing comprehensive accessibility and responsiveness testing