一键在 Manus 中运行任何 Skill

add-frontend-page

星标19

分支6

更新时间2026年2月23日 06:59

Implement a new frontend page and wire it to the backend API (API client, types, route, components, navigation, tests). Use when adding a new screen or feature that talks to the API.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

quanwangniuniu

quanwangniuniu/marketing-simplified

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Add Frontend Page and Wire to API

When to Use

User asks to add a new page, screen, or frontend feature.
User mentions a new route or UI that needs to call the API.
Task involves creating a new Next.js page and connecting it to the backend.

Context

Follow .cursor/AGENTS.md (section "Adding a new frontend page and wiring it to the API") and .cursor/rules.md for standards and the full walkthrough.
Use any user-provided context (route path, feature name, Jira key) as scope or target.

Instructions

API client: Add typed functions in frontend/src/lib/api/<domain>Api.ts that call the backend. Use the shared api axios instance from frontend/src/lib/api.ts. Return typed data; do not call axios from components.
Types: Add or extend interfaces in frontend/src/types/ for request/response shapes.
Route: Add a page at frontend/src/app/<path>/page.tsx. Page should read route params, call API functions or hooks, compose feature components, handle loading/error UI. Keep page logic minimal.
Components: Add feature-specific UI under frontend/src/components/<feature>/. Reuse common/ and ui/ for primitives; use layout/ for shell.
Navigation: Add links or routes in the app shell (e.g. frontend/src/components/layout/ or the relevant nav component) so the new page is reachable.
Tests: Add or extend tests under frontend/src/__tests__/ (e.g. __tests__/components/<feature>/<Component>.test.tsx or integration test). Follow test file conventions in AGENTS.md (Testing section).

For the complete walkthrough and file conventions, see .cursor/AGENTS.md.

同仓库更多 Skills

同仓库

add-backend-endpoint

quanwangniuniu/marketing-simplified

Implement a new backend API endpoint using the full chain (model, serializer, service, view, url, tests). Use when adding a new resource or action to an existing or new Django app.

2026-02-2319

code-review-checklist

quanwangniuniu/marketing-simplified

Run a code review against MediaJira standards (thin views/pages, API layer placement, no secrets, error handling, permissions, tests). Use before requesting review or merging.

2026-02-2319

create-pr

quanwangniuniu/marketing-simplified

Prepare a well-structured pull request with Conventional Commits, Jira key support, clear description, and pre-merge checks. Use when changes are ready for review.

2026-02-2319

run-tests-and-fix

quanwangniuniu/marketing-simplified

Run the full test suite (backend pytest and frontend lint/test), then systematically fix any failures. Use when verifying changes or after pulling updates.

2026-02-2319

security-audit

quanwangniuniu/marketing-simplified

Perform a security pass aligned with MediaJira standards (no secrets, auth/CORS, input validation, least privilege, credential handling). Use for pre-release checks or when touching auth/sensitive code.

2026-02-2319

name	add-frontend-page
description	Implement a new frontend page and wire it to the backend API (API client, types, route, components, navigation, tests). Use when adding a new screen or feature that talks to the API.

Add Frontend Page and Wire to API

When to Use

User asks to add a new page, screen, or frontend feature.
User mentions a new route or UI that needs to call the API.
Task involves creating a new Next.js page and connecting it to the backend.

Context

Follow .cursor/AGENTS.md (section "Adding a new frontend page and wiring it to the API") and .cursor/rules.md for standards and the full walkthrough.
Use any user-provided context (route path, feature name, Jira key) as scope or target.

Instructions

API client: Add typed functions in frontend/src/lib/api/<domain>Api.ts that call the backend. Use the shared api axios instance from frontend/src/lib/api.ts. Return typed data; do not call axios from components.
Types: Add or extend interfaces in frontend/src/types/ for request/response shapes.
Route: Add a page at frontend/src/app/<path>/page.tsx. Page should read route params, call API functions or hooks, compose feature components, handle loading/error UI. Keep page logic minimal.
Components: Add feature-specific UI under frontend/src/components/<feature>/. Reuse common/ and ui/ for primitives; use layout/ for shell.
Navigation: Add links or routes in the app shell (e.g. frontend/src/components/layout/ or the relevant nav component) so the new page is reachable.
Tests: Add or extend tests under frontend/src/__tests__/ (e.g. __tests__/components/<feature>/<Component>.test.tsx or integration test). Follow test file conventions in AGENTS.md (Testing section).

For the complete walkthrough and file conventions, see .cursor/AGENTS.md.