메뉴
Add, swap, or remove a self-hosted web font (latin variable woff2 from fontsource, localized via next/font/local). Use when adding a font role, or debugging font loading, preload, or CLS.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Add a new shared workspace package under packages/*. Use when creating a new @packages/<name>, whether a bundled library other workspaces import or a build-only script package that runs during a build.
Orient in this repo: which file to edit for a change, how a change ripples across the stack, and how to search the code. Use at the start of a task in an unfamiliar area, or before a cross-cutting change.
Prefer Bun-native APIs, else Node built-ins with the node: prefix. Use when importing a Node built-in (fs, path, child_process, crypto, os, util), reading or writing files, spawning a process, or choosing between a Bun and a Node API.
Icebox a raised-but-undecided concern instead of forcing a plan-or-dismiss call: record it with no verdict so the context survives. Use when a review, PR, audit, or eval surfaces something real-maybe that should not be scheduled or closed yet, or when the user says to icebox or park an item.
Add a typed Hono API endpoint or WebSocket route: router, OpenAPI docs, validation envelope, and RPC client wiring. Use when adding or modifying routes in api/hono.
Start, restart, and verify the ZeroStarter dev stack. `bun run dev` serves portless named `.localhost` URLs (branch-prefixed in a worktree); resolve them with `bunx portless get`. Use when asked to run the app, when the API returns NOT_FOUND for routes that exist in source, or before browser testing.
| name | fonts |
| description | Add, swap, or remove a self-hosted web font (latin variable woff2 from fontsource, localized via next/font/local). Use when adding a font role, or debugging font loading, preload, or CLS. |
Fonts are self-hosted through next/font/local, which generates the metric-adjusted "<family> Fallback" faces that hold CLS near zero. Do NOT switch to fontsource CSS imports: the bundler resolves their url() references to node_modules paths that 404 in dev, and they cannot emit the compiler-only fallback metrics.
web/next/src/fonts/*.woff2, vendored latin variable filesweb/next/src/lib/fonts.ts, one localFont per family, each exporting a CSS variableweb/next/src/app/layout.tsx, the variables applied on <html>web/next/src/app/globals.css @theme inline, roles chain to the font variables (--font-sans: var(--font-dm-sans), sans-serif)Fetch the latin variable file straight from the fontsource CDN, no dependency needed:
curl -L -o web/next/src/fonts/<name>-latin-wght-normal.woff2 \
https://cdn.jsdelivr.net/npm/@fontsource-variable/<name>/files/<name>-latin-wght-normal.woff2
Define it in web/next/src/lib/fonts.ts: localFont({ src: "../fonts/<file>", variable: "--font-<name>", weight: "<min> <max>" }). The weight range is MANDATORY for variable fonts: omit it and the face defaults to 400, so every bold glyph becomes faux-bold synthesis. Read the range from the fontsource CSS: curl -s https://cdn.jsdelivr.net/npm/@fontsource-variable/<name>/index.css | grep font-weight. A serif also sets adjustFontFallback: "Times New Roman" (the default fallback metrics are Arial).
Apply the export's .variable on <html> in layout.tsx.
Wire the role in globals.css @theme inline: --font-<role>: var(--font-<name>), <generic>.
Verify loading: dev CSS emits hashed /_next/static/media/*.woff2 urls plus generated "<family> Fallback" faces, and a production build (Vercel preview, protection-bypass header) emits one <link rel="preload" as="font"> per file. No font 404s.
If a public page changed, check CLS and LCP for layout shift before shipping.
web/next/src/lib/fonts.ts preloads on every page, because the root layout imports it. To scope a font's preload to specific routes, declare it in a module only those routes import: author-only fonts live in web/next/src/lib/marketing/fonts.ts with woff2 under web/next/src/fonts/marketing/.src is an array of { path, style } entries and one top-level weight covers both. Mono renders synthetic oblique for italics, chosen.src as an array with a weight per entry.localFont definition, the <html> variable, and the globals.css role, then grep the variable name to catch stragglers.