artifacts-builder

name	artifacts-builder
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