Where should I place my UI components using this skill?

General-purpose components go in src/components/common, while feature-specific or business-logic-linked components go in src/components/domain.

Why does this skill prefer Named Exports over Default Exports?

Named Exports are enforced to improve refactoring reliability, enable better IDE autocomplete, and maintain naming consistency across the entire project.

How does it handle Client and Server Components?

It provides strict rules for using the 'use client' directive, ensuring it is only applied to components using React hooks, event listeners, or browser-specific APIs.

Does this skill support UI libraries like shadcn/ui or MUI?

No, this specific skill is designed to enforce a 'Pure Tailwind' approach, intentionally avoiding third-party UI libraries to keep the bundle size small and the design fully customizable.

Next.js Frontend Guidelines

Name: Next.js Frontend Guidelines
Author: Yuji181181

byYuji181181

0•

Design Tools

Enforces standardized Next.js App Router patterns and pure Tailwind CSS implementation for clean, layered architecture projects.

This skill optimizes Claude's code generation for Next.js projects by providing strict rules for component structure, styling, and file organization. It focuses on a layered architecture approach, requiring Named Exports, type aliases for props, and the explicit exclusion of third-party UI libraries in favor of pure Tailwind CSS. By guiding the AI to correctly manage 'use client' directives and directory placement for common versus domain components, it ensures a maintainable and high-performance frontend codebase that follows modern React best practices.

Key Features

01Organizes components into common and domain-specific directories based on purpose.

02Standardizes component definitions using function declarations and type aliases.

03Automates the correct application of 'use client' directives in Next.js App Router.

040 GitHub stars

05Enforces Named Exports over default exports for improved refactoring and consistency.

06Restricts styling to pure Tailwind CSS to avoid dependencies on UI libraries.

Use Cases

01Migrating legacy React components to modern Next.js App Router conventions.

02Standardizing frontend code patterns across teams using a layered architecture.

03Developing high-performance Next.js applications without the overhead of external UI frameworks.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yuji181181/next-layered-template frontend-guidelines

For use in Claude.ai and ChatGPT

Download Skill