web-artifacts-builder

vamseeachanta

업데이트됨 Today

13 조회

기타

정보

이 스킬은 독립형 인터랙티브 웹 애플리케이션을 단일 HTML 파일로 구축하여, 외부 서버 없이 실행되는 데모, 프로토타입 및 도구를 만들기에 이상적입니다. 개발자가 코드, 스타일, 자산을 포함한 전체 애플리케이션을 하나의 휴대 가능한 파일로 패키징할 수 있게 합니다. 대시보드, 계산기, 시각화와 같은 빠르게 공유 가능한 웹 경험을 위해 사용하세요. 모든 최신 브라우저에서 직접 작동합니다.

빠른 설치

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

Performance (+2)

Sub-Skills

GitHub 저장소

vamseeachanta/workspace-hub

경로: .claude/skills/_internal/builders/web-artifacts-builder

연관 스킬

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.

스킬 보기