artifacts-builder
Artifacts Builder
Overview
Generate self-contained, production-quality HTML/CSS/JS artifacts that run in any modern browser without a build step. Each artifact is a single file (or minimal file set) containing everything needed for an interactive demo, prototype, data visualization, or utility tool. Emphasis on progressive enhancement, responsive design, and clean code.
Phase 1: Scope Definition
- Clarify the artifact's purpose (demo, prototype, tool, visualization)
- Determine interactivity level (static, interactive, data-driven)
- Identify required dependencies (none, CDN-loaded, embedded)
- Define responsive requirements (mobile, desktop, both)
- Set constraints (file size, browser support, offline capability)
STOP — Confirm scope and constraints with user before architecture decisions.
Artifact Type Decision Table
More from pixel-process-ug/superkit-agents
ui-ux-pro-max
>
784frontend-ui-design
Use when designing UI components, creating component architectures, implementing responsive layouts, setting up design systems, or selecting state management solutions for frontend applications
43reverse-engineering-specs
Use when onboarding to an existing codebase that lacks specifications — exhaustively traces code paths and produces implementation-free behavioral specifications for safe refactoring, feature addition, or legacy modernization
40senior-fullstack
Use when the user needs end-to-end TypeScript development — from database schema through API layer to UI — with tRPC, Prisma, Next.js, authentication, and deployment. Triggers: full-stack feature implementation, database-to-UI pipeline, tRPC router creation, Prisma schema design, auth setup, deployment configuration.
35ux-researcher-designer
>
35clean-code
Use when the user needs code quality review, refactoring guidance, SOLID principles application, or help identifying and fixing code smells. Triggers: code smell detection, refactoring planning, naming convention review, complexity reduction, DRY analysis, error handling improvement.
35