菜单
Standardized specification for generating zero-dependency, self-contained single-file HTML web applications using CDN libraries, inline CSS/JS, and LocalStorage.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/buffer121328/vibe-coding-and-agents --skill single-file-app命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | single-file-app |
| description | Standardized specification for generating zero-dependency, self-contained single-file HTML web applications using CDN libraries, inline CSS/JS, and LocalStorage. |
This skill guides the AI agent to produce completely self-contained web applications encapsulated within a single .html file.
Zero Node/NPM Prerequisites:
.html file to open and run it directly in any modern web browser.cdn.tailwindcss.com, cdnjs.cloudflare.com, unpkg.com).Standard HTML Template Structure:
<!DOCTYPE html>
<html lang="zh-CN" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Application Title</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons CDN -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Canvas / Confetti / Sound CDN if needed -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen antialiased">
<!-- App Content -->
<div id="app" class="max-w-4xl mx-auto px-4 py-8">
<!-- Dynamic UI -->
</div>
<!-- App Logic -->
<script>
// State management, LocalStorage persistence, and Event Listeners
lucide.createIcons();
</script>
</body>
</html>
Data Persistence:
localStorage for state persistence (settings, history, user preferences, counters) so data survives page refreshes without requiring a backend database.