القائمة
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 المهني
| 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.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.