web-artifacts-builder

name	web-artifacts-builder
description	Create interactive, component-based visual artifacts directly in chat.

Web Artifacts Builder

This skill uses React and Tailwind to build functional, interactive components that users can interact with immediately.

Instructions

1. Identify the need for a visual interactive element (Chart, Game, Dashboard).
2. Use Lucide icons for professional UI elements.
3. Write self-contained React code with inline Tailwind styling.
4. Include state management for user interactions.
5. Ensure the component is responsive within the artifact window.

Examples

• "Build an interactive calorie calculator artifact."
• "Create a visual dashboard showing dummy financial data."