web-artifacts-builder-self-contained-architecture
Sub-skill of web-artifacts-builder: Self-Contained Architecture (+1).
Best use case
web-artifacts-builder-self-contained-architecture is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sub-skill of web-artifacts-builder: Self-Contained Architecture (+1).
Teams using web-artifacts-builder-self-contained-architecture should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/self-contained-architecture/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How web-artifacts-builder-self-contained-architecture Compares
| Feature / Agent | web-artifacts-builder-self-contained-architecture | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Sub-skill of web-artifacts-builder: Self-Contained Architecture (+1).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 ```html <!-- 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> ```
Related Skills
improve-codebase-architecture
Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
label-driven-prompt-generation-architecture
Pattern for building automation scripts that classify GitHub issues into prompt templates using label-based routing and extract contextual data for batch processing
repo-architecture-analysis
Scan a Python repo's package structure, count classes/functions, classify module maturity (PRODUCTION/DEVELOPMENT/SKELETON/GAP), and generate architecture reports with Mermaid diagrams. Use when asked to analyze codebase structure, find untested packages, or assess module maturity.
doc-extraction-naval-architecture
Layer 3 domain sub-skill for extracting naval architecture data from SNAME PNA, IMO stability codes, IACS structural rules, and classification society guidelines. Provides detection heuristics for stability constants, resistance equations, hull form coefficients, hydrostatic curves, IMO stability criteria, and structural scantling tables. type: reference
sparc-architecture
SPARC Architecture phase specialist for system design, component architecture, interface design, scalability planning, and technology selection
mcp-builder
Guide for building high-quality Model Context Protocol (MCP) servers that allow LLMs to interact with external services. Use when creating new MCP integrations, tools, or servers for Codex or other AI systems.
rag-system-builder
Build Retrieval-Augmented Generation (RAG) Q&A systems with Codex or OpenAI. Use for creating AI assistants that answer questions from document collections, technical libraries, or knowledge bases.
knowledge-base-builder
Build searchable knowledge bases from document collections (PDFs, Word, text files). Use for creating technical libraries, standards repositories, research databases, or any large document collection requiring full-text search.
interactive-dashboard-builder
Create self-contained HTML/JavaScript dashboards with Chart.js, filters, and professional styling
architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
multi-tool-architecture-assessment
Systematic comparison of competing tools/approaches before committing to a multi-account, multi-tool architecture. Uses parallel subagents for research, system-state audit, and data quality analysis. Produces a decision matrix with explicit trade-offs.
modular-architecture-documentation
Systematically document multi-module system architectures including module boundaries, CLI commands, and architecture decisions.