jochenyang/artifacts-builder
skills/artifacts-builder/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add jochenyang/jochen-ai-rules artifacts-builderInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 2:08 PM110.4s1 file scanned
SKILL.md
- 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 structurescripts/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 deliverablePrimary Deliverable- artifact, demo, or preview-ready outputExecution Evidence- files produced, preview/build steps, and validation completedRisks / Open Questions- fidelity gaps, technical constraints, or polish debtNext Action- the next refinement, handoff, or implementation step
Related Skills
jochenyang/reflect
databases
VerifiedTrustedCommunity
Review current conversation, analyze tasks, errors, and user feedback, extract learning opportunities for skill improvement. Use when user says "reflect", "review session", "what did we learn", "session summary", or after completing a complex task.
20SKILL.mdUpdated Apr 6, 2026
jochenyang/handoff
development
VerifiedTrustedCommunity
Create and resume structured manual session handoffs for long-running development work. Use when approaching context limits, before manual reset, before switching models or IDEs, after a milestone, or when automatic compact would lose important implementation state.
20SKILL.mdUpdated Apr 6, 2026
jochenyang/frontend-design
development
VerifiedTrustedCommunity
Implement distinctive, production-grade frontend UI code with strong visual direction, motion systems, local media asset generation, conversion-aware copy, and polished frontend execution. Use when building landing pages, marketing sites, product pages, dashboards, motion-heavy interfaces, or frontend experiences that need real assets and compelling copy.
20SKILL.mdUpdated Apr 6, 2026
jochenyang/context-codebase
development
VerifiedTrustedCommunity
Project context engine for repo orientation, cached handoff, and task-focused code retrieval.
20SKILL.mdUpdated Apr 6, 2026