---

name: artifacts-builder category: integration-connectivity/mcp-integrations version: 1.0.0 description: Build complex Claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui author: blackbox5/mcp verified: true tags: [mcp, artifacts, react, ui, frontend]

Artifacts Builder

This skill helps you build rich, interactive HTML artifacts that can be rendered directly in Claude.ai conversations.

When to Use:

• Building interactive demos and prototypes
• Creating data visualizations
• Developing UI mockups
• Making reusable tool interfaces

Always use className instead of class, follow React hooks patterns, and handle edge cases gracefully.

<available_skills> <skill_group name="Basic Patterns"> Create a basic HTML artifact template Create an artifact that shows hello world Use useState and useEffect for interactivity Add state management to the component Apply Tailwind CSS utility classes Style the component with modern design </skill_group>

<skill_group name="Interactive Components"> Create sortable data table with filtering Make a table showing user data with sorting Create bar charts and visualizations Build a bar chart for sales data Create form with validation and error handling Make a contact form with validation </skill_group>

<skill_group name="Advanced Features"> Fetch and display data from APIs Show data from an external API Add CSS transitions and animations Animate the list items when they appear Manage complex component state Add useReducer for complex state logic </skill_group> </available_skills>

<best_practices> Use className instead of class Follow React hooks rules Handle loading and error states Use responsive Tailwind classes Add proper accessibility attributes Test with sample data Include error boundaries Use class instead of className Forget to close JSX tags Hardcode large datasets Ignore edge cases Skip validation </best_practices>

<error_handling> Component not rendering Verify ReactDOM.createRoot is called Check script type is "text/babel" Ensure all CDNs are loaded Styles not applying Check using className not class Verify Tailwind CDN is included Check for typos in class names Interactivity not working Verify event handlers are properly defined Check state updates with useState Ensure component re-renders on state change </error_handling>

<integration_notes> <tailwind_tips> Use responsive: md:text-lg lg:text-xl Use states: hover:bg-blue-600 focus:ring-2 Use dark mode: dark:bg-gray-800 dark:text-white </tailwind_tips> </integration_notes>