Web Artifacts BuilderSkill

Added to Onei Jul 22, 2026

2 views

markdown

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.

Related Skills

Skill: claude-mem

by thedotmack

New

Persistent cross-session memory for coding agents: hooks capture each session, a local SQLite + vector store compresses it, and a mem-search skill reads it back.

Development

Skill: PlanetScale Safe Orchestrator

by PlanetScale

New

The master skill in PlanetScale's official pack: runs a full read-only best-practices assessment of a database or org, then produces one evidence-backed report.

Development

Skill: Inngest Agents

by Inngest

New

Build crash-safe AI agents on AgentKit and step.ai — durable tool calls, human-in-the-loop approval, realtime progress, and when not to reach for an agent loop at all.

Development

Skill: Inngest Durable Functions

by Inngest

New

Inngest's durable-execution playbook as an agent skill — steps and memoisation, event and cron triggers, idempotency, cancellation, retries and non-retriable errors.

Development

Browse all skills →