web-artifacts-builder
О программе
Этот навык создает автономные интерактивные веб-приложения в виде единых HTML-файлов, что идеально подходит для демонстраций, прототипов и инструментов, работающих без внешних серверов. Он позволяет разработчикам упаковывать все приложение — включая код, стили и ресурсы — в один портативный файл. Используйте его для быстрых и удобных для обмена веб-интерфейсов, таких как дашборды, калькуляторы или визуализации, которые работают напрямую в любом современном браузере.
Быстрая установка
Claude Code
Рекомендуетсяnpx 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-builderСкопируйте и вставьте эту команду в Claude Code для установки этого навыка
Документация
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 репозиторий
Похожие навыки
legal-sanity-review
ДругоеThis 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
ДругоеThe 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
ДругоеThis 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-error-handling
ДругоеThis Claude Skill provides structured guidance for handling common brainstorming roadblocks like conflicting requirements or scope creep. It offers specific action templates to resolve issues such as unclear responses or analysis paralysis. Developers should use this reference skill to maintain productive brainstorming sessions within Claude Code.