nextjs-portfolio-clean-code

Next.js Portfolio Clean Code Best Practices

Code-quality–focused AI Agent Skill for auditing and enforcing clean, maintainable, and idiomatic code in Next.js portfolio websites.

Description

This skill enforces clean code and maintainability best practices commonly used in real-world React and Next.js projects.
It focuses on reducing complexity, improving readability, and encouraging modern Next.js patterns such as Server Components by default.

This is an audit and enforcement skill, not an automatic refactor or code generator.

What This Skill Does

Promotes clean, maintainable React and Next.js code

Encourages Server Components as the default rendering model

Reduces unnecessary client-side logic

Enforces consistent code and folder structure

Improves long-term readability and maintainability

Rules

Follow established React component best practices

Use Server Components by default unless client-side logic is required

Maintain a consistent and predictable code style

Avoid unnecessary client-side state, effects, or logic

Use a clear, scalable folder and file structure

Scope

React component structure and responsibility

Server vs Client Component usage

Code organization and folder hierarchy

Elimination of unnecessary complexity

Maintainability and readability concerns

Non-Goals

Does not handle SEO, Open Graph, or metadata

Does not define UI, visual design, or styling

Does not optimize performance metrics directly

Installation
npx skills add azamcodes-nextjs-portfolio-clean-code

Example Usage

Prompt:

Refactor portfolio code for maintainability using the installed Next.js Portfolio Clean Code Best Practices skill.

Expected Output:

Server Components used wherever possible

Consistent folder and component structure

Reduced and intentional client-side code

Clear recommendations for improving maintainability