skills.rest
529-studio
529-studioOFFICIAL
Explore all skills by this author →
GitHub

add-page

Creates standardized Next.js pages with enforced route groups and file structures for Vmarble WMS interfaces.

2|1|Updated Mar 25, 2026
Search Tags:#web development#frontend#react#routing#next.js#ui components
One-click install
npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill add-page-529-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-page
Source: https://github.com/529-studio/Vmarble-Warehouse-Management-Client/tree/main/.agents/skills/add-page
Command: npx skills add https://github.com/529-studio/Vmarble-Warehouse-Management-Client --skill add-page-529-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistency in page structure, routing, and UI implementation across the Vmarble warehouse management application by enforcing a standardized template for new routes.

Core Features & Use Cases

  • Route Group Enforcement: Ensures new pages are correctly categorized into kiosk, dashboard, or auth groups.
  • Boilerplate Generation: Provides mandatory file sets including loading.tsx and error.tsx to ensure robust UX and error handling.
  • Responsive Design: Implements pre-defined layout rules and component patterns for both mobile-first kiosk interfaces and desktop-first dashboards.

Quick Start

Use the add-page skill to generate a new dashboard page for inventory reporting following the standard server component template.

Frequently Asked Questions about add-page

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

FAQPage Schema
How do I standardize Next.js page creation and routing for warehouse management interfaces?▼

Next.js route group categorization organizes pages into kiosk, dashboard, or auth folders to separate distinct interface contexts. This mechanism enforces structural consistency, ensuring mobile-first and desktop-first layouts are isolated and correctly mapped within the warehouse management system.

Do I need loading.tsx and error.tsx files when adding a new route in Next.js?▼

Next.js route group categorization organizes pages into kiosk, dashboard, or auth folders to separate distinct interface contexts. This mechanism enforces structural consistency, ensuring mobile-first and desktop-first layouts are isolated and correctly mapped within the warehouse management system.

What is the best way to structure Next.js routes for mobile kiosk and desktop dashboard apps?▼

Next.js route group categorization organizes pages into kiosk, dashboard, or auth folders to separate distinct interface contexts. This mechanism enforces structural consistency, ensuring mobile-first and desktop-first layouts are isolated and correctly mapped within the warehouse management system.

How does server component template implementation work for Next.js dashboard pages?▼

Next.js route group categorization organizes pages into kiosk, dashboard, or auth folders to separate distinct interface contexts. This mechanism enforces structural consistency, ensuring mobile-first and desktop-first layouts are isolated and correctly mapped within the warehouse management system.

Can I use custom UI components when creating a new Next.js page with standardized routing?▼

Next.js route group categorization organizes pages into kiosk, dashboard, or auth folders to separate distinct interface contexts. This mechanism enforces structural consistency, ensuring mobile-first and desktop-first layouts are isolated and correctly mapped within the warehouse management system.

Related Skills

Explore More Software Engineering Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
anyulledanyulled

separation-of-concerns

Refactor monolithic code into separate data fetching, business logic, and presentation layers.

Community
Intermediate
BrunoSantanaDeveloperBrunoSantanaDeveloper

design-system-enforcement

Enforce design-system tokens and layout specs in new UI code.

Community
Advanced
theslashdojotheslashdojo

app-router

Create and organize Next.js App Router routes and layouts.

Official
Intermediate