Home

--- name: roier-seo description: Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues. version: 1.0.0 author: Kemeny Studio license: MIT tags: [SEO, Lighthouse, PageSpeed, Accessibility, Performance, Meta Tags, Structured Data, Core Web Vitals, WCAG, Next.js, React, Vue] dependencies: [lighthouse, chrome-launcher] --- # Roier SEO - Technical SEO Auditor & Fixer AI-powered SEO optimization skill that audits websites and automatically implements fixes. ## When to use this skill **Use Roier SEO when:** - User asks to "audit my site" or "check SEO" - User wants to "improve performance" or "fix SEO issues" - User mentions "lighthouse", "pagespeed", or "core web vitals" - User wants to add/fix meta tags, structured data, or accessibility - User has a local dev server and wants SEO analysis **Key features:** - **Full Audits**: Lighthouse audits on any URL (localhost or live) - **Auto-Fix**: Implements fixes directly in the codebase - **Framework Aware**: Detects Next.js, React, Vue, Nuxt, plain HTML - **Core Web Vitals**: Track FCP, LCP, TBT, CLS metrics - **Structured Data**: JSON-LD schemas for rich snippets - **Accessibility**: WCAG compliance fixes **Use alternatives instead:** - **React Best Practices**: For general React performance optimization - **Manual Lighthouse**: For one-off audits without auto-fixing ## Quick start ### Installation After installing the skill, install the audit dependencies: ```bash cd ~/.claude/skills/roier-seo/scripts npm install ``` ### Running an Audit For a **live website**: ```bash node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com ``` For a **local dev server** (must be running): ```bash node ~/.claude/skills/roier-seo/scripts/audit.js http://localhost:3000 ``` Output formats: ```bash # JSON output (default, for programmatic use) node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com # Human-readable summary node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --output=summary # Save to file node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --save=results.json ``` ## Audit categories The audit returns scores (0-100) for five categories: | Category | Description | Weight | |----------|-------------|--------| | **Performance** | Page load speed, Core Web Vitals | High | | **Accessibility** | WCAG compliance, screen reader support | High | | **Best Practices** | Security, modern web standards | Medium | | **SEO** | Search engine optimization, crawlability | High | | **PWA** | Progressive Web App compliance | Low | ## Technical SEO fix patterns ### Meta tags (HTML Head) #### Title tag ```html Home Primary Keyword - Secondary Keyword | Brand Name ``` **Rules:** - 50-60 characters max - Include primary keyword near the beginning - Unique per page - Include brand name at end #### Meta description ```html ``` **Rules:** - 150-160 characters - Include primary and secondary keywords naturally - Compelling call-to-action - Unique per page #### Essential meta tags ```html ``` ### Open Graph tags (social sharing) ```html ``` ### Twitter Card tags ```html ``` ### Canonical URL ```html ``` ### Robots meta ```html ``` ## Structured data (JSON-LD) ### Website schema ```html ``` ### Organization schema ```html ``` ### BreadcrumbList schema ```html ``` ### Article schema (for blog posts) ```html ``` ## Performance optimizations ### Image optimization ```html Description

``` ### Font optimization ```html ``` ```css @font-face { font-family: 'Custom Font'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; } ``` ### Resource hints ```html ``` ## Accessibility fixes ### Alt text ```html Team members collaborating in the office

Team members collaborating in the office

``` ### Color contrast - **4.5:1** contrast ratio for normal text - **3:1** contrast ratio for large text (18px+ or 14px+ bold) ### Form labels ```html Email Address ``` ### Skip link ```html ``` ### Button accessibility ```html ``` ## Framework-specific patterns ### Next.js (App Router) ```tsx // app/layout.tsx import type { Metadata } from 'next' export const metadata: Metadata = { title: { default: 'Site Name', template: '%s | Site Name' }, description: 'Site description', openGraph: { title: 'Site Name', description: 'Site description', url: 'https://example.com', siteName: 'Site Name', type: 'website', }, } ``` ### Next.js (Pages Router) ```jsx import Head from 'next/head'; export default function Page() { return ( <> Page Title | Brand

...

); } ``` ### React (with react-helmet) ```jsx import { Helmet } from 'react-helmet'; function Page() { return ( <> Page Title | Brand

...

); } ``` ### Vue.js (with useHead) ```vue ``` ### Nuxt.js ```vue ``` ## Workflow ### Step 1: Audit Run the audit script on the target URL: ```bash node ~/.claude/skills/roier-seo/scripts/audit.js ``` ### Step 2: Identify framework Check `package.json` dependencies and framework-specific files. ### Step 3: Prioritize fixes 1. **Critical** (red): Fix immediately 2. **Serious** (orange): Fix soon 3. **Moderate** (yellow): Fix when possible 4. **Minor** (gray): Nice to have ### Step 4: Implement Use the fix patterns above, adapted to the user's framework. ### Step 5: Re-audit Run the audit again to verify improvements. ## Requirements - **Node.js 18+** - **Chrome/Chromium** browser (for Lighthouse) - Audit script dependencies (installed via npm) ## Resources - [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/) - [PageSpeed Insights](https://pagespeed.web.dev/) - [Schema.org](https://schema.org/) - [WCAG Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/) - [Core Web Vitals](https://web.dev/vitals/) ## Version history **v1.0.0** (January 2026) - Initial release - Lighthouse audit integration - 50+ SEO fix patterns - Framework support for Next.js, React, Vue, Nuxt