Frontend Prototype Builder

---
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