[TEST][Project Solar / Phase 1 / Components] Carbonization instructions

[dchyun]

Note

Contains testing commits that are not intended to be merged

📌 Summary

This PR is a testing effort for using a Bob script for the carbonization of HDS components. The three primary steps in carbonization are tested in each commit. Those main steps to test are:

• Setting up the showcase carbonization page for a component
• Adding comparison examples to the showcase page with HDS and Carbon components
• Adding component level tokens and aligning the carbonized HDS component to the Carbon component

This carbonization can be compared against the actual carbonization of the breadcrumb in #3652

• Bob generated Breadcrumb carbonization
• Actual Breadcrumb carbonization

Note: All code generated as part of the testing commits was generated solely by Bob.

🛠️ Detailed description

A new /instructions folder has been added with a carbonization.instructions.md file. This file will not automatically get inputed into the AI context just from having it in this location. This is just a place to keep it so users can grab it more easily.

How to test

Prerequisites (optional):

• Connect to Carbon MCP
  • Part of the script references Carbon MCP commands. Connecting Bob to the MCP can help increase the success of adding Carbon component examples, and creating style tokens
• Set up auto-approve settings
  • Setting various auto-approve settings in Bob can help speed up the process and avoid user approvals along the way
  • 

1. Pass the script in as a prompt

First, copy and past the entire carbonization.instructions.md file into the prompt and submit it. The script will automatically stop after being read and wait for further instruction.

2. Set up the showcase component carbonization page

A showcase page now needs to be added for the component to carbonize, and the new page needs to be added to the homepage and router.

Prompt:

Set up the showcase carbonization for the HDS `breadcrumb` component. 

3. Add comparison examples

Now comparison grid examples need to be added to the showcase page showing the differences between the HDS and Carbon component. The script will look at the component's other showcase pages to judge which example should be added. The Carbon web component will also be imported.

Prompt:

Add carbonization examples for the HDS `HdsBreadcrumb` component and the carbon `cds-breadcrumb` component.

4. Add component tokens and carbonization styles

Now the goal is to add component level tokens to the tokens package that are then leveraged to align the HDS and Carbon component visually.

Note: This step is the most experimental and varied in its accuracy

Prompt:

Conduct token creation and style alignment for the `HdsBreadcrumb` HDS component and the `cds-breadcrumb` Carbon component.

📸 Screenshots

Actual Breadcrumb carbonization

Script Breadcrumb carbonization

---

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Mar 3, 2026 7:45pm
hds-website	Ready	Preview	Mar 3, 2026 7:45pm

[dchyun]

[Note] The component token creation is the most experimental and prone to inaccuracies. Generated tokens may not follow exactly our intended formatting or leverage proper semantic level tokens. The automated token generation can be viewed as a starting point for further manual work.

[dchyun]

[Note] This section is taken from the Carbon MCP prompt starter template