Menu
Create HTML/React artifacts with Tailwind, shadcn/ui for claude.ai
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Office document tools - docx, xlsx, pptx, pdf creation/editing
Productivity and workflow optimization
Research methodology — finding, evaluating, synthesizing information
Software development best practices: debugging, planning, testing, code quality.
4-phase root cause debugging: understand bugs before fixing. Never propose fixes without root cause investigation.
Red-Green-Refactor: write tests first, then code to make them pass.
| name | web-artifacts-builder |
| description | Create HTML/React artifacts with Tailwind, shadcn/ui for claude.ai |
| version | 1.0.0 |
| author | anthropic |
| license | Proprietary |
| triggers | ["html artifact","react component","web ui","tailwind","shadcn"] |
| conditions | ["create html","build interface","react component","web artifact"] |
Create rich HTML artifacts using React + Tailwind CSS.
# Initialize artifact project (run once)
npx create-react-app my-artifact --templateType react
cd my-artifact
npm install
# Development
npm run dev
For distinctive, NON-generic AI aesthetics:
export default function App() {
const [count, setCount] = React.useState(0)
return (
<div className="min-h-screen bg-stone-900 text-white p-8">
<h1 className="text-4xl font-bold mb-4">Counter: {count}</h1>
<button
onClick={() => setCount(c => c + 1)}
className="bg-emerald-500 hover:bg-emerald-600 px-4 py-2 rounded"
>
Increment
</button>
</div>
)
}
# Bundle to single HTML
npx parcel build src/index.js --dist-dir dist --no-source-maps