Canonical manifest schema
plugin.json targets the official 1.0.0 schema.
Agent Plugins specification §5.2
Web Artifacts Builder Agent Plugin
Build elaborate multi-component web artifacts with React, TypeScript, Tailwind, shadcn UI, state management, routing, and a workflow for bundling to one HTML file.
0 repository stars Apache-2.0 Updated Aug 8, 2026
Reviewed seed
interactive
in one artifact.
Components, state, routing, and polished UI assembled into a shareable single-file result.
Complexity with structure
Explainable standards check
Conforms to Agent Plugins 1.0.0
Official latest version: 1.0.0 (Working Draft). The value is read from the official specification and cached for one day.
This is a static package-format check, not a security audit, quality score, malware scan, or guarantee of client compatibility.
Required name and naming rules
The plugin name “web-artifacts-builder” satisfies the 1–64 character naming rules.
Agent Plugins specification §§5.3 and 5.5
Closed top-level schema
No unknown top-level manifest fields were found.
Agent Plugins specification §5.2
Manifest field types
All present metadata and extension fields use permitted JSON types.
Agent Plugins specification §§5.2–5.6
Root plugin.json file
A regular plugin.json file exists at the plugin root.
Agent Plugins specification §§4.1 and 5.1
Agent Skills discovery and format
1 immediate-child Agent Skill discovered; every SKILL.md passed required frontmatter and naming checks.
Agent Plugins specification §7.1 and Agent Skills specification
MCP configuration
No root mcp.json is present; MCP is optional and its absence is conforming.
Agent Plugins specification §§6.2 and 7.2
Capabilities
What can you do with Web Artifacts Builder?
Use a real frontend structure for artifacts that outgrow one file.
Use this plugin when an artifact needs multiple components, state, routes, or shadcn UI and a simple HTML snippet would become difficult to maintain.
- Initialize a React and TypeScript artifact project.
- Use Tailwind and shadcn UI components consistently.
- Implement state and routing for multi-view interactions.
- Bundle dependencies and assets into one HTML file.
- Test the finished artifact before delivery.
Start with durable structure
The template provides components, aliases, theming, dependencies, and build conventions for genuinely complex artifacts.
Inspect the bundle
Bundling scripts and dependencies are visible source; the final single-file result still requires functional and security review.
Practical workflow
From interaction model to shareable artifact
Pass 01 / Compose
Build the component system
Define views, state, interactions, and visual hierarchy, then implement them with the provided frontend stack.
Pass 02 / Bundle
Test and produce one file
Exercise the interface, fix runtime issues, bundle with the supplied scripts, and verify the final HTML independently.
Package contents
What is included in Web Artifacts Builder?
Web Artifacts Builder declares 1 Skill, 0 MCP configurations, and 1 additional resource. The included-file links below point to the reviewed source repository.
Agent Skills
1
web-artifacts-builder
MCP servers
0
No runtime service
Package format
Agent Plugins
Official latest 1.0.0
Installation
Copy the complete Web Artifacts Builder package
Sparse-clone the plugin directory and load its root in a compatible client. The workflow invokes Node tooling and bundled shell scripts that should be inspected first.
Terminal · Git sparse checkout
git clone --filter=blob:none --sparse https://github.com/chenmiaohero/Portable-Agent-Plugins.git
cd Portable-Agent-Plugins
git sparse-checkout set plugins/web-artifacts-builderReview initialization and bundling scripts.
Audit installed frontend dependencies.
Open and test the final single-file artifact in a clean browser context.
Synced source content
Repository README
This README snapshot is stored by Agent Plugins Hub and refreshed by the daily GitHub synchronization pipeline. Remote images and embedded content are not loaded.
This repository does not currently provide a README snapshot. The plugin instructions below remain available.
Source documentation
Web Artifacts Builder workflow
Rendered from the linked GitHub source. Raw HTML is disabled, scripts cannot execute, remote images are omitted, and external links open separately.
What this plugin does
Web Artifacts Builder creates elaborate interactive artifacts with React, TypeScript, Tailwind CSS, shadcn UI, state management, and routing. Its scripts initialize the project and bundle the finished result into one HTML file.
Practical workflow
Use it when a single-file snippet would be too brittle. Define views, state, interactions, and visual hierarchy; implement with reusable components; test the running artifact; then bundle and verify the final standalone HTML.
Dependency review
Inspect the initialization and bundling scripts, audit installed dependencies, and review generated client code. Open the final artifact in a clean browser context and verify that no unintended secrets, network calls, or unsafe HTML were bundled.
Source
This portable package is maintained in chenmiaohero/Portable-Agent-Plugins from a pinned Apache-2.0 upstream Skill.
Continue exploring
Related plugins
Developer Tools
Agent Plugins Example
The small official reference package for inspecting a portable manifest and migration workflow.
Design
Canvas Design
A portable art-direction workflow for original posters, visual compositions, and polished PNG or PDF output.
AI Development
Claude API
A portable implementation guide for Claude API applications across Python, TypeScript, Java, Go, C#, PHP, Ruby, and curl.