Web Artifacts Builder

1 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: Superpowers

by Jesse Vincent

New

An agentic software-development methodology: composable skills that push a coding agent through spec, plan, TDD and review instead of straight into code.

Development

Skill: The GTM Co-Founder

by Shane O'Connor

New

An open-source set of go-to-market skills for solo technical founders — positioning, first users, launch and pricing, sequenced into a roadmap your agent works with you.

Writing & Communication

Skill: SkillHone

by Tencent

New

Tencent's skill-evolution harness: it rewrites a whole skill folder — SKILL.md, scripts and references together — and lands every decision as a real Git issue, PR and wiki entry you can review.

Development

Skill: OpenSearch Launchpad

by OpenSearch Project

New

Take an OpenSearch search application from requirements to a running cluster — BM25, dense and sparse vectors, hybrid retrieval, agentic search and RAG, with relevance evaluation built in.

Development

Browse all skills →