Artifacts builder

Skill JochenYang/Jochen-ai-rules/skills/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.From its SKILL.md

Install

npx -y skills add JochenYang/Jochen-ai-rules --skill artifacts-builder

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

20 stars20 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.4 KB, as published. Nobody here has run it

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:

Skill Fit - why a prototype artifact is the right deliverable
Primary Deliverable - artifact, demo, or preview-ready output
Execution Evidence - files produced, preview/build steps, and validation completed
Risks / Open Questions - fidelity gaps, technical constraints, or polish debt
Next Action - the next refinement, handoff, or implementation step