new-page

Generate React page components and configure routes with router and navbar integration.

Updated Jan 8, 2026
One-click install
npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-page-nutrisari-jeruk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: new-page
Source: https://github.com/nutrisari-jeruk/react-vite-template/tree/main/.claude/skills/new-page
Command: npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-page-nutrisari-jeruk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

The need for a structured and efficient way to create new page routes in a React application, complete with all necessary components and integrations.

Core Features & Use Cases

  • Automatic Page Component Creation: Generates the necessary page component file based on the user's input.
  • Router Integration: Properly wires the new page into the application router with lazy loading support.
  • Layout Configuration: Allows selection of different layouts (e.g., standalone, landing, main, auth, authenticated) to match design requirements.
  • Navbar Integration: Seamlessly integrates with the application's navigation bar, providing consistent user experience.
  • Use Case: Ideal for rapidly adding new routes in a React application with minimal setup and configurations.

Quick Start

Generate a new page for 'Profile' with the main layout at '/profile' by using the 'new-page' skill.

Frequently Asked Questions about new-page

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

FAQPage Schema
How do I create a new page route in a React application with layout and navbar integration?

To create a new page route in a React application, you need to generate the page component, wire it into the router with lazy loading, and configure the navbar. This Skill automates that entire process while supporting various layout types like auth or main.

What is the best way to add a new page to a feature-based modular React structure?

Adding a new page to a feature-based modular React structure is best handled by automatically generating the component and route configuration together. This Skill ensures your new pages seamlessly match your existing modular architecture without manual wiring.

Can I use different layout configurations like standalone or authenticated when generating React routes?

Yes, you can use different layout configurations when generating React routes. This Skill supports selecting from layouts such as standalone, landing, main, auth, and authenticated to match your specific design requirements for each new page.

Does the page generation process include lazy loading support for the React router?

Yes, the page generation process includes lazy loading support for the React router. When a new page route is created, it is properly wired into the application router with lazy loading to optimize performance and bundle delivery.

How does navbar integration work when adding a new page route?

Navbar integration works by seamlessly linking the newly generated page route into the application's navigation bar. This ensures a consistent user experience across the application without requiring manual updates to the navigation configuration.