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


---
Source attribution: JochenYang
Original project: https://github.com/JochenYang/Jochen-ai-rules/blob/2772c5d4dbab439e202337e58a419657209e16ae/skills/artifacts-builder/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2026 Jochen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: JochenYang
Original project: https://github.com/JochenYang/Jochen-ai-rules/blob/2772c5d4dbab439e202337e58a419657209e16ae/skills/artifacts-builder/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering
Roles: Frontend Developer, Product Designer, UX Designer
Specialties: API, Backend, Database, Design, Frontend, React
Tools: Shadcn/Ui
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 056dbce6fb4b4bc82595581af9d54f372dcbe9ca3bd534fb13a2b44f3c6301d9