MCP HubMCP Hub
스킬 목록으로 돌아가기

web-artifacts-builder-self-contained-architecture

vamseeachanta
업데이트됨 Yesterday
11 조회
3
2
3
GitHub에서 보기
기타aidesign

정보

이 스킬은 모든 HTML, CSS, JavaScript 및 데이터가 단일 파일로 번들링된 자체 포함 웹 아티팩트를 생성할 수 있게 합니다. 인라인 코드나 CDN 링크를 사용하여 외부 종속성 없이 작동하는 휴대용 웹 구성 요소나 도구를 구축하는 데 이상적입니다. 개발자는 독립형이며 설정이 필요 없는 웹 인터페이스를 배포해야 할 때 이 기능을 사용해야 합니다.

빠른 설치

Claude Code

추천
기본
npx skills add vamseeachanta/workspace-hub
플러그인 명령대체
/plugin add https://github.com/vamseeachanta/workspace-hub
Git 클론대체
git clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/web-artifacts-builder-self-contained-architecture

Claude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요

문서

Self-Contained Architecture (+1)

Self-Contained Architecture

Everything in one HTML file:

  • HTML structure
  • CSS styles (inline or in <style> tags)
  • JavaScript functionality (inline or in <script> tags)
  • Data (embedded JSON or JavaScript objects)
  • Assets (inline SVG, base64 images, or CDN links)

No External Dependencies Required

<!-- Use CDN for libraries when needed -->
<script src="https://cdn.jsdelivr.net/npm/library@version"></script>

<!-- Or embed everything inline -->
<script>
// All JavaScript here
</script>

GitHub 저장소

vamseeachanta/workspace-hub
경로: .claude/skills/_internal/builders/web-artifacts-builder/self-contained-architecture

연관 스킬

content-collections

메타

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.

스킬 보기

polymarket

메타

This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.

스킬 보기

creating-opencode-plugins

메타

This skill helps developers create OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It provides the plugin structure, event API specifications, and implementation patterns for JavaScript/TypeScript modules. Use it when you need to intercept, monitor, or extend the OpenCode AI assistant's lifecycle with custom event-driven logic.

스킬 보기

himalaya-email-manager

커뮤니케이션

This Claude Skill enables email management through the Himalaya CLI tool using IMAP. It allows developers to search, summarize, and delete emails from an IMAP account with natural language queries. Use it for automated email workflows like getting daily summaries or performing batch operations directly from Claude.

스킬 보기