[Fleet Execution] Create Tier 2 Framework Integration Agent Skills

[jules-fleet]

Goal Reference

This issue was generated from .fleet/goals/sdk-examples.md. The worker agent should read this file for full context including verification commands, constraints, and structural guidance.

Objective

Create Tier 2 Agent Skills for interpreting and adapting Stitch designs into specific UI frameworks. This includes Design to React Component, Next.js Integration, Vite Preview, and Astro Multipage skills.

Code-Level Diagnosis

Code path: packages/sdk/examples/
Mechanism: The SDK provides raw HTML and Tailwind configurations, but lacks guided examples (skills) for agents to integrate these assets into modern frameworks like React, Next.js, Vite, and Astro.
Root cause: Missing framework integration guides and helper scripts.

Current Implementation

// No existing framework adaptation skills or scripts.

Proposed Implementation

Files to modify: Create structured directories for framework skills, including SKILL.md and helper scripts.

Integration (Before -> After)

+ packages/sdk/examples/design-to-react/SKILL.md
+ packages/sdk/examples/design-to-react/scripts/extract-assets.ts
+ packages/sdk/examples/design-to-react/README.md
+ packages/sdk/examples/nextjs-integration/SKILL.md
+ packages/sdk/examples/nextjs-integration/scripts/scaffold-nextjs.ts
+ packages/sdk/examples/nextjs-integration/README.md
+ packages/sdk/examples/vite-preview/SKILL.md
+ packages/sdk/examples/vite-preview/scripts/extract-theme.ts
+ packages/sdk/examples/vite-preview/README.md
+ packages/sdk/examples/astro-multipage/SKILL.md
+ packages/sdk/examples/astro-multipage/README.md

Test Scenarios

1. React Skill: Execute bun run scripts/extract-assets.ts -> Successfully parses <script id="tailwind-config"> from design HTML.
2. Next.js Skill: Agent follows SKILL.md -> Translates Tailwind CDN config into tailwind.config.ts.

Target Files

• packages/sdk/examples/design-to-react/SKILL.md
• packages/sdk/examples/design-to-react/scripts/extract-assets.ts
• packages/sdk/examples/design-to-react/README.md
• packages/sdk/examples/nextjs-integration/SKILL.md
• packages/sdk/examples/nextjs-integration/scripts/scaffold-nextjs.ts
• packages/sdk/examples/nextjs-integration/README.md
• packages/sdk/examples/vite-preview/SKILL.md
• packages/sdk/examples/vite-preview/scripts/extract-theme.ts
• packages/sdk/examples/vite-preview/README.md
• packages/sdk/examples/astro-multipage/SKILL.md
• packages/sdk/examples/astro-multipage/README.md
• packages/sdk/README.md

Boundary Rules

Restrict your modifications exclusively to the files listed in the Target Files section. Ensure your source changes are entirely backward-compatible if unowned tests outside your boundary fail. Retain all existing file names and locations outside your explicitly declared target list.

---

Fleet Context

• Source: jules:session:9669267881517057542
• Link: https://jules.google.com/session/9669267881517057542