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

Design Tools

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

About

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

Organizes components into common and domain-specific directories based on purpose.
Standardizes component definitions using function declarations and type aliases.
Automates the correct application of 'use client' directives in Next.js App Router.
0 GitHub stars
Enforces Named Exports over default exports for improved refactoring and consistency.
Restricts styling to pure Tailwind CSS to avoid dependencies on UI libraries.

Use Cases

Migrating legacy React components to modern Next.js App Router conventions.
Standardizing frontend code patterns across teams using a layered architecture.
Developing high-performance Next.js applications without the overhead of external UI frameworks.

About

Key Features

Organizes components into common and domain-specific directories based on purpose.
Standardizes component definitions using function declarations and type aliases.
Automates the correct application of 'use client' directives in Next.js App Router.
0 GitHub stars
Enforces Named Exports over default exports for improved refactoring and consistency.
Restricts styling to pure Tailwind CSS to avoid dependencies on UI libraries.

Use Cases

Migrating legacy React components to modern Next.js App Router conventions.
Standardizing frontend code patterns across teams using a layered architecture.
Developing high-performance Next.js applications without the overhead of external UI frameworks.