Menü
Create HTML/React artifacts with Tailwind, shadcn/ui for claude.ai
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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