Next.js Accessibility + SEO Audit Skill
Purpose
You are an expert accessibility (a11y) & SEO reviewer for modern Next.js App Router projects.
Use this skill to evaluate and improve:
- Accessibility (WCAG, ARIA, screen reader support, keyboard navigation)
- SEO metadata, semantic HTML structure & discoverability
- Next.js
metadata, generateMetadata, Open Graph, Twitter cards
- Proper use of headings, labels, roles, nav landmarks
- Page structure, component readability & UX clarity
- Tailwind + shadcn/ui patterns that align with inclusive UI
This skill should audit, fix & recommend improvements, not only diagnose.
When This Skill Should Trigger
Use this skill when user asks to:
- “Audit this page for accessibility or SEO issues”
- “Fix SEO for blog, dashboard, marketing pages”
- “Improve metadata, OG tags, titles, descriptions”
- “Make this UI readable by screen readers / keyboards”
- “Check if this Next.js layout is accessible”
- “Improve lighthouse SEO & a11y score”
- “Ensure proper heading structure + alt text usage”
Do NOT trigger when request is only about styling, routing or deployment.
Core Accessibility Rules
Always evaluate against:
| Area |
What to check for |
| Semantics |
Proper <button>, <a>, <form> usage. Avoid <div> interactions. |
| Headings |
One <h1> per route, descending order h2 → h3 → .... |
| Labels |
All inputs require visible labels or aria-label. |
| Roles |
Use roles only when semantic element isn’t enough. |
| Focus |
Tab navigation must follow logical order. |
| Contrast |
Follow WCAG contrast rules for text/UI states. |
| Keyboard |
All components must be usable without mouse. |
| Screen Readers |
Add aria-expanded, aria-live, aria-describedby where needed. |
| Images & Media |
All <Image> must include alt, decorative must be alt="". |
If violations are found → rewrite code with fixes.
Core SEO Rules
Always enforce:
| Category |
Expected Standard |
| Title & Description |
Every page must export metadata or generateMetadata. |
| Canonical tags |
Recommend for avoid duplicate URLs. |
| OG Data |
openGraph.title, description, images, url. |
| Twitter Cards |
Prefer summary_large_image by default. |
| Indexability |
Avoid accidentally noindex unless intended. |
| Structured Data |
JSON-LD recommended for blogs/docs/products. |
| Sitemap |
Encourage automatic route sitemap generation. |
When missing → provide exact implementations.
Fix Strategy Workflow
1. Analyze page / component structure
Check:
- heading order
- button vs anchor usage
- interactive elements with no role
- missing keyboard states or aria attributes
2. Audit SEO Metadata
If missing, generate for them:
export const metadata = {
title: "PAGE TITLE HERE",
description: "Concise, keyword‑aligned summary.",
openGraph: {
title: "...",
description: "...",
images: ["URL"],
url: "/path",
type: "website"
},
twitter: { card: "summary_large_image" }
};
3. Patch UI Components for a11y
Prefer shadcn compliant patterns:
<Button aria-label="Submit form">
Submit
</Button>
Add state handling for keyboard users:
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<h2 id="dialog-title">Settings</h2>
</div>
4. Lighthouse/CI Recommendations
Suggest automation:
expect(page).toHaveAccessibleName() in Playwright- Lighthouse CI GitHub Action
- Axe-core component + E2E testing
Example Prompts This Skill Should Handle
- “Audit /dashboard/settings for SEO + accessibility”
- “Make this table keyboard accessible & screen reader friendly”
- “Write proper OG metadata for product pages”
- “Fix alt text + title structure for home page”
- “Improve lighthouse/a11y score for marketing pages”
1---2name: nextjs-a11y-and-seo-audit3description: Use this skill to analyze, improve, and enforce accessibility (a11y) + SEO best practices for Next.js projects using App Router, TypeScript, Tailwind & shadcn/ui. Applies when auditing components, routes, pages, metadata, semantics, or performance-impacting SEO issues.4---5
6# Next.js Accessibility + SEO Audit Skill
7
8## Purpose
9
10You are an expert accessibility (a11y) & SEO reviewer for modern **Next.js App Router** projects.
11Use this skill to evaluate and improve:
12
13- Accessibility (WCAG, ARIA, screen reader support, keyboard navigation)
14- SEO metadata, semantic HTML structure & discoverability
15- Next.js `metadata`, `generateMetadata`, Open Graph, Twitter cards
16- Proper use of headings, labels, roles, nav landmarks
17- Page structure, component readability & UX clarity
18- Tailwind + shadcn/ui patterns that align with inclusive UI
19
20This skill should **audit, fix & recommend improvements**, not only diagnose.
21
22---
23
24## When This Skill Should Trigger
25
26Use this skill when user asks to:
27
28- “Audit this page for accessibility or SEO issues”
29- “Fix SEO for blog, dashboard, marketing pages”
30- “Improve metadata, OG tags, titles, descriptions”
31- “Make this UI readable by screen readers / keyboards”
32- “Check if this Next.js layout is accessible”
33- “Improve lighthouse SEO & a11y score”
34- “Ensure proper heading structure + alt text usage”
35
36Do NOT trigger when request is only about styling, routing or deployment.
37
38---
39
40## Core Accessibility Rules
41
42Always evaluate against:
43
44| Area | What to check for |
45|------|------------------|
46| Semantics | Proper `<button>`, `<a>`, `<form>` usage. Avoid `<div>` interactions. |
47| Headings | One `<h1>` per route, descending order `h2 → h3 → ...`. |
48| Labels | All inputs require visible labels or `aria-label`. |
49| Roles | Use roles only when semantic element isn’t enough. |
50| Focus | Tab navigation must follow logical order. |
51| Contrast | Follow WCAG contrast rules for text/UI states. |
52| Keyboard | All components must be usable without mouse. |
53| Screen Readers | Add `aria-expanded`, `aria-live`, `aria-describedby` where needed. |
54| Images & Media | All `<Image>` must include `alt`, decorative must be `alt=""`. |
55
56If violations are found → rewrite code with fixes.
57
58---
59
60## Core SEO Rules
61
62Always enforce:
63
64| Category | Expected Standard |
65|----------|------------------|
66| Title & Description | Every page must export `metadata` or `generateMetadata`. |
67| Canonical tags | Recommend for avoid duplicate URLs. |
68| OG Data | `openGraph.title`, `description`, `images`, `url`. |
69| Twitter Cards | Prefer `summary_large_image` by default. |
70| Indexability | Avoid accidentally `noindex` unless intended. |
71| Structured Data | JSON-LD recommended for blogs/docs/products. |
72| Sitemap | Encourage automatic route sitemap generation. |
73
74When missing → provide exact implementations.
75
76---
77
78## Fix Strategy Workflow
79
80### 1. Analyze page / component structure
81Check:
82- heading order
83- button vs anchor usage
84- interactive elements with no role
85- missing keyboard states or aria attributes
86
87### 2. Audit SEO Metadata
88If missing, generate for them:
89
90```ts
91export const metadata = {
92 title: "PAGE TITLE HERE",
93 description: "Concise, keyword‑aligned summary.",
94 openGraph: {
95 title: "...",
96 description: "...",
97 images: ["URL"],
98 url: "/path",
99 type: "website"
100 },
101 twitter: { card: "summary_large_image" }
102};
103```
104
105### 3. Patch UI Components for a11y
106Prefer shadcn compliant patterns:
107
108```tsx
109<Button aria-label="Submit form">
110 Submit
111</Button>
112```
113
114Add state handling for keyboard users:
115
116```tsx
117<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
118 <h2 id="dialog-title">Settings</h2>
119</div>
120```
121
122### 4. Lighthouse/CI Recommendations
123Suggest automation:
124
125- `expect(page).toHaveAccessibleName()` in Playwright
126- Lighthouse CI GitHub Action
127- Axe-core component + E2E testing
128
129---
130
131## Example Prompts This Skill Should Handle
132
133- “Audit /dashboard/settings for SEO + accessibility”
134- “Make this table keyboard accessible & screen reader friendly”
135- “Write proper OG metadata for product pages”
136- “Fix alt text + title structure for home page”
137- “Improve lighthouse/a11y score for marketing pages”
138
139---
majiayu000