MCP HubMCP Hub
← Retour aux compétences

web-artifacts-builder

vamseeachanta
Mis à jour Today
9 vues
3
2
3
Voir sur GitHub
Autre

À propos

Cette compétence crée des applications web interactives autonomes sous forme de fichiers HTML uniques, idéales pour réaliser des démos, prototypes et outils fonctionnant sans serveurs externes. Elle permet aux développeurs d'emballer des applications entières — code, styles et ressources inclus — dans un seul fichier portable. Utilisez-la pour créer rapidement des expériences web partageables comme des tableaux de bord, calculatrices ou visualisations qui fonctionnent directement dans tout navigateur moderne.

Installation rapide

Claude Code

Recommandé
Principal
npx skills add vamseeachanta/workspace-hub
Commande PluginAlternatif
/plugin add https://github.com/vamseeachanta/workspace-hub
Git CloneAlternatif
git clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/web-artifacts-builder

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Documentation

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

  1. Create single HTML file with all CSS/JS inline
  2. Use CDN for libraries (Chart.js, Plotly, etc.)
  3. Embed data directly as JSON or JS objects
  4. Test locally by opening file in browser
  5. 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

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

Dépôt GitHub

vamseeachanta/workspace-hub
Chemin: .claude/skills/_internal/builders/web-artifacts-builder

Compétences associées

legal-sanity-review

Autre

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.

Voir la compétence

brainstorming

Autre

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.

Voir la compétence

repo-cleanup-progress-tracking-commands

Autre

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.

Voir la compétence

brainstorming-metrics

Autre

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.

Voir la compétence