Design-Matched SEO Pages and Graded Site Audit
Add about, team, or testimonial pages that match your site's design, with unique meta, canonicals, and JSON-LD, plus a graded audit.
Before & after
Same prompt, same agent — the only difference is the skill.
You could definitely build more pages for your site. To keep them consistent with your existing design, you'd need to look at the current homepage, match the styling, and add SEO elements. You might also want to run an audit to see if there are any SEO issues. It depends on which pages you want to add.
SEO PAGE BUILD WORKFLOW: INPUT: Existing homepage URL + list of target pages (About, Testimonials, Team) STEP 1: DESIGN REPLICATION → Extract hero layout, color palette, typography, spacing from homepage → Apply to 3 new pages maintaining visual consistency → Output: HTML matching exact component structure STEP 2: SEO OPTIMIZATION → JSON-LD structured data inserted (Organization, LocalBusiness, or Product schema) → OpenGraph tags (og:title, og:image, og:description) → Twitter Card tags (for preview rich formatting) → Canonical URLs set to prevent duplicate content → Internal cross-links added (homepage → testimonials, etc.) → Meta descriptions written (155-160 chars, keyword-aligned) STEP 3: AUDIT REPORT (HTML, shareable) GRADE: B+ (from D baseline) ISSUES FOUND: • 4 pages missing alt text (9 images) → CRITICAL • Heading hierarchy broken on 2 pages (h1 → h3 skip) → FIX FIRST • Mobile viewport tag missing (1 page) → QUICK FIX • Internal link structure flat (no breadcrumbs) → RECOMMENDED PRIORITIZED ACTION PLAN: WEEK 1: Alt text + heading hierarchy (boost to A-) WEEK 2: Breadcrumbs + schema markup validation RESULT: Pages ready to submit to search engines. Expect 2-4 week crawl delay.
About this skill
Your new about page looks almost like the homepage, but the spacing is off and the buttons are a different style. Google also shows the homepage title for every page, because the head block was copy-pasted. This skill builds the missing pages inside your existing codebase so they look like the original developer wrote them. Each page gets its own correct SEO tags. Then it grades the whole site with a rubric that shows its math.
What it does
- Pulls your real design tokens (colors, type scale, spacing, breakpoints) and existing components before writing code, so new pages reuse your header, footer, cards, and buttons instead of copying them
- Writes a fresh head block for every page: a unique title and description, a self-referencing canonical that follows your URL style, and Open Graph and Twitter cards
- Builds connected JSON-LD: one Organization @id, plus AboutPage, Person, ContactPage, and BreadcrumbList entries that point back to it, with no invented ratings or bios
- Links new pages into the nav and footer and into body text, and updates the sitemap so no page is orphaned
- Catches traps early: client-rendered SPAs that cannot serve per-page tags, review stars Google will not show for self-published testimonials, and two pages aimed at the same keyword
- Grades the site 0-100 across six weighted areas, with severity caps and file-level evidence, and clearly marks what it could not measure
What you get
A page plan table, complete page files that drop into your framework, the shared nav, footer, and sitemap edits, and an audit. The audit includes a scorecard, findings with code fixes, and a three-tier action plan. You can get it as a self-contained HTML report.
Best for
Agencies and freelance developers who extend client sites and sell SEO retainers. Also founders whose site is just a homepage and who need the rest built without breaking the design or the indexing.
SKILL.md preview
---
name: design-matched-seo-pages-and-audit
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.