Skip to content

sfnext-analyze-component.md

Latest commit

 

History

History
94 lines (64 loc) · 4.47 KB

sfnext-analyze-component.md

File metadata and controls

94 lines (64 loc) · 4.47 KB
description Analyze design and discovered components to recommend REUSE, EXTEND, or CREATE strategy.

sfnext_analyze_component

Analyzes design and discovered components to recommend a component generation strategy. Returns a REUSE, EXTEND, or CREATE action with confidence score, key differences, and suggested implementation approach.

Note: 🚧 This MCP tool is for Storefront Next. Storefront Next is part of a closed pilot and isn't available for general use.

Overview

The sfnext_analyze_component tool compares design React code (e.g., from Figma, design handoff, or other sources) against existing components discovered in the codebase. It analyzes differences across styling, structure, behavior, and props, then recommends the best approach:

  • REUSE: Use existing component with props or minor styling adjustments
  • EXTEND: Extend existing component via props, variant, or composition pattern
  • CREATE: Create a new component (reference existing patterns if applicable)

Workflow position: Call this tool after retrieving design data and discovering similar components. It is a required step in the Figma-to-component workflow.

This tool is part of the STOREFRONTNEXT toolset.

Prerequisites

  • Design React code (from Figma MCP, design handoff, or other sources)
  • Component discovery performed before calling
  • Storefront Next project

See Figma-to-Component Tools Setup for complete prerequisites and configuration.

Parameters

Parameter Type Required Description
figmaMetadata string Yes JSON string containing design metadata (from Figma MCP or empty). Can be empty string if metadata was not fetched.
figmaCode string Yes React code from design (e.g., from Figma mcp__figma__get_design_context, or design handoff).
componentName string Yes Suggested name for the component extracted from the design.
discoveredComponents array Yes Array of similar components discovered using Glob/Grep/Read. Pass empty array if no similar components found.
workspacePath string No Optional workspace root path. Defaults to the MCP server project directory.

Discovered Component Schema

Each item in discoveredComponents must have:

Field Type Description
path string Absolute file path to the component
name string Component name
similarity number Similarity score (0–100)
matchType string One of 'name', 'structure', 'visual'
code string Full source code of the component

Usage Examples

With Figma design URL

I have a Figma design at [URL]. Use the MCP tool to fetch the design code, search the codebase for similar components, then analyze and recommend whether to reuse, extend, or create a component.

With design code already fetched

Use the MCP tool to analyze this design and recommend reuse, extend, or create. Design code: [paste React/JSX from Figma or design handoff]. Search the codebase for similar components first, then call the tool with the discovered components.

Agent workflow note

When the agent searches the codebase and finds no similar components, it should still call the tool with discoveredComponents: [] to get a CREATE recommendation. The user does not need to specify this—the agent discovers it during the workflow.

Output

Returns a formatted recommendation including:

  • Decision: REUSE, EXTEND, or CREATE
  • Confidence: Percentage (0–100)
  • Matched Component: Path, name, similarity (if applicable)
  • Key Differences: List of difference descriptions
  • Suggested Approach: Implementation guidance
  • Next Steps: Action-specific instructions

Related Tools

See Also