login
AzamCodes

Next.js Portfolio Accessibility Best Practices

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

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

# Description

AI agent skill to enforce accessibility standards on Next.js portfolio websites.

# SKILL.md

Next.js Portfolio Accessibility Best Practices

Maintained by: Azam Shaikh (GitHub: azamcodes)

Accessibility-focused AI agent skill for Next.js portfolio websites. Works with Antigravity, Cursor, Gemini CLI, Claude, OpenCode, Codex, or any agent supporting Agent Skills.

Purpose

Provides guidance for enforcing accessibility standards on Next.js portfolio sites. Ensures semantic HTML, keyboard navigation, ARIA attributes, and sufficient color contrast, improving usability, inclusivity, and WCAG 2.1 compliance.

When to Apply

Use this skill when:

  • Building new portfolio pages in Next.js
  • Reviewing or refactoring existing portfolio code
  • Testing for accessibility compliance
  • Auditing pages for keyboard navigation and screen reader support

Scope

  • Semantic HTML structure (<header>, <main>, <footer>, <nav>)
  • Logical heading order (h1 β†’ h2 β†’ h3)
  • ARIA attributes for interactive/dynamic elements
  • Keyboard accessibility for all buttons, links, forms, and menus
  • Color contrast meeting WCAG 2.1 AA guidelines

Rules

  • Always use semantic HTML tags for sections and structure
  • Maintain logical and hierarchical heading order
  • Apply ARIA attributes where necessary to describe dynamic elements
  • Ensure all interactive elements are fully keyboard navigable
  • Verify sufficient color contrast for text, links, and UI components

Non-Goals

  • Does not generate textual content or copy
  • Does not optimize site performance or SEO
  • Does not create visual design or branding

# README.md

Next.js Portfolio Accessibility Best Practices

Maintained by: Azam Shaikh (GitHub: azamcodes)

Accessibility-focused AI agent skill for Next.js portfolio websites. Works with Antigravity, Cursor, Gemini CLI, Claude, OpenCode, Codex, or any agent supporting Agent Skills.

What this skill does

  • Ensures semantic HTML is used across all pages
  • Maintains logical heading order for screen readers
  • Applies ARIA attributes where necessary
  • Makes all interactive elements keyboard navigable
  • Checks color contrast to meet accessibility standards (WCAG 2.1 AA recommended)

What this skill does NOT do

  • Does not generate content or copy
  • Does not handle performance optimization
  • Does not implement SEO-specific rules

Installation

npx skills add azamcodes-nextjs-portfolio-accessibility

Description
This skill gives precise, Next.js-portfolio-specific accessibility guidance.
It helps ensure your personal/portfolio site is inclusive, screen-reader friendly, keyboard navigable, and WCAG 2.1 AA compliant.

Scope

  • Semantic HTML (<header>, <main>, <nav>, <footer>, <section>, <article>, etc.)
    Proper heading hierarchy with no levels skipped
    Responsible use of ARIA roles, labels, and properties
    Keyboard operability (Tab, Enter, Space, arrow keys, visible focus styles)
    Sufficient color contrast ratios

Compatible with: Antigravity, Cursor, Claude, Gemini CLI, OpenCode, Codex, etc.

Rules / Recommendations

Always prefer semantic HTML over generic

/
Headings must be used in strict descending order (no h3 before h2, etc.)
Use ARIA only when semantic HTML alone is not enough
All buttons, links, menus, modals, and form controls must be keyboard reachable & operable
Minimum contrast: 4.5:1 for normal text, 3:1 for large text (WCAG AA)

Non-Goals

Visual styling, themes, or design systems
Writing bio, project descriptions, or marketing text
Lighthouse performance, SEO, or Core Web Vitals improvements

Example Prompt & Expected Output
You can say:
Using the Next.js Portfolio Accessibility Best Practices skill, audit my site for accessibility issues and suggest fixes.
What you’ll typically get back:

Confirmation/correction of heading structure
List of interactive elements missing keyboard support
ARIA usage review (helpful vs unnecessary)
Color contrast failures with specific recommendations
File-by-file code suggestions or quick fixes

Contribution
Love to have your help!

⭐ Star the repo if you find it useful
πŸ› Report bugs or missing checks
πŸ’‘ Suggest new rules or improvements
πŸ”§ Submit pull requests

β†’ Issues
β†’ Pull requests
Repository: https://github.com/azamcodes/nextjs-portfolio-accessibility

# 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.