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