How to Convert href=# Placeholder Links to React Router Link in Stitch-Generated React Components

Use the react-components skill in the stitch-build plugin to transform Stitch HTML into React components, then post-process placeholder anchor tags through the validation pipeline at plugins/stitch-build/skills/react-components/scripts/validate.js to ensure proper React Router Link integration.

The google-labs-code/stitch-skills repository provides a modular Agent Skills framework that automates the workflow from design extraction to code generation. When converting Stitch designs to React applications, the extract-static-html skill captures HTML snapshots containing placeholder links (href="#"), which the react-components skill then transforms into React code that requires conversion to React Router Link components for proper client-side navigation.

Understanding the Stitch HTML Extraction Output

The Stitch design-to-code pipeline begins with the extract-static-html skill located in plugins/stitch-design/skills/extract-static-html/. This skill captures self-contained HTML snapshots from running web applications or design prototypes.

The core implementation in plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts processes the DOM and inlines CSS and images, producing HTML files that preserve the original link structures. When the source contains navigation placeholders or temporary anchor tags with href="#", these attributes remain intact in the generated snapshot, requiring downstream conversion when transforming to React Router-based applications.

To generate a static HTML snapshot that preserves these link structures:

npx skills run stitch::extract-static-html \
  --url http://localhost:3000/dashboard \
  --output ./snapshot.html

Generating React Components from Stitch HTML

The React component generation phase occurs in the stitch-build plugin, specifically through the react-components skill documented in plugins/stitch-build/skills/react-components/SKILL.md. This skill consumes the HTML output from the design phase and generates a complete React component library.

When processing the HTML, the skill creates standard anchor tags (<a href="#">) for navigation elements. To convert these placeholders to React Router Link components, you must run the generation command and then apply post-processing to the output directory:

npx skills run stitch::react-components \
  --project-id 1234567890 \
  --output ./src/components

The generated components follow standard React patterns, making them compatible with React Router's declarative navigation model, but require manual or scripted conversion to replace static anchor tags with Link components from react-router-dom.

Converting Placeholder Links to React Router Links

After generating components with the react-components skill, convert placeholder href="#" links to React Router Link components through the following workflow:

1. Identify placeholder patterns in the generated code, where anchor tags contain href="#" or empty href attributes that indicate navigation placeholders.
2. Replace imports by changing import React from 'react' to include import { Link } from 'react-router-dom' in components containing navigation.
3. Transform anchor tags by replacing <a href="#" ...> with <Link to="/target-path" ...>, preserving any className or styling attributes generated by the Stitch design system.

The validation script at plugins/stitch-build/skills/react-components/scripts/validate.js enforces design token compliance and can be extended to verify that navigation links use proper React Router patterns rather than placeholder hrefs. This script ensures that the final React code matches the design system specifications while supporting proper client-side routing.

Validation and Design Token Compliance

The validation pipeline in plugins/stitch-build/skills/react-components/scripts/validate.js performs automated checks on generated React components to ensure they adhere to Stitch design tokens and coding standards. When converting href="#" placeholders to React Router Links, this validation step confirms that:

• All navigation elements use consistent routing patterns
• Design tokens for colors, spacing, and typography remain intact after component modification
• Generated components maintain the structural integrity required by the DESIGN.md specifications

Run validation after manual conversion to ensure the React components remain compatible with the broader design system defined in your Stitch project.

Summary

• The extract-static-html skill captures HTML snapshots containing placeholder links from Stitch designs, implemented in plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts.
• The react-components skill generates React code from these HTML snapshots, outputting standard anchor tags that require conversion to React Router components.
• Post-process generated components by replacing href="#" anchor tags with React Router Link components to enable proper client-side navigation.
• Use plugins/stitch-build/skills/react-components/scripts/validate.js to verify that modified components maintain design token compliance and routing standards.

Frequently Asked Questions

How does the extract-static-html skill handle existing links?

The extract-static-html skill preserves the original HTML structure, including all anchor tags and their href attributes, as implemented in plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts. The skill creates self-contained HTML files by inlining CSS and resolving image URLs, but does not modify link destinations, leaving placeholder href="#" attributes intact for the downstream React conversion process.

What does the validate.js script check in generated React components?

According to the stitch-build plugin architecture, the validate.js script at plugins/stitch-build/skills/react-components/scripts/validate.js ensures that generated React components match the design tokens and styling specifications from the original Stitch design. The validation script checks for consistent component structure, proper styling attributes, and adherence to the design system standards defined in the project's DESIGN.md file.

Can I customize the React component output before converting links?

Yes, the react-components skill outputs standard React components to the specified directory, allowing you to customize the code before or after converting placeholder links to React Router Links. The modular structure of the stitch-skills repository supports sparse checkouts and selective plugin usage, enabling you to modify the generated components while maintaining compatibility with the Agent Skills execution model via npx skills run.

Which plugin should I install to handle React Router conversion?

Install the stitch-build plugin to access the react-components skill that generates React code from Stitch HTML. The repository's sparse checkout-friendly structure allows you to install only the necessary plugins, though the README warns that design-centric skills and build skills often have cross-plugin dependencies that should be installed together for the complete design-to-code workflow.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}