artifacts-builder

by @TheSimpleApp in AI & LLM

# Install this skill:

npx skills add TheSimpleApp/agent-skills --skill "artifacts-builder"

Install specific skill from multi-skill repository

# Description

Create complex interactive HTML artifacts with React, Tailwind CSS, and shadcn/ui components. Use when building self-contained UI demos, interactive widgets, or rich HTML outputs.

# SKILL.md

name: artifacts-builder
description: Create complex interactive HTML artifacts with React, Tailwind CSS, and shadcn/ui components. Use when building self-contained UI demos, interactive widgets, or rich HTML outputs.
license: MIT
metadata:
author: thesimpleapp
version: "1.0"

Artifacts Builder

Create self-contained, interactive HTML artifacts with modern tooling.

Tech Stack

React - Component architecture
Tailwind CSS - Utility-first styling
shadcn/ui - Accessible component primitives
Lucide - Consistent iconography

Artifact Structure

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function App() {
      return (
        <div className="p-8">
          {/* Your component here */}
        </div>
      );
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Component Patterns

Cards

<div className="rounded-lg border bg-white p-6 shadow-sm">
  <h3 className="text-lg font-semibold">Title</h3>
  <p className="text-gray-600">Description</p>
</div>

Buttons

<button className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Click me
</button>

Inputs

<input
  type="text"
  className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
  placeholder="Enter text..."
/>

State Management

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div className="flex items-center gap-4">
      <button
        onClick={() => setCount(c => c - 1)}
        className="rounded bg-gray-200 px-3 py-1"
      >
        -
      </button>
      <span className="text-2xl font-bold">{count}</span>
      <button
        onClick={() => setCount(c => c + 1)}
        className="rounded bg-gray-200 px-3 py-1"
      >
        +
      </button>
    </div>
  );
}

Data Visualization

For charts, include Recharts or Chart.js:

<script src="https://unpkg.com/recharts@2/umd/Recharts.min.js"></script>

Responsive Design

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards here */}
</div>

Accessibility Checklist

[ ] All interactive elements are keyboard accessible
[ ] Color contrast meets WCAG AA (4.5:1 for text)
[ ] Focus states are visible
[ ] Images have alt text
[ ] Form inputs have labels

Best Practices

Self-contained - Include all dependencies via CDN
Responsive - Works on mobile and desktop
Accessible - Keyboard and screen reader friendly
Performant - Minimize re-renders
Clean code - Well-organized components

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.