Agent skill
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/web-artifacts-builder-mshafei721-turbocat
SKILL.md
Web Artifacts Builder
Overview
Build sophisticated web artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui components.
Technology Stack
- React 18
- TypeScript
- Vite
- Parcel (bundling)
- Tailwind CSS
- shadcn/ui components
Workflow
1. Initialize Project
scripts/init-artifact.sh <project-name>
Creates a fully configured React project with all dependencies.
2. Develop
Modify generated files using the pre-configured stack:
- React components in
src/ - Tailwind styles
- shadcn/ui components
3. Bundle
scripts/bundle-artifact.sh
Consolidates the React application into a single self-contained HTML file with all dependencies inlined.
4. Deploy
Share the bundled HTML as a claude.ai artifact.
Design Guidance
Avoid "AI slop" aesthetics:
- No excessive centered layouts
- No purple gradients
- No uniform rounded corners
- No Inter font everywhere
Instead:
- Bold, intentional design choices
- Context-specific styling
- Unique typography
- Purposeful color choices
Features
- TypeScript path aliases support
- Asset inlining for self-contained output
- All dependencies bundled
- Production-ready artifacts
When to Use
Use this skill for:
- Complex multi-component artifacts
- State management requirements
- Routing needs
- shadcn/ui component integration
NOT for:
- Simple single-file HTML
- Basic JSX without state
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?