visual-layout-builder

Debug canvas layout issues, grid positioning problems, and component overlap. Use when troubleshooting Konva canvas rendering, grid constraints, snap-to-grid behavior, or visual layout mismatches. Includes Canvas→CSS Grid conversion debugging.

Review code for Visual Layout Builder quality standards including TypeScript patterns, React 2025 best practices, accessibility, and performance. Use when reviewing PRs, checking code quality, or ensuring compliance with project conventions.

Write comprehensive unit tests for Visual Layout Builder using Vitest. Use when creating tests for lib/ functions, schema validation, canvas utilities, or any business logic. Follows AAA pattern and project testing conventions.

Develop and optimize AI prompt strategies for code generation. Use when creating new AI model strategies, optimizing prompts for Claude/GPT/Gemini/DeepSeek/Grok, or improving prompt quality. Includes model-specific optimization techniques.

Create and modify Visual Layout Builder schema components, breakpoints, and layouts. Use when working with types/schema.ts, creating new components, adding breakpoints, or modifying layout configurations. Helps ensure Component Independence architecture compliance.