Heldinhow/web-artifacts-builder
web-artifacts-builder/SKILL.md
Build production-quality HTML artifacts using React, Tailwind CSS, and shadcn/ui.
$ install --global
skillsauthnpx skillsauth add Heldinhow/awesome-opencode-dev-skills web-artifacts-builderInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 7:39 AM201.6s2 files scanned
SKILL.md
- name:
- web-artifacts-builder
- description:
- Build production-quality HTML artifacts using React, Tailwind CSS, and shadcn/ui.
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
Related Skills
Heldinhow/websocket-real-time
tools
VerifiedTrustedCommunity
Implement WebSocket communication for real-time bidirectional client-server communication.
2SKILL.mdUpdated Apr 24, 2026
Heldinhow/webhook-handler
development
VerifiedTrustedCommunity
Implement webhook handlers for processing incoming events from external services.
2SKILL.mdUpdated Apr 24, 2026
Heldinhow/webapp-testing
development
VerifiedTrustedCommunity
Test web applications using Playwright for end-to-end browser testing.
2SKILL.mdUpdated Apr 24, 2026
Heldinhow/vitest
development
VerifiedTrustedCommunity
Use when writing or running unit tests with Vitest in TypeScript/JavaScript projects. Covers test setup, assertions, mocking, coverage, and integration with React Testing Library.
2SKILL.mdUpdated Apr 24, 2026