Anmelden
AzamCodes

nextjs-portfolio-performance

by @AzamCodes in AI & LLM
0
0
# Install this skill:
npx skills add AzamCodes/nextjs-portfolio-performance

Or install specific skill: npx add-skill https://github.com/AzamCodes/nextjs-portfolio-performance

# Description

Performance best practices and AI agent skill for auditing and enforcing production-grade performance optimizations in Next.js portfolio websites.

# SKILL.md

Skill: Next.js Portfolio Performance Best Practices
Description

Optimizes performance for Next.js portfolio websites by enforcing production-proven performance best practices.
This skill focuses on reducing load time, minimizing client-side overhead, and improving real-world performance metrics such as Lighthouse and Core Web Vitals.

This is an audit and enforcement skill, not a code generator.

Scope

Image optimization using Next.js primitives

Lazy loading of offscreen components and assets

Preference for static rendering (SSG) where applicable

Avoidance of blocking or unnecessary client-side JavaScript

Performance alignment with Lighthouse and Core Web Vitals

Rules

Use next/image for all non-decorative images

Avoid heavy or unnecessary client-side libraries

Prefer static rendering over dynamic rendering when possible

Lazy-load offscreen components using dynamic imports

Minimize blocking client-side JavaScript on initial load

Non-Goals

Does not handle SEO, metadata, or social sharing

Does not define UI, layout, or visual design

Does not generate or rewrite application code

Example Usage

Prompt:

Optimize performance of a Next.js portfolio page using the installed Next.js Portfolio Performance Best Practices skill.

Expected Output:

Images are optimized using next/image

Offscreen components are lazy-loaded

Static rendering is used where applicable

Blocking or unnecessary client-side code is identified

Clear, actionable performance recommendations are provided

# README.md

Next.js Portfolio Performance β€” Best Practices

Performance-focused AI skill for auditing and enforcing production-grade Next.js optimizations for portfolio websites.

Description

This skill audits a Next.js portfolio and enforces practical optimizations used in real-world deployments. It focuses on reducing load time, improving runtime efficiency, and helping achieve strong Lighthouse performance scores.

Note: this is an audit/enforcement skill β€” it recommends and reports issues rather than performing automatic refactors.

What it checks

  • Image optimization (encourages use of next/image and appropriate sizing)
  • Lazy-loading of offscreen components and media
  • Preferential use of static rendering (SSG) where applicable
  • Identification of blocking or unnecessary client-side JavaScript
  • Practical suggestions to improve Lighthouse performance and real-world UX

Scope

  • Encourages next/image for images
  • Detects heavy or unnecessary client-side libraries
  • Promotes SSG/static rendering when feasible
  • Flags blocking client-side code and render-blocking resources

Rules

  • Use next/image for images where possible
  • Avoid heavy or unnecessary client-side libraries on critical pages
  • Prefer static rendering (SSG) when data allows
  • Lazy-load offscreen components and non-critical media
  • Aim for fast, stable Lighthouse performance results

Non-goals

  • SEO or social metadata (not in scope)
  • Visual design or UI changes
  • Automatic content generation or full refactors

Installation

Run:

npx skills add azamcodes-nextjs-portfolio-performance

Example usage

Prompt example (for a human or tooling that uses this skill):

"Audit and suggest performance optimizations for my Next.js portfolio page. Highlight images that should use next/image, components that can be lazy-loaded, pages that can be statically rendered, and any blocking client-side code."

Expected results

  • Images flagged for next/image conversion and sizing suggestions
  • Offscreen components suggested for lazy-loading
  • Pages recommended for SSG when appropriate
  • Identified blocking or unnecessary client-side JavaScript with remediation notes

Contribution

Contributions, issues, and PRs welcome. See the repository: https://github.com/AzamCodes/nextjs-portfolio-performance

License

This project is licensed under the MIT License β€” see the LICENSE file for details.

# Related Skills

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.