component-context-scanner

Scanning existing React UI components extracts their design, structure, and architectural patterns. It identifies common sections, CSS class usage, UI patterns like icon+label+value blocks, and layout structures to provide context for generating consistent new components.

Component pattern analysis provides essential architectural context for code generation by extracting design and structural patterns from existing UI elements. This ensures newly generated components maintain consistency with the project's established design system and layout conventions.

Yes, you can scan your design system to detect recurring CSS class names and analyze layout structures. The scanner identifies how components are organized into panels, headers, content, and footers, providing a clear map of your UI architecture.

You scan existing dashboard widgets to extract their common layout and section patterns, such as condition rows and status indicators. This extracted context guides the generation of new widgets so they align with your project's UI architecture and design rules.

Yes, analyzing UI component patterns requires adherence to AGENTS.md rules for AI behavior. This file ensures the scanner operates within your project's specific architectural guidelines and design system constraints during the pattern extraction process.