Agent Skills › vstorm-co/full-stack-ai-agent-template › frontend-feature

frontend-feature

GitHub

指导在 Next.js 15 前端构建新功能页面或视图，涵盖路由添加、API 客户端集成、Zustand 状态管理、组件开发及 i18n 本地化，确保遵循 App Router 和 Server Components 最佳实践。

template/{{cookiecutter.project_slug}}/.claude/skills/frontend-feature/SKILL.md vstorm-co/full-stack-ai-agent-template

Trigger Scenarios

需要创建新的前端页面或视图为现有功能添加 UI 交互和数据绑定实现国际化文本支持配置客户端状态存储

Install

npx skills add vstorm-co/full-stack-ai-agent-template --skill frontend-feature -g -y

More Options

Non-standard path

npx skills add https://github.com/vstorm-co/full-stack-ai-agent-template/tree/main/template/{{cookiecutter.project_slug}}/.claude/skills/frontend-feature -g -y

Use without installing

npx skills use vstorm-co/full-stack-ai-agent-template@frontend-feature

指定 Agent (Claude Code)

npx skills add vstorm-co/full-stack-ai-agent-template --skill frontend-feature -a claude-code -g -y

安装 repo 全部 skill

npx skills add vstorm-co/full-stack-ai-agent-template --all -g -y

预览 repo 内 skill

npx skills add vstorm-co/full-stack-ai-agent-template --list

SKILL.md

Frontmatter

{
    "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."
}

Frontend Feature (Next.js 15 + React 19)

The frontend lives in frontend/src/ — App Router, TypeScript, Tailwind, next-intl, and Zustand. Routes are locale-prefixed: app/[locale]/….

Layout

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.

Steps

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)

Rules

Server Components by default; "use client" only when needed (state, effects, event handlers).
All API calls go through src/lib/ clients; components consume hooks/clients, not raw fetch.
Localized strings via next-intl — never hardcode user-facing copy.
Match the existing folder-by-domain structure; reuse components/ui/ primitives.