frontend-nextjs

Name: frontend-nextjs
Availability: InStock
Author: agenticgogol

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

Ready to run

npx skills add https://github.com/agenticgogol/Edureka_Coding_Agent_Enabled_Demo_11Jul --skill frontend-nextjs-agenticgogol

💬 Prompt for ChatGPT / Claude Chat▼

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.