Style Generation Command

`stamp context style` Command

Generate AI-ready context bundles with style metadata included. Extract visual and layout information from your React components, making context bundles design-aware for AI assistants.

Syntax

stamp context style [path] [options]

[path] (optional) – Directory to scan. Defaults to the current working directory. Paths can be relative (for example, ./src) or absolute.

Note: The stamp context style command is equivalent to stamp context --include-style. Both syntaxes produce identical output.

File Exclusion: The stamp context style command respects .stampignore, just like stamp context. .stampignore is completely optional and independent of security scanning.

Overview

While stamp context focuses on component logic and structure, stamp context style adds visual and layout understanding. This enables AI assistants to:

Understand the visual design of components
Suggest visually consistent components
Analyze layout patterns (flex, grid, responsive breakpoints)
Track color palettes and spacing patterns
Identify animation and motion usage

What It Extracts

The style command analyzes components and extracts four categories of metadata:

1. Style Sources

Identifies which styling approaches are used in each component:

Tailwind CSS

Layout (flex, grid, block, container)
Spacing (padding, margin, gap utilities)
Sizing (width, height, min/max constraints)
Typography (text size, font weight, line height)
Colors (background, text, border colors)
Borders (border styles, radius)
Effects (shadows, opacity, filters)
Transitions and animations
Responsive breakpoints (sm, md, lg, xl, 2xl)

SCSS/CSS Modules

CSS selectors used
CSS properties defined
SCSS features (variables, nesting, mixins)

Inline Styles ✅ v0.3.5

CSS property names extracted
Literal property values extracted (strings, numbers, booleans, null, template literals)
Dynamic values detected as properties but values not extracted (static analysis limitation)

Styled JSX ✅ v0.3.5

Full CSS content extraction from <style jsx> blocks
CSS selector extraction (parsed using css-tree AST)
CSS property extraction
Global attribute detection (<style jsx global>)

styled-components/Emotion

Styled component declarations
Theme usage
CSS prop usage

framer-motion

Motion components (motion.div, motion.button, etc.)
Animation variants
Gesture handlers
Layout animations
Viewport-triggered animations

Material UI

Material UI components used (Button, TextField, Card, etc.)
Material UI packages imported (@mui/material, @material-ui/core, etc.)
Theme usage (useTheme, ThemeProvider, createTheme)
sx prop usage for styling
styled from @mui/material/styles
makeStyles (legacy styling)
System props on Box/Stack components

ShadCN/UI

ShadCN component names and patterns
Component structure (compound components)
Variant system usage
Tailwind classes used with ShadCN components
Form components with React Hook Form
Theme support patterns
Custom component modifications

Radix UI

Radix UI primitives (@radix-ui/* packages)
Component patterns (Dialog, DropdownMenu, Popover, etc.)
Accessibility features
Compound component patterns
Controlled/uncontrolled state patterns
Custom styling applied to Radix primitives
Tailwind integration with Radix

All trademarks and logos are the property of their respective owners. LogicStamp is an independent open-source project and is not affiliated with or endorsed by the listed frameworks.

2. Layout Metadata

Extracts structural layout information:

Layout Type – Identifies flex or grid layouts
Grid Patterns – Extracts 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.)

3. Visual Metadata

Captures visual design patterns:

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

4. Animation Metadata

Identifies animation and motion usage:

Animation Library – framer-motion or CSS
Animation Type – fade-in, slide, etc.
Trigger Type – inView, hover, click, etc.

Options

All options from stamp context are supported. The style command accepts the same flags:

Option	Alias	Default	Description
`--depth <n>`	`-d`	`2`	Dependency traversal depth (`0` = entry only, `1` = direct deps, `2` = nested components, etc.). See context.md for details.
`--include-code <mode>`	`-c`	`header`	Include `none`, `header`, or `full` source snippets.
`--format <fmt>`	`-f`	`json`	Output format: `json`, `pretty`, or `ndjson`.
`--out <file>`	`-o`	`context.json`	Output directory or file path.
`--max-nodes <n>`	`-m`	`100`	Maximum graph nodes per bundle.
`--profile <name>`	—	`llm-chat`	Preset configuration (`llm-chat`, `llm-safe`, `ci-strict`).
`--strict`	`-s`	`false`	Fail when dependencies are missing.
`--dry-run`	—	`false`	Skip writing the output; display summary only.
`--stats`	—	`false`	Emit single-line JSON stats (ideal for CI).
`--skip-gitignore`	—	`false`	Skip `.gitignore` setup (never prompt or modify).
`--quiet`	`-q`	`false`	Suppress verbose output (show only errors).

Example Workflows

# Generate context with style metadata for entire project
stamp context style

# Scan specific directory with style metadata
stamp context style ./src

# Use with conservative profile
stamp context style --profile llm-safe

# Include full source code with style metadata
stamp context style --include-code full

# Custom output directory
stamp context style --out ./output

# Equivalent syntax using flag
stamp context --include-style

Output Format

Style metadata is included in the style field of each component's contract within the context bundle. The structure follows this schema:

{
  "type": "UIFContract",
  "kind": "react:component",
  "entryId": "src/components/HeroSection.tsx",
  "style": {
    "styleSources": {
      "tailwind": {
        "categories": {
          "layout": ["flex", "flex-col", "items-center"],
          "spacing": ["py-16", "px-8", "gap-4"],
          "colors": ["bg-black", "text-white", "bg-purple-500"],
          "typography": ["text-4xl", "font-semibold", "leading-tight"],
          "borders": ["rounded-xl", "border-2"],
          "effects": ["shadow-lg", "opacity-90"]
        },
        "breakpoints": ["md", "lg"],
        "classCount": 15
      },
      "scssModule": "./HeroSection.module.scss",
      "scssDetails": {
        "selectors": [".hero", ".title", ".cta"],
        "properties": ["background", "padding", "margin"],
        "features": {
          "variables": true,
          "nesting": true
        }
      },
      "motion": {
        "components": ["div"],
        "variants": ["fadeIn", "slideUp"],
        "features": {
          "gestures": true,
          "viewportAnimations": true
        }
      },
      "materialUI": {
        "components": ["Button", "TextField", "Card"],
        "packages": ["@mui/material", "@mui/icons-material"],
        "features": {
          "usesTheme": true,
          "usesSxProp": true,
          "usesSystemProps": true
        }
      },
      "shadcn": {
        "components": ["Button", "Card", "Dialog"],
        "variants": {
          "Button": ["default", "destructive", "outline"],
          "Card": ["custom-variant"]
        },
        "features": {
          "usesForms": true,
          "usesTheme": true
        }
      },
      "radix": {
        "packages": ["@radix-ui/react-dialog", "@radix-ui/react-dropdown-menu"],
        "components": ["Dialog", "DialogTrigger", "DialogContent", "DropdownMenu"],
        "features": {
          "accessibility": true,
          "compoundComponents": true
        }
      }
    },
    "layout": {
      "type": "flex",
      "hasHeroPattern": true,
      "hasFeatureCards": false
    },
    "visual": {
      "colors": ["bg-black", "text-white", "bg-purple-500"],
      "spacing": ["py-16", "px-8", "gap-4"],
      "radius": "xl",
      "typography": ["text-4xl", "font-semibold", "leading-tight"]
    },
    "animation": {
      "library": "framer-motion",
      "type": "fade-in",
      "trigger": "inView"
    }
  }
}

styleSources

Object containing detected styling approaches:

tailwind – Object with categorized classes, breakpoints, and class count
scssModule / cssModule – Path to module file (if imported)
scssDetails / cssDetails – Parsed details from style files
inlineStyles – Can be boolean (legacy) or object with properties (array) and values (record of property-value pairs) ✅ v0.3.5
styledJsx – Object with css (extracted CSS content), global (boolean), selectors (array), and properties (array) ✅ v0.3.5
styledComponents – Object with component names and theme usage
motion – Object with framer-motion components and features
materialUI – Object with Material UI components, packages, and styling features
shadcn – Object with ShadCN/UI components, variants, and features
radix – Object with Radix UI packages, components, and accessibility features

layout

Layout structure information:

type – "flex" or "grid"
cols – Grid column pattern (e.g., "grid-cols-2 md:grid-cols-3")
hasHeroPattern – Boolean indicating hero section pattern
hasFeatureCards – Boolean indicating feature card grid pattern

visual

Visual design patterns:

colors – Array of color utility classes (sorted, limited to top 10)
spacing – Array of spacing utility classes (sorted, limited to top 10)
radius – Most common border radius pattern
typography – Array of typography classes (sorted, limited to top 10)

animation

Animation and motion information:

library – "framer-motion" or "css"
type – Animation type (e.g., "fade-in")
trigger – Trigger type (e.g., "inView", "hover")

Note: Style metadata is only included when style information is detected. Components without style usage will not have a style field.

Use Cases

Design System Analysis

Understand visual patterns across your codebase:

stamp context style --out design-analysis.json

Then analyze the output to track color palette usage, identify spacing pattern consistency, find components using similar layout patterns, and detect animation usage patterns.

AI-Assisted Design

Enable AI assistants to suggest visually consistent components:

# Generate style-aware context
stamp context style

# Share with AI assistant
# AI can now suggest components that match your design system

Layout Understanding

Help AI understand component structure:

stamp context style --include-code header

AI assistants can now understand flex vs grid layouts, recognize responsive breakpoint usage, identify hero sections and feature card grids, and suggest layout improvements.

Animation Detection

Identify components with motion:

stamp context style

The output helps you find all components using framer-motion, track animation patterns across the codebase, identify viewport-triggered animations, and understand gesture handler usage.

Style Consistency

Track design system adherence:

stamp context style --stats

Use the output to verify color palette consistency, check spacing pattern usage, ensure typography scale adherence, and monitor border radius patterns.

Integration with Other Commands

Validation

Style metadata is validated along with the rest of the context:

stamp context style
stamp context validate

Comparison

Style metadata is included in drift detection:

stamp context style --out old/
# ... make changes ...
stamp context style --out new/
stamp context compare old/context_main.json new/context_main.json

The compare command will detect changes in style sources (added/removed Tailwind classes, etc.), layout patterns, visual metadata, and animation configurations.

Token Impact

Style metadata adds a small token overhead to context bundles. Use stamp context --compare-modes to see the token impact across different modes.

The --compare-modes flag automatically regenerates contracts with and without style metadata to provide accurate token counts. This shows you:

Exact token overhead of including style metadata (header vs header+style)
Comparison across all modes – none, header, header+style, and full
Savings percentages compared to both raw source and full context

See COMPARE-MODES.md for a comprehensive guide to token cost analysis and mode comparison.

Tips

Start with default – The default header code mode works well for most use cases
Use profiles – Combine with --profile llm-safe for token-constrained scenarios
Incremental updates – Style metadata is included in folder-based context files, enabling incremental regeneration
CI integration – Use --stats to track style metadata size in CI pipelines
Design reviews – Generate style context before design system reviews to understand current patterns

Limitations

Dynamic classes – Classes generated dynamically (e.g., className={clsx(...)}) may not be fully detected
CSS-in-JS – Only styled-components, emotion, and Material UI styled are detected; other CSS-in-JS libraries may not be recognized
External stylesheets – Global CSS files are not analyzed; only module imports are parsed
Runtime styles – Styles applied via JavaScript at runtime are not detected

Examples

Basic Usage

$ stamp context style

🔍 Scanning /path/to/project...
⚙️  Analyzing components...
🎨 Extracting style metadata...
🔗 Building dependency graph...
📦 Generating context...
✅ Context generated with style metadata

📊 Summary:
   Total components: 15
   Components with style: 12
   Style sources detected:
     - Tailwind: 10 components
     - SCSS modules: 3 components
     - framer-motion: 2 components
     - Material UI: 5 components
     - ShadCN/UI: 4 components
     - Radix UI: 3 components

With Custom Options

$ stamp context style ./src --profile llm-safe --out ./style-context

🔍 Scanning ./src...
⚙️  Analyzing components...
🎨 Extracting style metadata...
...
✅ Context generated with style metadata

Next Steps

Learn how to use it with LLMs or explore watch mode for automatic updates, including style metadata.

Usage Guide Watch Mode GitHub Repository

stamp context style Command