frontend

Guide Next.js 16 frontend development with FSD architecture, TypeScript, Tailwind CSS, and Zustand.

Updated Feb 5, 2026

Search Tags:#typescript #frontend #react #next.js #tailwind css #fsd

Ready to run

npx skills add https://github.com/CloakingGhost/design-pattern-viz --skill frontend-cloakingghost

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/CloakingGhost/design-pattern-viz/tree/main/ai-system/.skills/frontend
Command: npx skills add https://github.com/CloakingGhost/design-pattern-viz --skill frontend-cloakingghost

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized and efficient way to develop the frontend of the design-pattern-viz application, ensuring consistency and maintainability.

Core Features & Use Cases

Next.js 16 App Router: Guides on using the latest Next.js features for routing and server/client components.
FSD Architecture: Enforces a clear project structure for better organization and scalability.
Styling Conventions: Details on using Tailwind CSS and shadcn/ui for a consistent look and feel.
Use Case: When building a new interactive component for a design pattern's visualization, this Skill ensures it adheres to the project's architectural patterns, styling, and state management practices.

Quick Start

Follow the FSD architecture guidelines when creating new components in the frontend directory.

Frequently Asked Questions about frontend

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

FAQPage Schema

How do I structure a Next.js 16 project using Feature-Sliced Design architecture?▼

Structure a Next.js 16 project using Feature-Sliced Design (FSD) by organizing the frontend directory into clear architectural layers. This enforces strict boundaries for components, routing conventions, and state management, ensuring project scalability and maintainability.

What is the best way to manage state in a Next.js App Router project using FSD?▼

Manage state in a Next.js App Router project using Zustand. Combine Zustand with Feature-Sliced Design architecture to isolate state within specific feature slices, maintaining clean data flow and strict separation of concerns across the frontend directory.

How do I style Next.js components with Tailwind CSS and shadcn/ui?▼

Style Next.js components with Tailwind CSS and shadcn/ui by following predefined styling conventions. This approach enforces a consistent look and feel across the application while adhering to the structural rules defined by the Feature-Sliced Design architecture.

Can I use TypeScript with Next.js 16 and Feature-Sliced Design?▼

Yes, you can use TypeScript with Next.js 16 and Feature-Sliced Design. TypeScript is fully integrated into the frontend guidelines, providing type safety across routing, component structures, and Zustand state management within the App Router.