component-context-scanner
CommunityAnalyze UI components for patterns.
Software Engineering#react#design system#ui components#pattern analysis#code generation context#architecture scanner
AuthorCiabatos
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: component-context-scanner Download link: https://github.com/Ciabatos/sybath/archive/main.zip#component-context-scanner Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.