菜单
Build a new page, view, or data-driven feature in the Next.js frontend. Use when adding a route under the dashboard/marketing area, wiring UI to a backend endpoint, adding client state, or creating a localized page. Covers App Router, data fetching, Zustand stores, and i18n.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Add a new tool/function the AI agent can call (e.g. look something up, hit an external API, perform an action). Use when extending the assistant's capabilities, wiring a new function into the agent, or when the model needs a new action. This project uses {{ cookiecutter.ai_framework }}.
Create, review, and apply database schema changes with Alembic. Use whenever a SQLAlchemy model is added or changed, a column/index/constraint needs to change, or a data backfill is required — anything that alters the PostgreSQL schema.
Add or modify work that runs outside the request/response cycle — emails, document ingestion, webhooks, cleanups, scheduled jobs. Use when something is slow or fire-and-forget, or when adding a periodic/cron task. This project's queue is {{ cookiecutter.background_tasks }}.
Work with Stripe billing — subscriptions, plans/prices, the Customer Portal, credits, usage metering, invoices, and webhook events. Use when changing plans, handling a new Stripe webhook, debugging a payment/subscription flow, or touching credit balances and usage.
Work with messaging-channel bots (Telegram / Slack) — register a bot, route inbound messages through the AI agent, handle webhooks vs polling, or add a new channel adapter. Use when wiring chat into a messaging platform or debugging bot delivery.
Write or extend the backend test suite following this project's conventions. Use when adding tests for a new service/route/repository, when coverage is missing, or when asked to test a feature. Knows the mocked-session + httpx AsyncClient setup so tests run with no database.
| name | frontend-feature |
| description | Build a new page, view, or data-driven feature in the Next.js frontend. Use when adding a route under the dashboard/marketing area, wiring UI to a backend endpoint, adding client state, or creating a localized page. Covers App Router, data fetching, Zustand stores, and i18n. |
The frontend lives in frontend/src/ — App Router, TypeScript, Tailwind, next-intl, and Zustand. Routes are locale-prefixed: app/[locale]/….
| Path | Purpose |
|---|---|
src/app/[locale]/… | Pages (route groups: (dashboard), (marketing), (auth)) |
src/app/api/… | Next.js route handlers that proxy to the backend |
src/lib/ | API clients (api-client.ts, *-api.ts), query-keys.ts, helpers |
src/components/ | UI by domain (chat/, kb/, dashboard/, ui/, …) |
src/stores/ | Zustand stores (one per concern, re-exported from index.ts) |
src/hooks/ | useChat, useWebSocket, etc. |
Page — add src/app/[locale]/(dashboard)/<feature>/page.tsx. Default to a Server Component; add "use client" only where you need interactivity. Read params via the async App Router APIs.
Data access — add a typed client in src/lib/<feature>-api.ts built on api-client.ts. Don't scatter fetch calls in components. For server-side fetching use server-api.ts. If the backend needs a same-origin proxy (auth cookies), add a handler under src/app/api/….
Caching keys — register query keys in src/lib/query-keys.ts so cache invalidation stays consistent.
Client state — if the feature needs shared client state, add a store in src/stores/<feature>-store.ts and export it from stores/index.ts. Keep server data in the data layer; use stores for UI/ephemeral state.
Components — put reusable pieces in src/components/<domain>/; compose primitives from src/components/ui/. Keep components under ~100 lines — extract when they grow.
i18n — user-facing copy goes through next-intl messages, not hardcoded strings. Add keys to the message catalog and read them with useTranslations / getTranslations.
Verify:
cd frontend
bun run type-check && bun run lint
bun dev # check the page renders against a running backend (make dev)
"use client" only when needed (state, effects, event handlers).src/lib/ clients; components consume hooks/clients, not raw fetch.next-intl — never hardcode user-facing copy.components/ui/ primitives.