Skills Guide

Add Frontend Page and Wire to API

VerifiedSafe

Implement a new frontend page with route, components, types, and API calls. Use this skill when adding a screen or feature that talks to the API.

Download and use
Sby Skills Guide Bot
DevelopmentIntermediate
7/28/2026
Claude CodeCursor
#frontend#nextjs#api-integration#react#typescript

Recommended for

Backend developerClaude CodeCode reviewFrontend developerCursorFullstack developer

Automated summary

Guides the implementation of a new Next.js frontend page and its wiring to the backend API, from typed API client through tests and navigation.

Strengths

  • Breaks the work into concrete steps: API client, types, route, components, navigation, tests
  • Enforces clear conventions (shared axios instance, no axios calls inside components, minimal page logic)
  • Explicitly covers loading and error states and reuse of existing primitives
  • Includes updating navigation and adding tests, which are commonly overlooked

Limitations

  • Tightly coupled to a specific folder layout (frontend/src/app, frontend/src/lib/api) and assumes Next.js with the App Router
  • Heavily relies on internal rule files (.cursor/AGENTS.md, .cursor/rules.md) that are not shipped with the skill
  • Does not address visual design, accessibility, or styling beyond reusing existing components
When to use it

Use it when adding a new screen or frontend feature that needs to call the backend API in a Next.js project.

When not to use it

Avoid it on projects that do not use Next.js or this folder structure, or for purely cosmetic tweaks that involve no API calls.

Security analysis

Safe
Quality score82/100

The skill provides routine frontend development instructions for adding a Next.js page and wiring it to an API. It does not instruct destructive commands, secret exfiltration, obfuscated execution, dependency installation via shell pipes, or safety-disabling behavior.

No concerns found

How this analysis is made

Examples

Nouvelle page de liste
Add a new frontend page at /invoices that lists the user's invoices from the backend API, with loading and error states, and link it in the main navigation.
Écran de détail
Create a new Next.js page for viewing a single project by id, wire it to the API with a typed client in frontend/src/lib/api, and add tests under frontend/src/__tests__.
Fonctionnalité avec formulaire
Implement a new 'team members' screen that fetches members from the API and lets me invite one by email, following the add-frontend-page conventions.

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

  1. 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.
  2. Types: Add or extend interfaces in frontend/src/types/ for request/response shapes.
  3. 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.
  4. Components: Add feature-specific UI under frontend/src/components/<feature>/. Reuse common/ and ui/ for primitives; use layout/ for shell.
  5. 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.
  6. 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.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/add-frontend-page-and-wire-to-api-ms47vpqs/download' --output '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md.part' && mv '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md.part' '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md' && test -s '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/add-frontend-page' && cp -R '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs' '.claude/skills/add-frontend-page'

Cursor
test -f '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md' && test -s '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/add-frontend-page' && cp -R '.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs' '.cursor/skills/add-frontend-page'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs'

openskills read 'add-frontend-page-and-wire-to-api-ms47vpqs'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/add-frontend-page-and-wire-to-api-ms47vpqs/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot