菜单
Use when implementing an embedded single-page frontend bundled into a Go binary via embed.FS - covers HTML structure, Tailwind setup, Catppuccin theme, static asset management, embed.FS patterns, icons, and PWA. Not for templ/htmx server-rendered HTML or externally-built SPAs.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when implementing CLI commands with Cobra - covers root command setup, subcommand patterns, flags, output lifecycle patterns, and TUI output with bubbletea/lipgloss
Use when writing, refactoring, reviewing, or testing ANY Go code. The canonical reference for Go conventions — project taxonomy (CLI Only / Web Only / CLI + Web / Headless API Service / Library), project layout, modern Go 1.26+ idioms (wg.Go, t.Context(), range-over-int, slices/maps/cmp, errors.AsType, min/max/clear, new(value)), edge-case-driven unit testing (add/write Go tests, table-driven, edge cases), core principles, dependency selection, logging, and the utils package. Load this for any Go work. The `develop` skill is the per-task entry point that selects and applies these conventions.
Use when reviewing existing code against development skill best practices — orchestrates multi-agent domain reviews for thoroughness
Entry point for ANY coding work in a project that has these skills installed — implementing a feature, changing or refactoring code, fixing a bug, writing tests, scaffolding something new, or touching build/CI. Selects and loads the development skills that govern the task up front, holds the work to them while coding, and ends with a quick self-review that the skills were actually followed. Use this whenever you are about to develop anything.
Use when implementing Go backend logic - covers internal package architecture, error handling, HTTP servers, storage patterns, and OAuth authentication for CLI clients (browser/device/manual flows, not server-side web OAuth)
Use when running concurrent work or orchestrating multi-job pipelines in Go - covers goroutine patterns (WaitGroup, errgroup, semaphores, fan-out/fan-in), error handling, cancellation, and the Highway pattern for progress tracking and resume
| name | go-frontend |
| description | Use when implementing an embedded single-page frontend bundled into a Go binary via embed.FS - covers HTML structure, Tailwind setup, Catppuccin theme, static asset management, embed.FS patterns, icons, and PWA. Not for templ/htmx server-rendered HTML or externally-built SPAs. |
| user-invocable | false |
Embedded frontend patterns for Go web services.
Use this skill when:
Requires: go-foundations for project layout.
internal/server/
├── server.go # HTTP server setup
└── static/
├── index.html # Main (often only) HTML file
├── manifest.json # PWA manifest (if PWA enabled)
├── sw.js # Service worker (if PWA enabled)
├── app.js # Application JavaScript (if needed)
├── css/ # Downloaded CSS (GitHub markdown, Inter font, etc.)
├── fonts/ # Downloaded fonts (Inter woff2 files)
├── fontawesome/ # Font Awesome assets
│ ├── css/
│ └── webfonts/
├── icons/ # App icons, favicons
│ ├── favicon.ico # 32x32 ICO for legacy browsers
│ ├── favicon.png # 32x32 PNG
│ ├── apple-touch-icon.png # 180x180 for iOS
│ ├── icon-192.png # 192x192 for PWA
│ ├── icon-512.png # 512x512 for PWA splash
│ └── logo.png # App logo (any size)
└── js/ # Downloaded JS (tailwindcss.js, marked.js, etc.)
The embed.FS server that serves these assets is owned by go-backend. Use ../go-backend/references/http-server-template.md for the full server.go (//go:embed static, fs.Sub, http.StripPrefix for /static/, and handleIndex serving static/index.html). This skill covers what goes inside static/; go-backend covers how it is served.
See ./references/html-template.md for the complete HTML template with:
For Markdown rendering styles, see the Markdown Rendering section below.
The minimal page is: <head> with icon links, Inter/Font Awesome CSS, an inline :root block of Catppuccin Mocha CSS variables, and the Tailwind Play-CDN script wiring those variables into tailwind.config.theme.extend.colors; <body class="bg-base text-text min-h-screen">. The full boilerplate is in ./references/html-template.md — copy from there rather than retyping it.
<style> blocks within HTMLcss/ directoryhtml.dark class switchingtailwindcss.js (the Play CDN, vendored to js/) compiles utility classes in-browser at runtime. It's fine for embedded tools and dashboards, but Tailwind explicitly marks it "not for production." If the app needs production-grade CSS (smaller payload, no runtime compile), switch to a build step that emits a static tailwind.css.index.htmlapp.js only when many pages need it| File | Size | Purpose |
|---|---|---|
favicon.ico | 32x32 | Legacy browser tab icon |
favicon.png | 32x32 | Modern browser tab icon |
apple-touch-icon.png | 180x180 | iOS home screen |
icon-192.png | 192x192 | PWA icon (Android) |
icon-512.png | 512x512 | PWA splash screen |
logo.png | Any | In-app branding |
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
Add PWA support when the app should be installable on mobile/desktop. The pieces:
static/manifest.json — name, icons (192/512), display: standalone, theme/background colors<meta> tags + <link rel="manifest"> in <head>static/sw.js — a no-op service worker (registration only, no caching)</body>Full manifest.json, meta tags, sw.js, and the registration snippet are in ./references/html-template.md (PWA Files). Drop all of them if not building a PWA.
Use these libraries for UI icons (in order of preference):
| Priority | Library | Use For | CDN |
|---|---|---|---|
| 1st | Lucide | General UI icons | unpkg.com/lucide@latest |
| 2nd | Font Awesome | Fallback, brand icons | jsdelivr.net |
| 3rd | Dev Icons | Developer/tech logos | cdn.jsdelivr.net/gh/devicons/devicon@latest |
<script src="/static/js/lucide.min.js"></script>
<script>lucide.createIcons();</script>
<!-- Usage -->
<i data-lucide="settings"></i>
<i data-lucide="user"></i>
<i data-lucide="chevron-right"></i>
<link rel="stylesheet" href="/static/fontawesome/css/all.min.css">
<!-- Usage -->
<i class="fas fa-cog"></i>
<i class="fab fa-github"></i>
<link rel="stylesheet" href="/static/css/devicon.min.css">
<!-- Usage -->
<i class="devicon-go-original-wordmark"></i>
<i class="devicon-docker-plain"></i>
<i class="devicon-kubernetes-plain"></i>
fa-github, fa-twitter) or when Lucide lacks the iconAssets downloaded via make assets target:
| Asset | Source | Location |
|---|---|---|
| Tailwind CSS | cdn.tailwindcss.com | js/tailwindcss.js |
| Lucide | unpkg.com/lucide@latest | js/lucide.min.js |
| Font Awesome | jsdelivr.net | fontawesome/css/, fontawesome/webfonts/ |
| Dev Icons | jsdelivr.net/gh/devicons/devicon@latest | css/devicon.min.css |
| Inter Font | fonts.googleapis.com | css/inter.css, fonts/*.woff2 |
| JetBrains Mono | fonts.googleapis.com | css/jetbrains-mono.css, fonts/*.ttf |
| Marked.js | jsdelivr.net | js/marked.min.js |
| Highlight.js | jsdelivr.net/gh/highlightjs/cdn-release@latest | js/highlight.min.js |
| Highlight.js Theme | Same CDN, styles/github-dark.min.css | css/github-dark.min.css |
| Chart.js | jsdelivr.net | js/chart.umd.js |
| Mermaid.js | jsdelivr.net | js/mermaid.min.js |
Note: Font Awesome CSS needs patching to fix webfont paths:
sed -i '' 's|../webfonts/|/static/fontawesome/webfonts/|g' fontawesome/css/all.min.css
Pin versions for reproducible builds: the @latest URLs above are convenient but make make assets non-deterministic — a fresh download can pull a new major version that breaks rendering. For anything beyond a throwaway prototype, pin each asset to a specific version (e.g. marked@12.0.0, mermaid@11.4.1, lucide@0.460.0) in the Makefile download URLs and bump them deliberately.
async function fetchData() {
try {
const response = await fetch('/api/data');
if (!response.ok) throw new Error('Failed to fetch');
return await response.json();
} catch (error) {
console.error('Error:', error);
showError('Failed to load data');
}
}
<div id="toast" class="fixed bottom-4 right-4 hidden">
<div class="bg-surface0 text-text px-4 py-2 rounded-lg shadow-lg border border-surface1">
<span id="toast-message"></span>
</div>
</div>
<script>
function showToast(message, type = 'info') {
const toast = document.getElementById('toast');
const msg = document.getElementById('toast-message');
msg.textContent = message;
// Color based on type
const colors = {
info: 'text-blue',
success: 'text-green',
error: 'text-red',
warning: 'text-yellow'
};
msg.className = colors[type] || colors.info;
toast.classList.remove('hidden');
setTimeout(() => toast.classList.add('hidden'), 3000);
}
</script>
<div id="loading" class="flex items-center justify-center p-4">
<i data-lucide="loader-2" class="text-blue text-2xl animate-spin"></i>
</div>
<script>
function showLoading() {
document.getElementById('loading').classList.remove('hidden');
lucide.createIcons();
}
function hideLoading() {
document.getElementById('loading').classList.add('hidden');
}
</script>
When the frontend renders Markdown content (notes, documentation, etc.), use Marked.js with a custom renderer, Highlight.js for syntax highlighting, and Catppuccin-styled CSS for all elements.
See ./references/markdown-rendering.md for the complete implementation:
> [!TIP], > [!NOTE], > [!INFO], > [!WARNING], > [!DANGER] with Lucide icons<pre> blocks with Lucide copy/check iconsSee ./references/mermaid-config.md for the complete Mermaid.js configuration:
mermaid.initialize() config with Catppuccin Mocha theme variablestheme: 'base' for Mermaid so all colors come from themeVariables (not a built-in theme)startOnLoad: false and call mermaid.run() manually after marked.parse()addCopyButtons() and lucide.createIcons() after rendering markdown#fab387) on surface0; code blocks use mantle background