web-artifacts-builder
Über
Diese Fähigkeit erstellt eigenständige, interaktive Webanwendungen als einzelne HTML-Dateien, ideal für Demos, Prototypen und Tools, die ohne externe Server laufen. Sie ermöglicht Entwicklern, gesamte Anwendungen – inklusive Code, Stile und Assets – in eine portable Datei zu verpacken. Nutzen Sie sie für schnelle, einfach teilbare Web-Erlebnisse wie Dashboards, Rechner oder Visualisierungen, die direkt in jedem modernen Browser funktionieren.
Schnellinstallation
Claude Code
Empfohlennpx skills add vamseeachanta/workspace-hub/plugin add https://github.com/vamseeachanta/workspace-hubgit clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/web-artifacts-builderKopieren Sie diesen Befehl und fügen Sie ihn in Claude Code ein, um diese Fähigkeit zu installieren
Dokumentation
Web Artifacts Builder
Overview
Create self-contained, interactive web applications as single HTML files. These artifacts require no server, no build process, and can be shared as standalone files that run in any modern browser.
When to Use
- Creating interactive demos or prototypes
- Building standalone calculators or tools
- Data visualization dashboards
- Interactive documentation
- Shareable proof-of-concepts
- Any web experience that needs to work offline
Quick Start
- Create single HTML file with all CSS/JS inline
- Use CDN for libraries (Chart.js, Plotly, etc.)
- Embed data directly as JSON or JS objects
- Test locally by opening file in browser
- Share as single file attachment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Artifact</title>
<style>
body { font-family: system-ui; padding: 20px; }
.btn { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Interactive Tool</h1>
<button class="btn" onclick="calculate()">Calculate</button>
<div id="result"></div>
<script>
function calculate() {
document.getElementById('result').textContent = 'Result: ' + (Math.random() * 100).toFixed(2);
}
</script>
</body>
</html>
Related Skills
- frontend-design - Advanced UI design
- algorithmic-art - Generative visuals
- theme-factory - Color and typography
Version History
- 2.0.0 (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
- 1.0.0 (2024-10-15): Initial release with basic template, dashboard, calculator, data visualization examples, CDN library references, best practices
Sub-Skills
Sub-Skills
Sub-Skills
GitHub Repository
Verwandte Skills
legal-sanity-review
AndereThis mandatory workflow scans code for legal risks like client names or proprietary references before cross-review. It blocks the review cycle if violations are found, requiring fixes first. Use it as a pre-gate for PR creation, code porting, or any cross-review trigger.
brainstorming
AndereThe brainstorming skill transforms initial ideas into detailed specifications through iterative questioning and collaborative dialogue. It helps developers explore design options, evaluate trade-offs, and create shared understanding before implementation. This prevents rework by systematically refining concepts into actionable plans.
repo-cleanup-progress-tracking-commands
AndereThis sub-skill provides shell commands for tracking file counts during repository cleanup operations, specifically for hidden folders like `.claude` and `.agent-os`. It includes verification scripts to ensure no files are lost after merging changes. Use it when consolidating or reorganizing project directories to monitor progress and validate results.
brainstorming-metrics
AndereThis skill provides structured metrics for evaluating brainstorming sessions, including targets for questions per design, validation rates, and stakeholder alignment. It helps developers measure brainstorming effectiveness and implementation quality. Use it to establish clear success criteria and track rework during project planning phases.