SEO audit report (scaffold instructions)

Use this skill when the user wants an interactive, client-side report that imports Search Console exports and keeps them in a lightweight SQLite database for repeated inspection.

Required inputs

• Project directory name.
• Data source: GSC MCP export (JSON/CSV) or manual file.
• Persistence target: in-browser IndexedDB via sql.js.

Workflow

1. Scaffold the project

- Run npm create vite@latest <project-name> -- --template react-ts (or bun create vite@latest ... if Bun is preferred). - Enter the new folder and install deps (npm install/bun install). - Use exa (or web search) to confirm the latest Vite React template command if the tooling switches.

1. Add dependencies

- Install react, react-dom (if not already) along with zod. - Install runtime helpers: sql.js for the SQLite engine and idb-keyval for Persisting exported bytes. - Keep typescript + vite dev dependencies aligned with the template.

1. Implement the app

- Configure sql.js using the sql-wasm.wasm bundle; wrap initialization in a helper to reuse across hooks. - Build an import flow that accepts CSV/JSON and normalizes rows into { date, query, page, clicks, impressions, ctr, position }. - Store normalized rows into a gsc_rows table with indexes on date, query, and page, then export the database and persist via idb-keyval. - Surface KPIs: total clicks/impressions/CTR/weighted position, top queries, top pages, and CTR gap opportunities filtered by impressions/position buckets. - Include file + fetch controls (<input type="file">, fetch from /gsc/latest.json), custom filters, and a reset button. - Style the layout with CSS variables and card/grid patterns, keeping readability front-and-center (sticky header, callouts, narrow text width).

1. Run & iterate

- Start the dev server with npm run dev or bun run dev. - Load sample exports (provide a public/gsc/latest.json for convenience) and verify persistence across reloads. - Document expected import schema and heuristics for CTR opportunities in README or inline comments.

Tool checks

• When unsure which packages to add or how to initialize sql.js, run an exa search such as exa "vite react sql.js setup" to gather up-to-date commands.
• Refer to the Skill creation process section of seo-skills/README.md when expanding the skill further.