skills.rest
CloakingGhost
CloakingGhostCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/CloakingGhost/design-pattern-viz --skill frontend-cloakingghost
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
PostHogPostHog
58

instrument-integration

Instrument PostHog SDKs across popular web and mobile frameworks with verified configuration.

Official
Advanced
Insik-HanInsik-Han
16

expo-deployment

Deploy Expo apps to iOS, Android, web, and API routes via EAS.

Community
Advanced
javierhbrjavierhbr

react-fsd-zustand-ui

Enforce Feature-Sliced Design, Zustand state management, and correct useEffect usage in React applications.

Community
Intermediate
samura-devsamura-dev

frontend-engineer

Enforce architectural patterns and strict typing for React 18+ applications.

Community
Advanced