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

> Convert Stitch HTML href=# placeholder links to React Router Link using the react-components skill in stitch-build. Ensure seamless navigation in your React applications.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: tutorial
- Published: 2026-07-16

---

**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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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:

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/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:

```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/validate.js) script at [`plugins/stitch-build/skills/react-components/scripts/validate.js`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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.