web-artifacts-builder
Acerca de
Esta habilidad crea aplicaciones web interactivas autónomas como archivos HTML únicos, ideales para crear demostraciones, prototipos y herramientas que funcionan sin servidores externos. Permite a los desarrolladores empaquetar aplicaciones completas —incluyendo código, estilos y recursos— en un solo archivo portátil. Úsala para experiencias web rápidas y compartibles, como paneles de control, calculadoras o visualizaciones, que funcionan directamente en cualquier navegador moderno.
Instalación rápida
Claude Code
Recomendadonpx 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-builderCopia y pega este comando en Claude Code para instalar esta habilidad
Documentación
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
Repositorio GitHub
Habilidades relacionadas
legal-sanity-review
OtroThis 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
OtroThe 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
OtroThis 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
OtroThis 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.