web-artifacts-builder
について
このスキルは、外部サーバーを必要とせずに動作する、単一のHTMLファイルとして自己完結型のインタラクティブWebアプリケーションを構築します。コード、スタイル、アセットを含むアプリケーション全体を一つのポータブルファイルにパッケージ化することが可能で、デモやプロトタイプ、ツールの作成に最適です。ダッシュボード、計算機、可視化ツールなど、あらゆる最新ブラウザで直接動作する、迅速に共有可能なWeb体験の実現にご利用ください。
クイックインストール
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-metrics
その他This 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.