Web Artifacts BuilderSkill

Added to Onei Jul 22, 2026

Summary

A suite for building elaborate, multi-component HTML artifacts with modern frontend tooling — React, Tailwind CSS, and shadcn/ui.

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

Copy the skill content with the button below.
Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
Ask the agent to apply the skill whenever the task matches.

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/web-artifacts-builder/, or per-project: .claude/skills/web-artifacts-builder/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/web-artifacts-builder

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Web Artifacts Builder" skill from Onei AI. Fetch https://onei.ai/skills/web-artifacts-builder, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/web-artifacts-builder/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

# Web Artifacts Builder

Use this skill for elaborate claude.ai artifacts that need more than a single file.

## When to use
- Multi-component React apps with shared state
- Client-side routing across views
- shadcn/ui components and Tailwind design systems

## When not to use
- A simple one-file HTML page or a single JSX component — those are faster to write directly.

## How it works
The skill provides scaffolding and patterns for composing React + Tailwind + shadcn/ui into a coherent, self-contained artifact.

Description

A skill for creating complex, multi-component claude.ai HTML artifacts using modern frontend technologies — React, Tailwind CSS, and shadcn/ui. It is meant for artifacts that need state management, routing, or shadcn components, not for simple single-file HTML or JSX snippets.

Install

Related Skills

Skill: Power Apps Model-Driven App Builder

by Microsoft

Microsoft's official plugin that builds whole model-driven Power Apps — tables, forms, views, security roles and generative pages — from a natural-language brief.

Development

Skill: Stitch: shadcn/ui

by Google Labs (Stitch)

Google's official Stitch build skill for shadcn/ui — component discovery, installation, customisation and the conventions that keep a generated UI idiomatic.

Development Design & Creative

Skill: Stitch: Build Loop

by Google Labs (Stitch)

Google's official Stitch skill for autonomous multi-page site building — a baton file carries the next task from one agent iteration to the next.

Development Design & Creative

Skill: Stitch: Code to Design

by Google Labs (Stitch)

Google's official Stitch skill that reverses the usual direction — turns an existing React, Vue, Angular or Vite front end back into an editable Stitch design.

Development Design & Creative

Browse all skills →