performance-seo-accessibility

name	performance-seo-accessibility
description	Use when reviewing or changing ERTZU performance, SEO, metadata, image loading, accessibility, keyboard behavior, responsive layout, or Core Web Vitals.

Performance SEO Accessibility

When To Use

Use this skill for metadata, image behavior, bundle size, Server/Client Component boundaries, accessibility, responsive layout, navigation, and product discovery polish.

ERTZU-Specific Instructions

• Product pages should be discoverable, fast, and accessible.
• Prefer Server Components where interactivity is not required.
• Keep Client Component boundaries narrow to reduce browser JavaScript.
• Product imagery must balance premium presentation with load performance.
• Accessibility must support real marketplace actions: search, filters, bid, buy, sell, forms, admin actions, and menus.

Files And Areas To Inspect

• src/app/layout.tsx
• src/app/page.tsx
• src/app/listings/page.tsx
• src/app/listings/[id]/page.tsx
• src/components/ProductCard.tsx
• src/components/Navbar.tsx
• src/app/globals.css
• next.config.ts
• public/*
• node_modules/next/dist/docs/01-app/01-getting-started/12-images.md
• node_modules/next/dist/docs/01-app/01-getting-started/14-metadata-and-og-images.md
• node_modules/next/dist/docs/03-architecture/accessibility.md

Concrete Checks

• Verify pages have meaningful metadata where needed.
• Verify product images have useful alt text and stable layout dimensions.
• Verify icon-only buttons have accessible names.
• Verify menus use appropriate roles or native controls where practical.
• Verify forms have labels, error states, and keyboard-operable controls.
• Verify focus states are visible and not removed.
• Verify mobile layouts avoid overlap and horizontal scrolling.
• Verify Client Components are justified by state, effects, browser APIs, or event handlers.
• Verify decorative 3D or animation does not block core product browsing.

Mistakes To Avoid

• Do not mark large static trees as Client Components just for one interactive child.
• Do not use unbounded image dimensions that shift layout.
• Do not rely on color alone for status or validation.
• Do not hide labels in checkout or admin forms.
• Do not add animations that ignore prefers-reduced-motion.
• Do not sacrifice product readability for decorative effects.