Skip to content
LiveNew tools this week
Submit
AIMarketly
artifacts-builder logo

Frontend Prototype Builder

artifacts-builder

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.

JochenYang/Jochen-ai-rules0installs20stars

SKILL.md

Full skill instructions

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