feat: update component generation to remove chakra

[jwartofsky-yext]

The component generation skill was setup to use Chakra for all components

This changes it to use react/html components instead

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: cb412695-4a18-4614-a1d3-aa7aef16db57

📥 Commits

Reviewing files that changed from the base of the PR and between b113905 and fa8f048.

📒 Files selected for processing (1)

• starter/skills/vle-generate-components/references/generation-requirements.md

🚧 Files skipped from review as they are similar to previous changes (1)

• starter/skills/vle-generate-components/references/generation-requirements.md

---

Walkthrough

This pull request removes the Chakra UI dependency and related imports from the starter project and replaces Chakra components with semantic HTML and Tailwind-style classes. Changes: deleted @chakra-ui/react from starter/package.json, removed ChakraProvider from the dev template, updated example component(s) to use section/div/p elements with Tailwind-like classes and inline styles, and revised generation guidance and docs to require plain JSX and Tailwind utility classes instead of Chakra components.

Suggested reviewers

• briantstephan
• asanehisa

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: removing Chakra from component generation and replacing it with plain React/HTML components.
Description check	✅ Passed	The description is related to the changeset, explaining that component generation was updated from Chakra to React/HTML components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch component-gen-remove-chakra

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can generate walkthrough in a markdown collapsible section to save space.

Enable the reviews.collapse_walkthrough setting to generate walkthrough in a markdown collapsible section.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

starter/skills/vle-generate-components/references/ExampleSection.tsx (1)

74-75: ⚠️ Potential issue | 🟡 Minor

"normal" is not a valid CSS text-transform value.

The CSS text-transform property accepts none, capitalize, uppercase, lowercase, full-width, etc., but not "normal". This should be "none" for the default/no-transform case. This affects both the type definition (line 26) and the select options here.

Proposed fix

   textTransform: {
     label: "Text Transform",
     type: "select",
     options: [
-      { label: "Normal", value: "normal" },
+      { label: "None", value: "none" },
       { label: "Uppercase", value: "uppercase" },
       { label: "Lowercase", value: "lowercase" },
       { label: "Capitalize", value: "capitalize" },
     ],
   },

Also update the type definition at line 26:

-  textTransform: "normal" | "uppercase" | "lowercase" | "capitalize";
+  textTransform: "none" | "uppercase" | "lowercase" | "capitalize";

And the defaultProps at line 168:

-  textTransform: "normal",
+  textTransform: "none",

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@starter/skills/vle-generate-components/references/ExampleSection.tsx` around
lines 74 - 75, The select option uses an invalid CSS text-transform value
"normal"—replace that option value with "none" and update the corresponding type
and default to match; specifically, in ExampleSection replace the options entry
{ label: "Normal", value: "normal" } with value "none", update the
text-transform union/type used for the prop (the TextTransform/type in the
ExampleSection props/type definition) to include "none" instead of "normal", and
change the component's defaultProps/default value for the textTransform prop to
"none" so types, options array, and defaults are consistent with valid CSS
values.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@starter/skills/vle-generate-components/references/ExampleSection.tsx`:
- Around line 74-75: The select option uses an invalid CSS text-transform value
"normal"—replace that option value with "none" and update the corresponding type
and default to match; specifically, in ExampleSection replace the options entry
{ label: "Normal", value: "normal" } with value "none", update the
text-transform union/type used for the prop (the TextTransform/type in the
ExampleSection props/type definition) to include "none" instead of "normal", and
change the component's defaultProps/default value for the textTransform prop to
"none" so types, options array, and defaults are consistent with valid CSS
values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7d708023-e881-4376-a398-060c60992564

📥 Commits

Reviewing files that changed from the base of the PR and between f5a13d9 and 1c2141f.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (6)

• starter/package.json
• starter/skills/vle-generate-components/SKILL.md
• starter/skills/vle-generate-components/references/ExampleSection.tsx
• starter/skills/vle-generate-components/references/generation-requirements.md
• starter/src/templates/dev.tsx
• starter/src/ve.config.tsx

💤 Files with no reviewable changes (1)

• starter/package.json

[asanehisa]

lgtm hopefully it generates well still? did u generate sweetgreen with this?

[jwartofsky-yext]

lgtm hopefully it generates well still? did u generate sweetgreen with this?

Yup!