component-context-scanner

Name: component-context-scanner
Availability: InStock
Author: ciabatos

Scan React UI components to extract design and architectural patterns.

Updated Feb 15, 2025

Search Tags:#react #design system #ui components #pattern analysis #code generation context #architecture scanner

Ready to run

npx skills add https://github.com/Ciabatos/sybath --skill component-context-scanner

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-context-scanner
Source: https://github.com/Ciabatos/sybath/tree/main/.opencode/skills/component-context-scanner
Command: npx skills add https://github.com/Ciabatos/sybath --skill component-context-scanner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill analyzes existing UI components to extract design, structure, and architectural patterns, providing essential context for generating new, consistent UI elements.

Core Features & Use Cases

Component Structure Analysis: Identifies common sections within components (header, section, conditions, actions, etc.).
CSS Pattern Extraction: Detects recurring class names and their usage.
UI Pattern Recognition: Pinpoints design patterns like condition rows, icon+label+value blocks, and status indicators.
Layout Analysis: Determines how components are structured (panel, header, content, footer).
Use Case: Before building a new dashboard widget, use this Skill to scan existing widgets and understand their common layout and section patterns, ensuring the new widget aligns with the project's design system.

Quick Start

Scan the project's UI components to extract design and architectural patterns.

Frequently Asked Questions about component-context-scanner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract design patterns from existing React UI components?▼

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.

What is component pattern analysis used for in code generation?▼

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.

Can I use this to analyze CSS class patterns and layout structures in my design system?▼

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.

How do I scan existing dashboard widgets to ensure new widgets match my 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.

Do I need an AGENTS.md file to analyze UI component patterns?▼

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.