Rapid prototyping tool for React interactive demos and single-file HTML artifacts. Uses shadcn/ui component library with 40+ components. Use when user asks to create React demo, build HTML artifact, prototype UI, or create product demo. Perfect for design validation and shareable browser previews.
--- name: artifacts-builder-c93c7fefa523 description: Rapid prototyping tool for React interactive demos and single-file HTML artifacts. Uses shadcn/ui component library with 40+ components. Use when user asks to create React demo, build HTML artifact, prototype UI, or create product demo. Perfect for design validation and shareable browser previews. --- # Frontend Prototype Builder Rapidly build shareable interactive prototypes for demos and product validation. ## Core Capabilities - React + TypeScript interactive prototypes - 40+ shadcn/ui components ready to use - Single-file HTML bundling for sharing - Direct browser preview ## Tech Stack - **Framework**: React 18 + TypeScript + Vite - **Styling**: Tailwind CSS + shadcn/ui - **Bundling**: Parcel + html-inline ## Executable Tools The following scripts can be run directly without reading source code: - `scripts/init-artifact.sh` - Initialize project structure - `scripts/bundle-artifact.sh` - Bundle into single-file HTML ## Design Guidelines **No "AI Style" Design**: - No gradient backgrounds - Avoid excessive center alignment - Avoid pure white large rounded corners - Avoid default Inter font - Use solid colors and clear color hierarchy ## Boundaries Focus on interactive prototype building, not production code. For complete applications, use developer skill. ## When NOT to Use - Shipping production-grade frontend/backend systems (use `developer`) - Pure UX audit or style-direction critique without prototype output (use `ui-ux-pro-max`) - Database, API, or infrastructure tasks outside prototype scope ## Detailed References - `./workflows/artifact-building.md` - Complete building workflow ## Escalation Rules Pause and ask the owner before: - turning a prototype into production-scoped implementation work - introducing design direction that materially conflicts with an existing product style - relying on unsupported assets or frameworks that change delivery scope ## Final Output Contract (MANDATORY) Every use of this skill should end with: 1. `Skill Fit` - why a prototype artifact is the right deliverable 2. `Primary Deliverable` - artifact, demo, or preview-ready output 3. `Execution Evidence` - files produced, preview/build steps, and validation completed 4. `Risks / Open Questions` - fidelity gaps, technical constraints, or polish debt 5. `Next Action` - the next refinement, handoff, or implementation step--- name: artifacts-builder-c93c7fefa523 description: Rapid prototyping tool for React interactive demos and single-file HTML artifacts. Uses shadcn/ui component library with 40+ components. Use when user asks to create React demo, build HTML artifact, prototype UI, or create product demo. Perfect for design validation and shareable browser previews. --- # Frontend Prototype Builder Rapidly build shareable interactive prototypes for demos and product validation. ## Core Capabilities - React + TypeScript interactive prototypes - 40+ shadcn/ui components ready to use - Single-file HTML bundling for sharing - Direct browser preview ## Tech Stack - **Framework**: React 18 + TypeScript + Vite - **Styling**: Tailwind CSS + shadcn/ui - **Bundling**: Parcel + html-inline ## Executable Tools The following scripts can be run directly without reading source code: - `scripts/init-artifact.sh` - Initialize project structure - `scripts/bundle-artifact.sh` - Bundle into single-file HTML ## Design Guidelines **No "AI Style" Design**: - No gradient backgrounds - Avoid excessive center alignment - Avoid pure white large rounded corners - Avoid default Inter font - Use solid colors and clear color hierarchy ## Boundaries Focus on interactive prototype building, not production code. For complete applications, use developer skill. ## When NOT to Use - Shipping production-grade frontend/backend systems (use `developer`) - Pure UX audit or style-direction critique without prototype output (use `ui-ux-pro-max`) - Database, API, or infrastructure tasks outside prototype scope ## Detailed References - `./workflows/artifact-building.md` - Complete building workflow ## Escalation Rules Pause and ask the owner before: - turning a prototype into production-scoped implementation work - introducing design direction that materially conflicts with an existing product style - relying on unsupported assets or frameworks that change delivery scope ## Final Output Contract (MANDATORY) Every use of this skill should end with: 1. `Skill Fit` - why a prototype artifact is the right deliverable 2. `Primary Deliverable` - artifact, demo, or preview-ready output 3. `Execution Evidence` - files produced, preview/build steps, and validation completed 4. `Risks / Open Questions` - fidelity gaps, technical constraints, or polish debt 5. `Next Action` - the next refinement, handoff, or implementation step
Imported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.