Let's create two kinds of instruction file:
.github/copilot-instructions.mdโ applied everywhere in the repo (language, stack, conventions).github/instructions/frontend.instructions.mdโ a path instruction that only applies to frontend files (design tokens)
4.1 โ Create the repo-wide instruction file
Create a new file at .github/copilot-instructions.md at the root of the repository, and paste the following content as-is (create the .github folder first if it doesn't exist):
# Copilot Instructions
## Language
- Write all responses, comments, commit messages, and PR descriptions in **English**.
## Stack
- **Astro** only. Do not use Next.js, React Router, or SvelteKit.
- Use Astro components (.astro) for pages and layouts.
- Use Astro **content collections** (src/content/) for markdown content.
- Style with Tailwind CSS. Add scoped <style> blocks when needed.
- Use TypeScript everywhere (.ts files and .astro frontmatter).
## Conventions
- Pages live in src/pages/.
- Reusable UI lives in src/components/.
- Markdown lives in src/content/<collection>/*.md. Schemas are defined in src/content.config.ts.
- The package manager is **npm**.
## Code review
- Run a **self-review** before submitting changes; align with existing files' conventions, naming, and templates.
- PR descriptions must always cover **what / why / how to verify** (the three points).
- For breaking changes (frontmatter schema, routing, build config), explicitly document the reasoning and impact.
- Split large changes into smaller PRs to reduce review load.
## Documentation lookups (must follow)
Before writing any **Astro** code, you **must call the following Context7 MCP tools first**:
1. Resolve the library ID with `resolve-library-id`.
2. Fetch the latest docs with `get-library-docs`.
3. Implement based on the docs you just fetched.
โฑ ~2 min
4.2 โ Create a frontend-only path instruction
Now create a path instruction that only applies to specific file patterns. VS Code only hands this rule to Copilot when you touch files that match the applyTo glob.
Create a new file at .github/instructions/frontend.instructions.md, and paste the following content as-is (create the .github/instructions/ folder first if it doesn't exist):
---
applyTo: "**/*.{astro,css,tsx,html}"
description: "Frontend design tokens (retro JRPG theme)"
---
# Frontend Design Rules
When working on styles, components, or layouts, always apply the tokens below.
## Theme
A retro JRPG / cyberpunk arcade. A radial background of deep purple โ midnight โ pitch black, with neon accents and pixel-style typography.
## Colors
| Role | Hex | Tailwind |
| -------------------------- | --------- | ------------------- |
| Pitch black (base) | `#05060f` | `bg-shadow-ink` |
| Midnight (panels) | `#0a0e27` | `bg-midnight` |
| Deep purple (top of bg) | `#1a0b2e` | `bg-deep-purple` |
| Neon magenta | `#ff2e88` | `text-neon-magenta` |
| Neon cyan | `#00f0ff` | `text-neon-cyan` |
| Amber | `#ffb000` | `text-crt-amber` |
| Phosphor green | `#9bbc0f` | `text-gb-green` |
| Body text | `#e8f4ff` | `text-phosphor` |
Build the `body` background as a radial gradient from deep purple โ midnight โ pitch black.
## Fonts
| Usage | Font | Tailwind |
| ------------------------------------------ | ------------------- | --------------- |
| Brand headings (H1, logo, top-level label) | `'Press Start 2P'` | `font-pixel` |
| Body + headings (JA + EN, default prose) | `'DotGothic16'` | `font-pixel-jp` |
| Presentation chrome (slide counter, etc.) | `'VT323'` | `font-terminal` |
| Code blocks | `'IBM Plex Mono'` | `font-mono` |
`'Press Start 2P'` has no lowercase glyphs (everything renders uppercase), so reserve it for brand logos and top-level titles only. Use **`font-pixel-jp` (DotGothic16) for all prose** โ body, section headings, TOC, link lists, card descriptions โ it covers JA and Latin on a single pixel grid. Always fall back to `monospace` / `sans-serif`.
## Effects
- Subtle CRT scanlines (`.crt-lines`) as a full-screen overlay.
- Neon glow: `shadow-neon-magenta` / `-cyan` / `-amber` / `-green` (= `0 0 8px <color>, 0 0 24px <rgba>`).
- Borders: `1px dashed` or `2px solid` in a neon color. Keep contrast high โ no soft pastel gradients.
## Do not
- Use bright / white backgrounds.
- Use pill shapes or border-radius greater than 4px.
- Use soft gray drop shadows (use glows only).โฑ ~2 min