artifacts-builder
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.
Detailed References
./workflows/artifact-building.md- Complete building workflow
More from jochenyang/jochen-ai-rules
ui-ux-pro-max
UI/UX design-system reasoning and UX quality audit skill. Use when user needs style direction, palette/typography selection, UX review, or design optimization before implementation. Do NOT use for backend logic or database design.
24devops-engineer
CI/CD pipeline design, containerization, and infrastructure management. Handles Docker, Kubernetes, monitoring setup (Prometheus/Grafana), and infrastructure-as-code (Terraform/Pulumi). Use when user asks to deploy, configure CI/CD, set up Docker/K8s, or manage infrastructure.
19handoff
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.
1reflect
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.
1developer
Comprehensive full-stack development for web, mobile, and game projects. Handles frontend (React/Vue/Angular), backend (Node.js/Python/Go/Java), mobile (Flutter/React Native/Swift/Kotlin), and game development (Unity/Unreal/Godot). Use when user asks to build, create, develop, implement, debug, or fix any web, mobile, or game project. Do NOT use for design-only tasks (use frontend-design or ui-ux-pro-max instead).
1mcp-builder
MCP server development for AI agents. Designs tool schemas, implements Python/TypeScript servers, creates evaluation tests. Use when user asks to build MCP server, create tool integration, or develop Claude plugins. Supports GitHub/Notion/Slack integrations.
1