portfolio

next-intl i18n conventions for the portfolio — locale routing, message catalogs (3 locales), translation helpers, locale switcher, and middleware locale detection. Use when adding or translating pages, adding message keys, or touching anything under src/i18n or messages.

Create a new page section/block component for this Next.js + next-intl portfolio, following the project's Server/Client split, i18n, and angular-frame design conventions. Use when asked to "add a section", "new block", "create a component for the page", "add About/Projects/Skills-style section", or build any new piece of the portfolio UI.

Add or use shadcn/ui components in this Next.js portfolio (New York style, Tailwind v4). Use when asked to "add a button/dialog/table/form", "install a shadcn component", "use a UI primitive", or build UI from shadcn components. Trigger on "shadcn", "ui component", "add a <component>".

Add or update internationalized (i18n) copy across all locales in this next-intl portfolio. Use whenever introducing or changing any user-facing string, label, section title, or data key. Trigger on "add text", "new copy", "translate", "add a key", "update wording", "i18n", "new section title", or any task that surfaces visible text.

Project file organization, naming conventions, and import patterns. Use when creating new files, organizing code, or deciding where to place modules.

React component patterns — server vs client components, styling with cn(), props interfaces. Use when creating page sections or shared components.

Use before writing or referencing any stack library — fetches version-accurate docs via the context7 MCP server so call signatures, hooks, and APIs match what is installed. Invoke on first usage of any stack library, on any non-trivial Next.js API, or when uncertain whether an API is current.

The portfolio's CSS-first Tailwind v4 design system — @theme color/font tokens, the light (cyberpunk) and .dark (Tron) themes, angular-clip utilities, AngularFrame corners, and glow effects. Use when styling, theming, or adding a design token. There is NO tailwind.config and NO Figma pipeline.

Error boundary usage, route error files, and surfacing failures (e.g. the emailjs contact form). Use when implementing error states, handling failures, or wrapping subtrees with error boundaries.

Next.js App Router patterns for the portfolio — the [locale] segment, layouts, metadata, static rendering, and loading/error route files. Use when creating route structure and page-level routing artifacts.

Use when reviewing the contact form, locale handling, redirects, external embeds, or any code that crosses a user-input or third-party trust boundary — walks the OWASP Top 10 for this specific (frontend-only) stack.

Right-sized, config-driven SEO for the portfolio — site.ts as the single source of facts, localized generateMetadata, canonical/hreflang, and robots/sitemap/manifest. Use when adding pages or touching anything under src/app or src/config/site.ts.

Vitest + Testing Library patterns for unit/component tests, Playwright for e2e. Use when writing tests or adding test coverage.