菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
基于 SOC 职业分类
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/vstorm-co/full-stack-ai-agent-template --skill frontend-feature命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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.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 }}.