ar4mirez/web-artifacts-builder
internal/skills/content/web-artifacts-builder/SKILL.md
Suite of tools for creating elaborate, multi-component web applications using modern frontend technologies (React, Tailwind CSS, shadcn/ui). Use for complex projects requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX pages.
$ install --global
skillsauthnpx skillsauth add ar4mirez/samuel 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 30, 2026, 3:55 AM26.2s3 files scanned
SKILL.md
- name:
- web-artifacts-builder
- description:
- |
- license:
- Apache-2.0
- author:
- anthropic
- version:
- 1.0
- category:
- workflow
- source:
- github.com/anthropics/skills
Web Artifacts Builder
To build powerful frontend web applications, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your application by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Deliver the bundled output to the user
- (Optional) Test the output
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Quick Start
Step 1: Initialize Project
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
- React + TypeScript (via Vite)
- Tailwind CSS 3.4.1 with shadcn/ui theming system
- Path aliases (
@/) configured - 40+ shadcn/ui components pre-installed
- All Radix UI dependencies included
- Parcel configured for bundling (via .parcelrc)
- Node 18+ compatibility (auto-detects and pins Vite version)
Step 2: Develop Your Application
To build the application, edit the generated files. See Common Development Tasks below for guidance.
Step 3: Bundle to Single HTML File
To bundle the React app into a single HTML file:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained file with all JavaScript, CSS, and dependencies inlined. This file can be shared and opened in any browser.
Requirements: Your project must have an index.html in the root directory.
What the script does:
- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Creates
.parcelrcconfig with path alias support - Builds with Parcel (no source maps)
- Inlines all assets into single HTML using html-inline
Step 4: Share Output with User
Share the bundled HTML file with the user so they can view it in any browser.
Step 5: Testing/Visualizing (Optional)
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the output, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing upfront as it adds latency between the request and when the finished output can be seen. Test later, after presenting the result, if requested or if issues arise.
Reference
- shadcn/ui components: https://ui.shadcn.com/docs/components
Related Skills
ar4mirez/zig-guide
development
VerifiedTrustedCommunity
Zig language guardrails, patterns, and best practices for AI-assisted development. Use when working with Zig files (.zig), build.zig, or when the user mentions Zig. Provides comptime patterns, allocator conventions, C interop guidelines, and testing standards specific to this project's coding standards.
8SKILL.mdUpdated Apr 30, 2026
ar4mirez/wordpress
tools
VerifiedTrustedCommunity
WordPress framework guardrails, patterns, and best practices for AI-assisted development. Use when working with WordPress projects, or when the user mentions WordPress. Provides theme development, plugin architecture, REST API, blocks, and security guidelines.
8SKILL.mdUpdated Apr 30, 2026
ar4mirez/webapp-testing
tools
VerifiedTrustedCommunity
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Use when testing web apps, automating browser interactions, or debugging frontend issues.
8SKILL.mdUpdated Apr 30, 2026
ar4mirez/vapor
development
VerifiedTrustedCommunity
Vapor framework guardrails, patterns, and best practices for AI-assisted development. Use when working with Vapor projects, or when the user mentions Vapor. Provides Fluent ORM, async Swift, routing, middleware, and server-side Swift guidelines.
8SKILL.mdUpdated Apr 30, 2026