Run any Skill in Manus with one click

static-site-generator

Stars2

Forks0

UpdatedJanuary 29, 2026 at 16:36

Framework-exclusive skill for Gravito SSG (Freeze Protocol). Operates directly on PlanetCore and Orbit systems. Use when user asks to: (1) Create static site with gravito create --template static-site, (2) Configure Freeze/SSG settings, (3) Fix StaticLink navigation issues, (4) Generate sitemap via OrbitConstellation, (5) Deploy to GitHub Pages/Vercel, (6) Debug deployment issues (404, empty pages, asset loading failures, MIME type errors), (7) Troubleshoot dev environment (Vite proxy, middleware order, port conflicts).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

gravito-framework

gravito-framework/gravito

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

6 files

SKILL.md

readonly

name

static-site-generator

description

Gravito Static Site Generator (Freeze Engine)

Gravito 框架專用的靜態網站生成器。NOT a general-purpose SSG tool.

Core Packages

套件	用途
`@gravito/freeze`	SSG 核心模組
`@gravito/freeze-react`	React StaticLink + useFreeze hook
`@gravito/freeze-vue`	Vue StaticLink + useFreeze composable
`@gravito/prism`	視圖引擎 + StaticSiteGenerator (packages/prism/src/SSG.ts)
`@gravito/constellation`	Sitemap 生成 + 重定向管理

Framework Integration

PlanetCore Liftoff

Generator boots headless PlanetCore instance，確保每個頁面經過：

Middlewares: CSP, Security Headers
Orbits: OrbitIon (Inertia), OrbitPrism (Templates)
Hooks: 專案 hooks 目錄中的 Filters/Actions

Freeze Protocol

Static Generation = Freezing。透過 core.adapter.fetch 進行內部請求分派。

Workflow

# 1. Scaffold
gravito create my-site --template static-site --framework react  # or vue

# 2. Develop
bun run dev

# 3. Freeze (Build)
bun run build:static

# 4. Preview
bun run preview:static

StaticLink (Official)

NEVER use <Link> from Inertia for static routes. Use official packages：

// React - from @gravito/freeze-react
import { StaticLink, useFreeze } from '@gravito/freeze-react'
<StaticLink href="/about">About</StaticLink>

// Vue - from @gravito/freeze-vue
import { StaticLink, useFreeze } from '@gravito/freeze-vue'
<StaticLink href="/about">About</StaticLink>

Features:

自動偵測靜態環境 (github.io, vercel.app, port 4173)
i18n 路徑本地化 (getLocalizedPath)
skipLocalization prop 可跳過

Custom Hooks（建議模式）

可在 src/hooks/index.ts 定義，generate.ts 會自動調用：

// HTML 後處理（generate.ts 自動調用）
core.hooks.addFilter('ssg:rendered', async (html: string) => {
  return minify(html)
})

詳見 references/configuration.md

Development Environment

開發環境常見問題：

症狀	可能原因
前端資源 404	Vite proxy 未正確設置，或 bootstrap 順序錯誤
CSS MIME type 錯誤	強制覆蓋了 Vite 的 Content-Type
端口衝突	舊進程佔用端口

關鍵原則：

setupViteProxy 必須在 registerRoutes 之前調用
使用 app.use('*', ...) 而非 app.all('*', ...)
保留 Vite 原始 Content-Type，勿強制覆蓋

詳見 references/dev-troubleshooting.md

Best Practices

Suffix Views: Entry-point components use *View.vue / *View.tsx to avoid naming collisions
SPA Recovery: SSG 自動生成 404.html with recovery script for deep-links
Build Verification: 部署前執行 bun run preview:static 確認：
- Assets 從 /static/build/ 載入
- 404.html 存在於 root
- CNAME 檔案已生成（若適用）
Dev Environment: 確保 bootstrap 順序正確（Middleware → Proxy → Routes）

Scripts

Script	Purpose
`scripts/generate.ts`	完整 SSG 生成腳本（可複製到專案使用）
`scripts/verify.ts`	驗證構建輸出是否符合預期

generate.ts

功能完整的 SSG 腳本，包含：

Vite client build
Route rendering via core.adapter.fetch
Sitemap 生成
404.html with SPA recovery
Static asset 複製
CNAME + .nojekyll 生成

使用方式：

複製到專案根目錄
修改 BOOTSTRAP_PATH 和 KNOWN_ROUTES
bun run generate.ts

或直接使用官方 bun run build:static

verify.ts

需要配置檔（預設 ssg.verify.json）：

{
  "outDir": "dist-static",
  "checks": [
    { "file": "index.html", "contains": ["<!DOCTYPE html>"] },
    { "file": "404.html", "contains": ["SPA routing"] }
  ]
}

References

references/configuration.md: 環境變數、bootstrap 配置、hooks 說明
references/atlas-lessons.md: StaticLink 問題排查、命名衝突、SPA recovery 經驗
references/dev-troubleshooting.md: 開發環境故障排除（Vite proxy、middleware 順序、端口衝突）

More from this repository

same repository

skill-creator

gravito-framework/gravito

Helps you create and refine new Gravito Skills. Trigger this when asked to add a new skill to the ecosystem.

2026-01-292

gravito-architect

gravito-framework/gravito

將 AI 生成的程式碼轉化為深度技術規格文檔，專注於解釋邏輯、定義介面、揭示潛在風險（N+1 查詢、Race Condition、記憶體洩漏）與設計決策。適用於 Bun + TypeScript 專案。觸發時機：(1) 開發完成後需要產出技術規格書 (2) 優化需求前需要分析架構缺陷 (3) 重構前需要梳理邏輯 (4) 使用者要求「分析架構」「生成技術文檔」「解釋設計決策」

2026-01-272

ts-jsdoc-expert

gravito-framework/gravito

Enhance JSDoc annotations for TypeScript code to optimize AI comprehension. Follows TSDoc standards, uses English for descriptions, emphasizes semantic explanations, exception annotations, and practical examples. Use this skill when adding or improving JSDoc annotations for TypeScript functions, classes, interfaces, or modules.

2026-01-252

ui-ux-pro-max

gravito-framework/gravito

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

2026-01-152

adr-scaffold

gravito-framework/gravito

Specializes in generating Action-Domain-Responder (ADR) boilerplate for Gravito projects. Trigger this when adding new features or modules using the ADR pattern.

2026-01-092

architecture-refiner

gravito-framework/gravito

Expert in Gravito architecture and clean code. Trigger this for refactoring, design pattern implementation, or architectural audits.

2026-01-092

name

static-site-generator

description

Gravito Static Site Generator (Freeze Engine)

Gravito 框架專用的靜態網站生成器。NOT a general-purpose SSG tool.

Core Packages

套件	用途
`@gravito/freeze`	SSG 核心模組
`@gravito/freeze-react`	React StaticLink + useFreeze hook
`@gravito/freeze-vue`	Vue StaticLink + useFreeze composable
`@gravito/prism`	視圖引擎 + StaticSiteGenerator (packages/prism/src/SSG.ts)
`@gravito/constellation`	Sitemap 生成 + 重定向管理

Framework Integration

PlanetCore Liftoff

Generator boots headless PlanetCore instance，確保每個頁面經過：

Middlewares: CSP, Security Headers
Orbits: OrbitIon (Inertia), OrbitPrism (Templates)
Hooks: 專案 hooks 目錄中的 Filters/Actions

Freeze Protocol

Static Generation = Freezing。透過 core.adapter.fetch 進行內部請求分派。

Workflow

# 1. Scaffold
gravito create my-site --template static-site --framework react  # or vue

# 2. Develop
bun run dev

# 3. Freeze (Build)
bun run build:static

# 4. Preview
bun run preview:static

StaticLink (Official)

NEVER use <Link> from Inertia for static routes. Use official packages：

// React - from @gravito/freeze-react
import { StaticLink, useFreeze } from '@gravito/freeze-react'
<StaticLink href="/about">About</StaticLink>

// Vue - from @gravito/freeze-vue
import { StaticLink, useFreeze } from '@gravito/freeze-vue'
<StaticLink href="/about">About</StaticLink>

Features:

自動偵測靜態環境 (github.io, vercel.app, port 4173)
i18n 路徑本地化 (getLocalizedPath)
skipLocalization prop 可跳過

Custom Hooks（建議模式）

可在 src/hooks/index.ts 定義，generate.ts 會自動調用：

// HTML 後處理（generate.ts 自動調用）
core.hooks.addFilter('ssg:rendered', async (html: string) => {
  return minify(html)
})

詳見 references/configuration.md

Development Environment

開發環境常見問題：

症狀	可能原因
前端資源 404	Vite proxy 未正確設置，或 bootstrap 順序錯誤
CSS MIME type 錯誤	強制覆蓋了 Vite 的 Content-Type
端口衝突	舊進程佔用端口

關鍵原則：

setupViteProxy 必須在 registerRoutes 之前調用
使用 app.use('*', ...) 而非 app.all('*', ...)
保留 Vite 原始 Content-Type，勿強制覆蓋

詳見 references/dev-troubleshooting.md

Best Practices

Suffix Views: Entry-point components use *View.vue / *View.tsx to avoid naming collisions
SPA Recovery: SSG 自動生成 404.html with recovery script for deep-links
Build Verification: 部署前執行 bun run preview:static 確認：
- Assets 從 /static/build/ 載入
- 404.html 存在於 root
- CNAME 檔案已生成（若適用）
Dev Environment: 確保 bootstrap 順序正確（Middleware → Proxy → Routes）

Scripts

Script	Purpose
`scripts/generate.ts`	完整 SSG 生成腳本（可複製到專案使用）
`scripts/verify.ts`	驗證構建輸出是否符合預期

generate.ts

功能完整的 SSG 腳本，包含：

Vite client build
Route rendering via core.adapter.fetch
Sitemap 生成
404.html with SPA recovery
Static asset 複製
CNAME + .nojekyll 生成

使用方式：

複製到專案根目錄
修改 BOOTSTRAP_PATH 和 KNOWN_ROUTES
bun run generate.ts

或直接使用官方 bun run build:static

verify.ts

需要配置檔（預設 ssg.verify.json）：

{
  "outDir": "dist-static",
  "checks": [
    { "file": "index.html", "contains": ["<!DOCTYPE html>"] },
    { "file": "404.html", "contains": ["SPA routing"] }
  ]
}

References

references/configuration.md: 環境變數、bootstrap 配置、hooks 說明
references/atlas-lessons.md: StaticLink 問題排查、命名衝突、SPA recovery 經驗
references/dev-troubleshooting.md: 開發環境故障排除（Vite proxy、middleware 順序、端口衝突）