skills.rest
agenticgogol
agenticgogolCOMMUNITY
Explore all skills by this author →
GitHub

frontend-nextjs

Scaffolds a Next.js App Router frontend that calls the backend API contract defined in design.md.

1|9|Updated Jul 11, 2026
Search Tags:#typescript#frontend#react#scaffold#nextjs#app router#api contract
One-click install
npx skills add https://github.com/agenticgogol/Edureka_Coding_Agent_Enabled_Demo_11Jul --skill frontend-nextjs-agenticgogol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-nextjs
Source: https://github.com/agenticgogol/Edureka_Coding_Agent_Enabled_Demo_11Jul/tree/main/.claude/skills/frontend-nextjs
Command: npx skills add https://github.com/agenticgogol/Edureka_Coding_Agent_Enabled_Demo_11Jul --skill frontend-nextjs-agenticgogol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a project plan calls for a web UI, developers need a consistent way to scaffold a frontend that matches the agreed backend API without inventing endpoints or hardcoding configuration. This Skill builds the Next.js frontend layer of a project according to the repo's conventions. ## Core Features & Use Cases - Convention-based scaffolding: Creates frontend/ under the project folder using the Next.js App Router, TypeScript, and minimal dependencies (plain CSS or Tailwind). - Contract-driven API calls: Every fetch call matches the endpoints documented in design.md's API contract section exactly; missing endpoints are flagged back to design rather than guessed. - Environment variable handling: Uses NEXT_PUBLIC_* variables for browser values and non-prefixed variables for server-only values, never hardcoding backend URLs. - Use Case: After design.md defines a FastAPI backend with a /chat endpoint, use this Skill to generate a TypeScript Next.js frontend whose fetch calls match that contract, runnable with npm install && npm run dev. ## Quick Start Scaffold the Next.js frontend for this project following the API contract in design.md.

Frequently Asked Questions about frontend-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold a Next.js frontend that matches a backend API contract?▼

Read the API contract section of design.md and make every fetch call match a documented endpoint exactly, including method, path, and request/response shape. If an endpoint is missing, flag it back to the design step instead of guessing backend behavior.

How to use environment variables in a Next.js frontend?▼

Use NEXT_PUBLIC_-prefixed variables for anything the browser needs and non-prefixed variables for server-only values. Never hardcode a backend URL; use an env var with a sensible local default like http://localhost:8000.

When should I use Next.js instead of Streamlit for a project frontend?▼

Next.js is the default frontend choice for projects unless the brief explicitly asks for Streamlit or another framework. Streamlit suits quick data-centric demos, while Next.js fits conventional web application interfaces.

Does the Next.js frontend skill also build or verify the backend?▼

No. It only scaffolds the frontend directory and does not touch backend or agent code. Integration and full-stack verification are handled separately by the integrate-and-assemble and run-and-verify steps.

What dependencies does a minimal Next.js demo frontend need?▼

Keep dependencies minimal: the App Router with TypeScript, plain CSS or Tailwind for styling, and no UI kit unless the brief requires one. Include a package.json with a dev script runnable via npm install and npm run dev.

Related Skills

Explore More Software Engineering Skills→
FerEscobarDevFerEscobarDev

architecture

Generates architecture documents, OpenAPI contracts, and milestone roadmaps from business requirements.

Community
Advanced
adminlove520adminlove520

fullstack-dev

Coordinates full-stack architecture for backend services and frontend-backend integration.

Community
Advanced
okgoogle13okgoogle13
1

frontend-backend-mapper

Map frontend TypeScript API calls to Python backend endpoints and generate integration reports.

Community
Intermediate
aryankumarraiaryankumarrai

streamlit

Develop interactive Streamlit web applications with Python.

Community
Basic