Style Metadata Guide
Extract and analyze visual design information: Tailwind classes, SCSS modules, animations, color palettes, and layout patterns.
What is Style Metadata?
Style metadata extracts visual and design information from your components, including Tailwind CSS classes, SCSS modules, framer-motion animations, color palettes, spacing patterns, and layout information.
Enable style metadata by setting includeStyle: true in logicstamp_refresh_snapshot.
Enabling Style Metadata
To include style metadata in your bundles, set includeStyle: true when creating a snapshot:
logicstamp_refresh_snapshot({ includeStyle: true })Note: Style metadata adds ~15-20% token overhead. Use logicstamp_compare_modes to see the exact cost impact.
Style Sources
Tailwind CSS
Classes are categorized by type:
- Layout: flex, grid, container, etc.
- Spacing: padding, margin utilities
- Colors: bg-*, text-*, border-* classes
- Typography: text size, font weight
- Borders: border styles, radius
- Effects: shadows, opacity, etc.
Also includes responsive breakpoints used (sm, md, lg, xl, etc.)
SCSS/CSS Modules
Detects and analyzes SCSS modules:
- Module imports
- Selectors and properties
- SCSS features (variables, nesting, mixins)
framer-motion
Detects animation usage:
- Motion components used
- Animation variants
- Gesture handlers
- Viewport animations
Layout Metadata
Layout information includes:
- Layout Type: flex or grid
- Grid Patterns: Column configurations (e.g., "grid-cols-2 md:grid-cols-3")
- Hero Patterns: Detects hero sections (large text + CTA buttons)
- Feature Cards: Identifies grid layouts with card-like elements
- Responsive Breakpoints: Lists all breakpoints used (sm, md, lg, etc.)
Visual Metadata
Visual design information extracted:
- Color Palette: Extracts color classes (bg-*, text-*, border-*)
- Spacing Patterns: Identifies padding and margin utilities used
- Border Radius: Detects rounded corner patterns
- Typography: Extracts text size and font weight classes
Animation Metadata
Animation information includes:
- Animation Library: framer-motion or CSS
- Animation Type: fade-in, slide, etc.
- Trigger Type: inView, hover, click, etc.
When to Use Style Metadata
✓ Use style metadata when:
- User asks about styling, colors, spacing, animations
- Analyzing design systems or visual consistency
- Generating UI components that need to match existing styles
- Understanding layout patterns
- UI/UX discussions with AI
- Frontend code generation
⚠ Skip style metadata when:
- Working on backend logic or API code
- Token budget is limited
- Only need component structure and behavior
- Analyzing non-visual components
Example Usage
USER:
"Analyze my components with style information"
AI → MCP:
logicstamp_refresh_snapshot({ includeStyle: true })AI → MCP:
logicstamp_read_bundle({ snapshotId: "snap_123", bundlePath: "src/components/context.json" })AI:
Provides analysis including component structure (props, state, hooks), visual design (colors, spacing, typography), layout patterns (flex vs grid, responsive breakpoints), and animation usage.
Learn More
Explore comparison workflows, best practices, and troubleshooting guides.