Component Analysis
Component Analysis Skill
This skill provides intelligent codebase analysis for component creation. It prevents duplication, suggests architectural improvements, and identifies reusable subcomponents.
When to Activate
Activate this skill when:
- Creating a new component
- User describes a UI element they need
- Analyzing a Figma design
- Planning component architecture
- Deciding between new component vs variant
Analysis Steps
1. Component Existence Check — Deep Discovery
Build a Component Capability Map by scanning the entire component library:
More from ankish8/storybook-npm
storybook generator
Generates comprehensive Storybook stories following the Button/AlertConfiguration pattern with installation instructions, design tokens table, typography table, and usage examples. Activate when creating component documentation.
26design system validator
Ensures CSS variables are used instead of hardcoded colors, validates semantic tokens, checks responsive design patterns, and enforces design system consistency. Activate when creating or validating components.
20myoperator-design
Create UIs matching the myOperator design system. Use this skill when the user asks to "build with myoperator design", "create myoperator-style UI", "use myoperator design system", "myoperator dashboard", "myoperator page", or asks for interfaces, pages, dashboards, or components that should follow myOperator's visual language. Generates standalone React/Tailwind code with the design system's color tokens, typography, and component patterns.
20