nextjs-frontend-guidelines

Provide Next.js 15 frontend guidelines covering React 19, TypeScript, App Router, shadcn/ui, and Tailwind CSS 4 for the YGS project.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/tlswhdghks42/voxmaster-daw --skill nextjs-frontend-guidelines-tlswhdghks42
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-frontend-guidelines
Source: https://github.com/tlswhdghks42/voxmaster-daw/tree/main/.claude/skills/nextjs-frontend-guidelines
Command: npx skills add https://github.com/tlswhdghks42/voxmaster-daw --skill nextjs-frontend-guidelines-tlswhdghks42

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and best practices for developing the YGS frontend using Next.js 15, ensuring consistency, maintainability, and performance.

Core Features & Use Cases

  • Modern Stack Guidance: Covers Next.js 15 App Router, React 19, TypeScript, shadcn/ui, and Tailwind CSS 4.
  • Pattern Enforcement: Details component patterns (Server vs. Client), data fetching, styling, authentication, and form handling specific to the YGS project.
  • Use Case: A new developer joins the YGS project and needs to build a new admin feature. They consult this Skill to understand the correct project structure, component patterns, and API usage to ensure their work aligns with the established standards.

Quick Start

Use the nextjs-frontend-guidelines skill to create a new React Server Component for the YGS project.

Frequently Asked Questions about nextjs-frontend-guidelines

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

FAQPage Schema
How do I structure components using Next.js 15 App Router and React 19?

This Skill provides detailed Next.js 15 App Router and React 19 component patterns, distinguishing between Server and Client components to ensure proper data fetching, styling, and project structure for maintainable frontend development.

What is the best way to handle forms and authentication in a Next.js frontend?

The best way to handle forms and authentication in a Next.js frontend involves following specific architectural patterns. This Skill details form handling and authentication integration guidelines using TypeScript and the App Router for secure data flow.

Can I use shadcn/ui and Tailwind CSS 4 together in a Next.js 15 project?

Yes, you can use shadcn/ui and Tailwind CSS 4 together in a Next.js 15 project. This Skill provides comprehensive styling guidelines that integrate shadcn/ui components with Tailwind CSS 4 to enforce visual consistency across your frontend architecture.

How do I fetch data in Next.js 15 App Router using TypeScript?

To fetch data in Next.js 15 App Router using TypeScript, you should utilize Server Components for direct backend access. This Skill outlines the correct data fetching patterns and TypeScript typing practices to ensure type safety and performance.

Does this Next.js 15 frontend guideline cover project structure for new developers?

Yes, this Next.js 15 frontend guideline covers project structure specifically designed for new developers. It provides comprehensive standards for the YGS project, ensuring new team members build features that align with established architectural patterns and TypeScript configurations.