skills.rest
btabaska
btabaskaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

notepad-new-frontend-page

Check Next.js frontend page scaffolding for required files and patterns.

1|1|Updated Mar 31, 2026
Search Tags:#consistency#checklist#frontend#nextjs#web-development#notepad
One-click install
npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill notepad-new-frontend-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: notepad-new-frontend-page
Source: https://github.com/btabaska/simpler-grants-documentation-automation/tree/main/.claude/skills/notepad-new-frontend-page
Command: npx skills add https://github.com/btabaska/simpler-grants-documentation-automation --skill notepad-new-frontend-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Notepad New Frontend Page Checklist helps engineers standardize the setup of new routes in the simpler-grants-gov Next.js frontend, reducing onboarding time and inconsistencies.

Core Features & Use Cases

  • Provides a ready-made checklist for the files and patterns needed when creating a new page (frontend/src/app/<route>/page.tsx, frontend/src/components/<domain>/, frontend/src/i18n/messages/en/index.ts, frontend/src/services/fetch/, frontend/tests/components/<domain>/, frontend/e2e/).
  • Encourages consistent project structure and server component usage across all new pages.
  • Use Case: When starting a new route, follow this guide to ensure all required scaffolding is created and aligned with the team's frontend conventions.

Quick Start

Follow this checklist before coding a new page to ensure all required files and patterns are created.

Frequently Asked Questions about notepad-new-frontend-page

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

FAQPage Schema
How do I standardize new frontend pages with a checklist in Next.js?▼

To standardize new frontend pages with a checklist in Next.js, follow a scaffolding routine verifying page.tsx, domain components, translations, API fetchers, and tests. This enforces server components by default and consistent data-fetch patterns across all routes.

What files are needed when creating a new route in a Next.js app?▼

Creating a new route requires page.tsx, domain components, translation message files, API fetchers, component tests, and e2e setups. Ensuring these files are present maintains consistent project structure and standardizes the frontend route setup.

How do I enforce server components by default in new Next.js routes?▼

To enforce server components by default in new Next.js routes, use a scaffolding checklist that mandates server component usage, translation scaffolding, and recommended project structure. This ensures consistent data-fetch patterns are applied during route creation.

Does this frontend page checklist work for Next.js internationalization setup?▼

Yes, this frontend page checklist works for Next.js internationalization by requiring translation scaffolding. It ensures the frontend/src/i18n/messages/en/index.ts file is created during route setup to maintain consistent translation patterns across all new pages.

What is the best way to scaffold tests and e2e setups for new frontend pages?▼

The best way to scaffold tests and e2e setups for new frontend pages is using a standardized route creation checklist. It verifies frontend/tests/components/<domain>/ and frontend/e2e/ directories are present, ensuring consistent testing alignment with project conventions.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
applewaveapplewave
1

phase-6-ui-integration

Automate UI implementation and API integration workflows connecting frontend components to backend services.

Community
Advanced
Paxeer-NetworkPaxeer-Network
3

i18n

Manage application internationalization and translations with locale fallbacks.

Official
Intermediate
wesleyarawesleyara

new-component

Generate Vue components for the TrackGrowth app with project conventions.

Community
Intermediate