lidge-jun/web-artifacts-builder
web-artifacts-builder/SKILL.md
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 --global
skillsauthnpx skillsauth add lidge-jun/cli-jaw-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: Jun 9, 2026, 8:00 AM125.1s3 files scanned
SKILL.md
- name:
- web-artifacts-builder
- description:
- 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.
- license:
- Complete terms in LICENSE.txt
Web Artifacts Builder
- Initialize:
scripts/init-artifact.sh <project-name> - Develop the artifact
- Bundle:
scripts/bundle-artifact.sh→bundle.html - Share the bundled HTML with user
- (Optional) Test the artifact
Stack: React 19 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui v4
Design & Style Guidelines
Prefer distinctive layouts over generic defaults: vary spacing, use asymmetry, choose intentional color palettes, and pick fonts that match the artifact's purpose. Each artifact should feel hand-crafted.
Why: claude.ai artifacts are viewed side-by-side with conversation. Generic styling makes them look auto-generated and undermines user trust.
Commands
- Init:
bash scripts/init-artifact.sh <project-name>— scaffolds React 19 + TS + Vite + Tailwind + 40+ shadcn/ui v4 components + Parcel bundling. - Bundle:
bash scripts/bundle-artifact.sh— producesbundle.html(requiresindex.htmlin project root). All JS/CSS inlined. - Test: use Playwright/Puppeteer after sharing, not before — upfront testing adds latency the user feels.
Why bundle? Claude artifacts must be a single HTML file. Parcel inlines all dependencies so the artifact is self-contained.
Reference
- shadcn/ui components: https://ui.shadcn.com/docs/components
Related Skills
lidge-jun/codex-imagegen
tools
VerifiedTrustedCommunity
Use only on the Codex CLI for native image generation or image editing without an API key. Save final PNG files under ~/.cli-jaw/uploads, report web-ready absolute-path markdown, and send to Telegram or Discord only when explicitly requested.
5SKILL.mdUpdated Jul 10, 2026
lidge-jun/repo-map
tools
VerifiedTrustedCommunity
Ranked repository structure map via `cli-jaw map`. Use for codebase overview, structure map, symbol overview, unfamiliar codebase exploration, architecture orientation. Triggers: repo map, structure map, codebase overview, 와꾸, project structure, unfamiliar code.
5SKILL.mdUpdated Jul 7, 2026
lidge-jun/design
tools
VerifiedTrustedCommunity
cli-jaw Design workspace: create, preview, run, and export design pages from the right sidebar. Covers panel UX, direct-write workflow, artifact lifecycle, wireframe generation, design system, and Open Design adapter.
5SKILL.mdUpdated Jul 5, 2026
lidge-jun/dev-devops
development
VerifiedTrustedCommunity
MUST USE for infrastructure and delivery work — container builds, deploy pipelines, Kubernetes, Infrastructure as Code, SRE foundations, edge/serverless, ML infrastructure. Triggers: Dockerfile, K8s manifests, CI/CD pipeline, Terraform/IaC, release/deploy, devops/infra/deploy or release_cd task_tags.
5SKILL.mdUpdated Jun 19, 2026