skills.rest
AryanMohanlall
AryanMohanlallCOMMUNITY
Explore all skills by this author →
GitHub

setup-project

Scaffolds a Next.js project with folder structure, dependencies, providers, and authentication wiring.

Updated Mar 26, 2026
Search Tags:#typescript#authentication#scaffolding#project setup#next.js#axios#ant design
One-click install
npx skills add https://github.com/AryanMohanlall/SafeGuard --skill setup-project-aryanmohanlall
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-project
Source: https://github.com/AryanMohanlall/SafeGuard/tree/main/.agents/skills/setup-project
Command: npx skills add https://github.com/AryanMohanlall/SafeGuard --skill setup-project-aryanmohanlall

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires antd, antd-style, @ant-design/nextjs-registry, axios, js-cookie, redux-actions.

What problem does it solve? Setting up a new Next.js frontend from scratch involves repetitive decisions about folder structure, dependency selection, environment configuration, and wiring authentication and state providers into the root layout. This Skill codifies those decisions into a canonical, repeatable setup so every project starts with the same conventions. ## Core Features & Use Cases - Dependency Installation: Installs Ant Design, antd-style, @ant-design/nextjs-registry, axios, js-cookie, and redux-actions with their TypeScript types. - Canonical Folder Structure: Defines the src/ layout with route groups for auth and dashboard pages, components, HOCs, providers, and utilities. - Auth & HTTP Plumbing: Provides a canonical axiosInstance with token interceptors, a withAuth HOC for route protection, and a composed AppProviders tree wired into the root layout with AntdRegistry. - Use Case: When starting the SafeGuard frontend, use this Skill to scaffold the entire Next.js app skeleton, configure NEXT_PUBLIC_API_URL, and have login-protected dashboard pages ready for feature development. ## Quick Start Ask the AI to scaffold the SafeGuard Next.js project with the standard folder structure, dependencies, and root layout providers.

Frequently Asked Questions about setup-project

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

FAQPage Schema
How do I set up a Next.js project with Ant Design and App Router?▼

Install antd, antd-style, and @ant-design/nextjs-registry, then wrap your root layout children with AntdRegistry to handle server-side style rendering. Add your global providers inside AntdRegistry so all pages share the same context.

How to add axios authentication interceptors in Next.js?▼

Create an axios instance with a request interceptor that reads the token from js-cookie and attaches it as a Bearer header. Add a response interceptor that clears the token and redirects to /login on 401 responses.

How do I protect routes in Next.js App Router?▼

Use a withAuth higher-order component that checks authentication state and the stored token, redirecting unauthenticated users to /login via router.replace. Wrap each protected page component with this HOC and show a loading spinner while auth state resolves.

Does @ant-design/nextjs-registry work with Next.js App Router?▼

Yes, @ant-design/nextjs-registry is designed for the App Router to extract and inject Ant Design styles during server-side rendering. Wrap it around your layout body content to prevent style flickering on page load.

Why does my axios instance lose the auth token after refresh?▼

Tokens stored only in memory disappear on refresh. Persist the token with js-cookie using secure and sameSite strict flags, then read it in the request interceptor on every call so the header is always attached.

Related Skills

Explore More Software Engineering Skills→
darellchua2darellchua2
4

nextjs-standard-setup

A short, concise statement (3-5 words) that summarizes the essence of your pitch, ideally using keywords from your pitch and/or highlighting the main pain point you solve.

Community
Advanced
mayankbisht689-codemayankbisht689-code

auth-work

Implement authenticated access and protected routes using Wix Member Features.

Community
Advanced
szczodrowskyszczodrowsky

static-code-analysis-typescript

Configure ESLint, TypeScript, Prettier, Husky, lint-staged, and GitHub Actions workflows.

Community
Advanced
quanngynxquanngynx

react-2026

Map React project requirements to framework, build tool, routing, and state management choices.

Community
Intermediate