Heldinhow Web Artifacts Builder
Overview
Web artifacts are self-contained HTML files with embedded React components. This skill should be invoked when building interactive web UIs as standalone artifacts, dashboards, or prototypes.
Core Principles
- Self-Contained: All code in single HTML file
- Component Library: Use shadcn/ui components
- Styling: Tailwind CSS for styling
- Accessibility: Follow ARIA guidelines
Preparation Checklist
- Set up React project with Tailwind
- Install shadcn/ui components needed
- Plan component structure
- Configure export mechanism
Step-by-Step Process
- Setup: Initialize React with Tailwind
- Components: Build with shadcn/ui
- Accessibility: Implement ARIA attributes
- Responsive: Ensure mobile compatibility
- Export: Bundle as self-contained HTML
- Test: Verify in browser
Do's and Don'ts
- ✅ Do use accessible components
- ✅ Do make responsive designs
- ✅ Do optimize bundle size
- ❌ Don't include unnecessary dependencies
- ❌ Don't skip accessibility
- ❌ Don't ignore mobile users
Anti-Patterns
- Bloat: Too many unused components
- No Accessibility: Ignoring ARIA
- Desktop Only: Not testing mobile
- Missing Fallbacks: Not handling edge cases