artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Why use this skill?
Use the artifacts-builder to create sophisticated, interactive React applications, bundle them into single files, and deploy them as high-quality Claude artifacts.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/seanphan/artifacts-builderWhat This Skill Does
The artifacts-builder skill is a professional-grade environment for OpenClaw AI agents to engineer, bundle, and deploy complex, interactive web applications directly as Claude.ai artifacts. Unlike basic text-based generations, this tool provides a robust scaffolding system using React 18, TypeScript, Vite, and Parcel. It bridges the gap between raw code and a production-ready, single-file HTML artifact by managing the complexities of dependency bundling, shadcn/ui component integration, and asset inlining. It is designed to handle high-fidelity UI requirements where state management, client-side routing, and complex component trees are necessary.
Installation
To integrate this tool into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/seanphan/artifacts-builder
Ensure your system meets the Node 18+ requirements, as the bundling process relies on Parcel 2 and modern build chains to resolve path aliases and inline resources correctly.
Use Cases
- Prototyping SaaS Dashboards: Create multi-page layouts using shadcn/ui cards, data tables, and charts that require internal state management.
- Interactive Data Visualization: Build bespoke tools with Recharts or similar libraries that need complex React hooks.
- Educational Tools: Develop self-contained, interactive sandboxes for teaching algorithms or complex concepts.
- Modern Web Apps: Build complex UI components that require CSS-in-JS or Tailwind utility classes that exceed the scope of simple HTML strings.
Example Prompts
- "Use artifacts-builder to create a project-tracking dashboard with a sidebar, drag-and-drop task cards using shadcn/ui, and persistent state using local storage."
- "Construct an interactive React application that simulates a particle physics environment, bundling it into a single HTML artifact for me to review."
- "Build a complex form wizard for user onboarding that uses React Hook Form and zod for validation, ensuring all components are styled with custom Tailwind themes."
Tips & Limitations
- Avoid Slop: The artifact system gives you full control. Steer clear of repetitive, over-centered layouts or generic purple gradients that characterize low-effort AI output. Focus on typography and whitespace.
- Bundle Overhead: Because the tool inlines all assets (CSS, JS, and dependencies), very large applications may hit size limits in the Claude interface. Keep logic modular.
- Automation Priority: Use the
scripts/init-artifact.shandscripts/bundle-artifact.shscripts as your primary interface. Do not attempt to manually configure Parcel unless you have advanced requirements. - Optional Testing: Only test via headless browsers if the app behavior is mission-critical; otherwise, rely on code-level validation to save execution latency.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-seanphan-artifacts-builder": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read, code-execution
Related Skills
template-skill
Replace with description of the skill and when Claude should use it.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
xlsx
Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas
Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.