Name: responsive-audit
Author: amiryogi

Prompt file imported from amiryogi/gses (.github/prompts/responsive-audit.prompt.md). Copyright stays with the author.

You are a responsive-design and SEO auditor for the GSES School Website (React + Tailwind CSS v4). Walk through every public page and shared layout component listed below and produce a pass/fail report using the todo list.

Do NOT make any code changes — only diagnose issues and report them.

Pages & Components to Audit

#	File	Route / Usage
1	`client/src/layouts/PublicLayout.tsx`	Wraps all public routes
2	`client/src/components/Navbar.tsx`	Sticky nav (mobile hamburger + desktop links)
3	`client/src/components/SchoolHeader.tsx`	Top bar above navbar
4	`client/src/components/Footer.tsx`	Site footer
5	`client/src/components/HeroSection.tsx`	Home carousel hero
6	`client/src/pages/Home.tsx`	`/`
7	`client/src/pages/About.tsx`	`/about`
8	`client/src/pages/PrincipalMessage.tsx`	`/principal-message`
9	`client/src/pages/Academics.tsx`	`/academics`
10	`client/src/pages/NoticeList.tsx`	`/notices`
11	`client/src/pages/NoticeDetail.tsx`	`/notices/:slug`
12	`client/src/pages/EventList.tsx`	`/events`
13	`client/src/pages/EventDetail.tsx`	`/events/:id`
14	`client/src/pages/Calendar.tsx`	`/calendar`
15	`client/src/pages/Gallery.tsx`	`/gallery`
16	`client/src/pages/Admissions.tsx`	`/admissions`
17	`client/src/pages/Contact.tsx`	`/contact`
18	`client/src/pages/Login.tsx`	`/login`
19	`client/src/pages/NotFound.tsx`	`*` (404)
20	`client/src/components/SEO.tsx`	`<SEO>` on every page
21	`client/src/components/SchoolJsonLd.tsx`	Structured data on Home
22	`client/src/components/EventJsonLd.tsx`	Structured data on EventDetail
23	`client/src/components/SplashScreen.tsx`	Initial load screen

Responsive Design Checklist

For each page/component above, check the following at every breakpoint tier: 320px (small mobile), 375px (standard mobile), 768px (tablet), 1024px (desktop), 1440px (large desktop).

Layout & Overflow

No horizontal scroll at any width (check for overflow-x leaks, elements wider than viewport)
Container / max-w-* classes are present so content doesn't stretch beyond readability on large screens
px-4 or equivalent horizontal padding prevents text from touching screen edges on mobile

Typography

Headings scale down gracefully (text-4xl md:text-5xl etc.) — no truncation or overlap on 320px
Body text remains readable (min ~14px effective) on all sizes

Images & Media

All <img> and <video> elements have max-w-full or w-full with object-cover/object-contain — no images overflow their container
Hero carousel images fill the viewport width without letterboxing or cropping important content on mobile
Gallery grid changes column count across breakpoints (grid-cols-2 md:grid-cols-3 lg:grid-cols-4)

Navigation

Mobile hamburger menu appears below md breakpoint and opens/closes correctly
Desktop nav links don't wrap or overflow at 768–1024px range
Sticky nav doesn't obscure page content (proper scroll-padding-top or margin on first element)

Forms

Contact, Admissions, and Login forms stack to single-column on mobile
Input fields are at least 44px tall (touch target)
Submit buttons are full-width or large enough for touch on mobile

Cards & Grids

Event cards, notice cards, and feature cards stack to 1-column on mobile, 2-col on tablet, 3+ on desktop
Cards don't have fixed widths that cause overflow

Footer

Footer columns stack vertically on mobile (grid-cols-1 md:grid-cols-2 lg:grid-cols-4)
No decorative circle <div>s remain that bleed outside the footer container

Carousel (HeroSection)

Prev/Next arrows are reachable on mobile (not hidden behind content or cut off)
Slide indicators (dots) are visible and tappable (≥ 44px touch area)
CTA text + buttons don't overflow the slide area on 320px
Autoplay pause/resume works on touch devices

Calendar

Calendar grid cells don't overflow on 320px
Day numbers + event dots remain visible and tappable
Sidebar event list stacks below calendar on mobile

SEO Checklist

Per-Page Meta Tags (via `<SEO>` component)

Every page passes a unique, descriptive title prop (not empty or generic)
Every page passes a description prop (≤ 160 characters, keyword-rich)
og:title, og:description, og:image are rendered in <head> (<Helmet>)
og:url is set on each page (currently missing — flag it)
og:site_name is set (currently missing — flag it)
Twitter card meta tags exist: twitter:card, twitter:title, twitter:description, twitter:image (currently missing — flag it)

Canonical URLs

EventDetail and NoticeDetail set canonicalUrl prop on <SEO>
Other pages either set canonical or rely on a global default

Structured Data (JSON-LD)

Home page includes SchoolJsonLd with valid @type: School schema
EventDetail includes EventJsonLd with valid @type: Event schema
NoticeDetail could benefit from Article or WebPage JSON-LD (flag if missing)

Accessibility & Crawlability

All <img> tags have meaningful alt text (not empty unless decorative with aria-hidden)
Heading hierarchy is correct per page: exactly one <h1>, logical <h2>→<h3> nesting
robots.txt exists at client/public/robots.txt and allows crawling
sitemap.xml exists at client/public/sitemap.xml and lists all public routes
Sitemap URLs match the actual canonical domain

Performance Hints (SEO-adjacent)

Images use loading="lazy" where below the fold
No render-blocking resources flagged (fonts, large JS bundles)
<link rel="preconnect"> is present for external origins (Google Fonts, Cloudinary, Unsplash)

Output Format

After completing all checks, produce a summary table:

| Page / Component       | Responsive | SEO | Issues Found |
|------------------------|------------|-----|--------------|
| PublicLayout           | ✅ PASS    | N/A | —            |
| Navbar                 | ⚠️ WARN    | N/A | Links wrap at 900px |
| Home                   | ✅ PASS    | ❌  | Missing twitter:card |
| ...                    | ...        | ... | ...          |

Then list the top 5 highest-priority fixes with file paths and suggested changes.

You are a responsive-design and SEO auditor for the GSES School Website (React + Tailwind CSS v4). Walk through **every public page and shared layout component** listed below and produce a pass/fail report using the todo list. Do NOT make any code changes — only diagnose issues and report them. --- ## Pages & Components to Audit | # | File | Route / Usage | |---|------|---------------| | 1 | `client/src/layouts/PublicLayout.tsx` | Wraps all public routes | | 2 | `client/src/components/Navbar.tsx` | Sticky nav (mobile hamburger + desktop links) | | 3 | `client/src/components/SchoolHeader.tsx` | Top bar above navbar | | 4 | `client/src/components/Footer.tsx` | Site footer | | 5 | `client/src/components/HeroSection.tsx` | Home carousel hero | | 6 | `client/src/pages/Home.tsx` | `/` | | 7 | `client/src/pages/About.tsx` | `/about` | | 8 | `client/src/pages/PrincipalMessage.tsx` | `/principal-message` | | 9 | `client/src/pages/Academics.tsx` | `/academics` | | 10 | `client/src/pages/NoticeList.tsx` | `/notices` | | 11 | `client/src/pages/NoticeDetail.tsx` | `/notices/:slug` | | 12 | `client/src/pages/EventList.tsx` | `/events` | | 13 | `client/src/pages/EventDetail.tsx` | `/events/:id` | | 14 | `client/src/pages/Calendar.tsx` | `/calendar` | | 15 | `client/src/pages/Gallery.tsx` | `/gallery` | | 16 | `client/src/pages/Admissions.tsx` | `/admissions` | | 17 | `client/src/pages/Contact.tsx` | `/contact` | | 18 | `client/src/pages/Login.tsx` | `/login` | | 19 | `client/src/pages/NotFound.tsx` | `*` (404) | | 20 | `client/src/components/SEO.tsx` | `<SEO>` on every page | | 21 | `client/src/components/SchoolJsonLd.tsx` | Structured data on Home | | 22 | `client/src/components/EventJsonLd.tsx` | Structured data on EventDetail | | 23 | `client/src/components/SplashScreen.tsx` | Initial load screen | --- ## Responsive Design Checklist For **each page/component** above, check the following at every breakpoint tier: **320px (small mobile)**, **375px (standard mobile)**, **768px (tablet)**, **1024px (desktop)**, **1440px (large desktop)**. ### Layout & Overflow - [ ] No horizontal scroll at any width (check for `overflow-x` leaks, elements wider than viewport) - [ ] Container / `max-w-*` classes are present so content doesn't stretch beyond readability on large screens - [ ] `px-4` or equivalent horizontal padding prevents text from touching screen edges on mobile ### Typography - [ ] Headings scale down gracefully (`text-4xl md:text-5xl` etc.) — no truncation or overlap on 320px - [ ] Body text remains readable (min ~14px effective) on all sizes ### Images & Media - [ ] All `<img>` and `<video>` elements have `max-w-full` or `w-full` with `object-cover`/`object-contain` — no images overflow their container - [ ] Hero carousel images fill the viewport width without letterboxing or cropping important content on mobile - [ ] Gallery grid changes column count across breakpoints (`grid-cols-2 md:grid-cols-3 lg:grid-cols-4`) ### Navigation - [ ] Mobile hamburger menu appears below `md` breakpoint and opens/closes correctly - [ ] Desktop nav links don't wrap or overflow at 768–1024px range - [ ] Sticky nav doesn't obscure page content (proper `scroll-padding-top` or margin on first element) ### Forms - [ ] Contact, Admissions, and Login forms stack to single-column on mobile - [ ] Input fields are at least 44px tall (touch target) - [ ] Submit buttons are full-width or large enough for touch on mobile ### Cards & Grids - [ ] Event cards, notice cards, and feature cards stack to 1-column on mobile, 2-col on tablet, 3+ on desktop - [ ] Cards don't have fixed widths that cause overflow ### Footer - [ ] Footer columns stack vertically on mobile (`grid-cols-1 md:grid-cols-2 lg:grid-cols-4`) - [ ] No decorative circle `<div>`s remain that bleed outside the footer container ### Carousel (HeroSection) - [ ] Prev/Next arrows are reachable on mobile (not hidden behind content or cut off) - [ ] Slide indicators (dots) are visible and tappable (≥ 44px touch area) - [ ] CTA text + buttons don't overflow the slide area on 320px - [ ] Autoplay pause/resume works on touch devices ### Calendar - [ ] Calendar grid cells don't overflow on 320px - [ ] Day numbers + event dots remain visible and tappable - [ ] Sidebar event list stacks below calendar on mobile --- ## SEO Checklist ### Per-Page Meta Tags (via `<SEO>` component) - [ ] Every page passes a unique, descriptive `title` prop (not empty or generic) - [ ] Every page passes a `description` prop (≤ 160 characters, keyword-rich) - [ ] `og:title`, `og:description`, `og:image` are rendered in `<head>` (`<Helmet>`) - [ ] `og:url` is set on each page (currently missing — flag it) - [ ] `og:site_name` is set (currently missing — flag it) - [ ] Twitter card meta tags exist: `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image` (currently missing — flag it) ### Canonical URLs - [ ] EventDetail and NoticeDetail set `canonicalUrl` prop on `<SEO>` - [ ] Other pages either set canonical or rely on a global default ### Structured Data (JSON-LD) - [ ] Home page includes `SchoolJsonLd` with valid `@type: School` schema - [ ] EventDetail includes `EventJsonLd` with valid `@type: Event` schema - [ ] NoticeDetail could benefit from `Article` or `WebPage` JSON-LD (flag if missing) ### Accessibility & Crawlability - [ ] All `<img>` tags have meaningful `alt` text (not empty unless decorative with `aria-hidden`) - [ ] Heading hierarchy is correct per page: exactly one `<h1>`, logical `<h2>`→`<h3>` nesting - [ ] `robots.txt` exists at `client/public/robots.txt` and allows crawling - [ ] `sitemap.xml` exists at `client/public/sitemap.xml` and lists all public routes - [ ] Sitemap URLs match the actual canonical domain ### Performance Hints (SEO-adjacent) - [ ] Images use `loading="lazy"` where below the fold - [ ] No render-blocking resources flagged (fonts, large JS bundles) - [ ] `<link rel="preconnect">` is present for external origins (Google Fonts, Cloudinary, Unsplash) --- ## Output Format After completing all checks, produce a summary table: ``` | Page / Component | Responsive | SEO | Issues Found | |------------------------|------------|-----|--------------| | PublicLayout | ✅ PASS | N/A | — | | Navbar | ⚠️ WARN | N/A | Links wrap at 900px | | Home | ✅ PASS | ❌ | Missing twitter:card | | ... | ... | ... | ... | ``` Then list the **top 5 highest-priority fixes** with file paths and suggested changes.

{ "prompt": "You are a responsive-design and SEO auditor for the GSES School Website (React + Tailwind CSS v4).\nWalk through **every public page and shared layout component** listed below and produce a pass/fail report using the todo list.\n\nDo NOT make any code changes — only diagnose issues and report them.\n\n---\n\n## Pages & Components to Audit\n\n| # | File | Route / Usage |\n|---|------|---------------|\n| 1 | `client/src/layouts/PublicLayout.tsx` | Wraps all public routes |\n| 2 | `client/src/components/Navbar.tsx` | Sticky nav (mobile hamburger + desktop links) |\n| 3 | `client/src/components/SchoolHeader.tsx` | Top bar above navbar |\n| 4 | `client/src/components/Footer.tsx` | Site footer |\n| 5 | `client/src/components/HeroSection.tsx` | Home carousel hero |\n| 6 | `client/src/pages/Home.tsx` | `/` |\n| 7 | `client/src/pages/About.tsx` | `/about` |\n| 8 | `client/src/pages/PrincipalMessage.tsx` | `/principal-message` |\n| 9 | `client/src/pages/Academics.tsx` | `/academics` |\n| 10 | `client/src/pages/NoticeList.tsx` | `/notices` |\n| 11 | `client/src/pages/NoticeDetail.tsx` | `/notices/:slug` |\n| 12 | `client/src/pages/EventList.tsx` | `/events` |\n| 13 | `client/src/pages/EventDetail.tsx` | `/events/:id` |\n| 14 | `client/src/pages/Calendar.tsx` | `/calendar` |\n| 15 | `client/src/pages/Gallery.tsx` | `/gallery` |\n| 16 | `client/src/pages/Admissions.tsx` | `/admissions` |\n| 17 | `client/src/pages/Contact.tsx` | `/contact` |\n| 18 | `client/src/pages/Login.tsx` | `/login` |\n| 19 | `client/src/pages/NotFound.tsx` | `*` (404) |\n| 20 | `client/src/components/SEO.tsx` | `<SEO>` on every page |\n| 21 | `client/src/components/SchoolJsonLd.tsx` | Structured data on Home |\n| 22 | `client/src/components/EventJsonLd.tsx` | Structured data on EventDetail |\n| 23 | `client/src/components/SplashScreen.tsx` | Initial load screen |\n\n---\n\n## Responsive Design Checklist\n\nFor **each page/component** above, check the following at every breakpoint tier: **320px (small mobile)**, **375px (standard mobile)**, **768px (tablet)**, **1024px (desktop)**, **1440px (large desktop)**.\n\n### Layout & Overflow\n- [ ] No horizontal scroll at any width (check for `overflow-x` leaks, elements wider than viewport)\n- [ ] Container / `max-w-*` classes are present so content doesn't stretch beyond readability on large screens\n- [ ] `px-4` or equivalent horizontal padding prevents text from touching screen edges on mobile\n\n### Typography\n- [ ] Headings scale down gracefully (`text-4xl md:text-5xl` etc.) — no truncation or overlap on 320px\n- [ ] Body text remains readable (min ~14px effective) on all sizes\n\n### Images & Media\n- [ ] All `<img>` and `<video>` elements have `max-w-full` or `w-full` with `object-cover`/`object-contain` — no images overflow their container\n- [ ] Hero carousel images fill the viewport width without letterboxing or cropping important content on mobile\n- [ ] Gallery grid changes column count across breakpoints (`grid-cols-2 md:grid-cols-3 lg:grid-cols-4`)\n\n### Navigation\n- [ ] Mobile hamburger menu appears below `md` breakpoint and opens/closes correctly\n- [ ] Desktop nav links don't wrap or overflow at 768–1024px range\n- [ ] Sticky nav doesn't obscure page content (proper `scroll-padding-top` or margin on first element)\n\n### Forms\n- [ ] Contact, Admissions, and Login forms stack to single-column on mobile\n- [ ] Input fields are at least 44px tall (touch target)\n- [ ] Submit buttons are full-width or large enough for touch on mobile\n\n### Cards & Grids\n- [ ] Event cards, notice cards, and feature cards stack to 1-column on mobile, 2-col on tablet, 3+ on desktop\n- [ ] Cards don't have fixed widths that cause overflow\n\n### Footer\n- [ ] Footer columns stack vertically on mobile (`grid-cols-1 md:grid-cols-2 lg:grid-cols-4`)\n- [ ] No decorative circle `<div>`s remain that bleed outside the footer container\n\n### Carousel (HeroSection)\n- [ ] Prev/Next arrows are reachable on mobile (not hidden behind content or cut off)\n- [ ] Slide indicators (dots) are visible and tappable (≥ 44px touch area)\n- [ ] CTA text + buttons don't overflow the slide area on 320px\n- [ ] Autoplay pause/resume works on touch devices\n\n### Calendar\n- [ ] Calendar grid cells don't overflow on 320px\n- [ ] Day numbers + event dots remain visible and tappable\n- [ ] Sidebar event list stacks below calendar on mobile\n\n---\n\n## SEO Checklist\n\n### Per-Page Meta Tags (via `<SEO>` component)\n- [ ] Every page passes a unique, descriptive `title` prop (not empty or generic)\n- [ ] Every page passes a `description` prop (≤ 160 characters, keyword-rich)\n- [ ] `og:title`, `og:description`, `og:image` are rendered in `<head>` (`<Helmet>`)\n- [ ] `og:url` is set on each page (currently missing — flag it)\n- [ ] `og:site_name` is set (currently missing — flag it)\n- [ ] Twitter card meta tags exist: `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image` (currently missing — flag it)\n\n### Canonical URLs\n- [ ] EventDetail and NoticeDetail set `canonicalUrl` prop on `<SEO>`\n- [ ] Other pages either set canonical or rely on a global default\n\n### Structured Data (JSON-LD)\n- [ ] Home page includes `SchoolJsonLd` with valid `@type: School` schema\n- [ ] EventDetail includes `EventJsonLd` with valid `@type: Event` schema\n- [ ] NoticeDetail could benefit from `Article` or `WebPage` JSON-LD (flag if missing)\n\n### Accessibility & Crawlability\n- [ ] All `<img>` tags have meaningful `alt` text (not empty unless decorative with `aria-hidden`)\n- [ ] Heading hierarchy is correct per page: exactly one `<h1>`, logical `<h2>`→`<h3>` nesting\n- [ ] `robots.txt` exists at `client/public/robots.txt` and allows crawling\n- [ ] `sitemap.xml` exists at `client/public/sitemap.xml` and lists all public routes\n- [ ] Sitemap URLs match the actual canonical domain\n\n### Performance Hints (SEO-adjacent)\n- [ ] Images use `loading=\"lazy\"` where below the fold\n- [ ] No render-blocking resources flagged (fonts, large JS bundles)\n- [ ] `<link rel=\"preconnect\">` is present for external origins (Google Fonts, Cloudinary, Unsplash)\n\n---\n\n## Output Format\n\nAfter completing all checks, produce a summary table:\n\n```\n| Page / Component | Responsive | SEO | Issues Found |\n|------------------------|------------|-----|--------------|\n| PublicLayout | ✅ PASS | N/A | — |\n| Navbar | ⚠️ WARN | N/A | Links wrap at 900px |\n| Home | ✅ PASS | ❌ | Missing twitter:card |\n| ... | ... | ... | ... |\n```\n\nThen list the **top 5 highest-priority fixes** with file paths and suggested changes.", "variables": [], "notes": "Run a responsive-design and SEO audit across every public page, producing a pass/fail checklist. Mode: agent. Tools: read, search, terminal, todo.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/amiryogi/gses", "path": ".github/prompts/responsive-audit.prompt.md", "ref": "b281e3074ff5daa1d01295f99eb20e770452ed03", "url": "https://github.com/amiryogi/gses/blob/b281e3074ff5daa1d01295f99eb20e770452ed03/.github/prompts/responsive-audit.prompt.md", "key": "amiryogi/gses/.github/prompts/responsive-audit.prompt.md" } } }

responsive-audit

About

Pages & Components to Audit

Responsive Design Checklist

Layout & Overflow

Typography

Images & Media

Navigation

Forms

Cards & Grids

Footer

Carousel (HeroSection)

Calendar

SEO Checklist

Per-Page Meta Tags (via `<SEO>` component)

Canonical URLs

Structured Data (JSON-LD)

Accessibility & Crawlability

Performance Hints (SEO-adjacent)

Output Format

Use it

Manifest

Reviews

About

Pages & Components to Audit

Responsive Design Checklist

Layout & Overflow

Typography

Images & Media

Navigation

Forms

Cards & Grids

Footer

Carousel (HeroSection)

Calendar

SEO Checklist

Per-Page Meta Tags (via <SEO> component)

Canonical URLs

Structured Data (JSON-LD)

Accessibility & Crawlability

Performance Hints (SEO-adjacent)

Output Format

Use it

Manifest

Reviews

Per-Page Meta Tags (via `<SEO>` component)