artifacts

Creates and manages runnable artifact projects with artifact.toml metadata in a pnpm monorepo.

Updated Apr 20, 2026
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill artifacts-amiremad11
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: artifacts
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/artifacts
Command: npx skills add https://github.com/AmirEmad11/instabot --skill artifacts-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When building websites, web apps, mobile apps, slide decks, videos, or data visualizations, you need a consistent way to scaffold, register, preview, and deploy runnable projects. This Skill standardizes artifact creation and metadata management so every project is previewable and deployable without manual configuration. ## Core Features & Use Cases - Artifact Bootstrapping: Call createArtifact() to scaffold a project from templates (react-vite, expo, slides, video-js, data-visualization, mockup-sandbox), write its artifact.toml, and allocate service ports automatically. - OpenAPI-First Workflow: For full-stack artifacts, write an OpenAPI spec, run codegen for React Query hooks and Zod schemas, then build frontend and backend in parallel. - Safe Metadata Updates: Edit artifact.toml through a validated temp-file flow using verifyAndReplaceArtifactToml() instead of risky in-place edits. - Use Case: A user asks for a sales dashboard. You call createArtifact() with the data-visualization type, build the dashboard with pre-configured Recharts and TanStack Table, then present it and suggest deployment. ## Quick Start Ask the agent to create a new web app called 'recipe-finder' and it will scaffold, build, and present the artifact for you.

Frequently Asked Questions about artifacts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new web app artifact?

Call createArtifact() with an artifactType like react-vite, a unique kebab-case slug, a previewPath, and a title. The call scaffolds the project files, writes artifact.toml, and allocates service ports in one step.

What artifact types are available for scaffolding projects?

Available types are react-vite for web apps, expo for mobile apps, data-visualization for dashboards, slides for presentations, video-js for animated videos, and mockup-sandbox for UI prototyping. Each type has its own preview kind and build workflow.

Should I create a new artifact or add to an existing one?

Add to an existing artifact when the work shares the same product, domain, and branding. Create a new artifact for a different product or when the user uses standalone language like 'make a web app'. Standalone files like scripts or CSVs do not need an artifact at all.

How do I update artifact.toml without breaking it?

Copy the current artifact.toml to a temp file, make edits there, then call verifyAndReplaceArtifactToml() with both absolute paths. The callback validates the temp file against the artifact schema before replacing the real file, and never edit artifact.toml in place.

Why does createArtifact fail with a slug error?

Each slug can only be used once, and the call fails if artifacts/<slug>/ already exists. Choose a different slug or remove the partial directory before retrying, and use a different previewPath if you get a DUPLICATE_PREVIEW_PATH error.

Do Expo mobile apps need a backend and database?

No, Expo apps skip the OpenAPI workflow by default and should use AsyncStorage for persistence on the first build. Only create a database, OpenAPI spec, or backend routes when the user explicitly requests server-side features.