ToolZip
Claude Code SkillWeb Development41 installs

Roier Seo

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.

Install with the Claude Code Templates CLI
$ npx claude-code-templates@latest --skill="web-development/roier-seo" --yes

Requires Claude Code. The command adds this skill to your project's .claudedirectory — nothing runs on ToolZip's servers.

What's inside this skill

Component source

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:

cd ~/.claude/skills/roier-seo/scripts
npm install

Running an Audit

For a live website:

node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com

For a local dev server (must be running):

node ~/.claude/skills/roier-seo/scripts/audit.js http://localhost:3000

Output formats:

# 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:

CategoryDescriptionWeight
PerformancePage load speed, Core Web VitalsHigh
AccessibilityWCAG compliance, screen reader supportHigh
Best PracticesSecurity, modern web standardsMedium
SEOSearch engine optimization, crawlabilityHigh
PWAProgressive Web App complianceLow

Technical SEO fix patterns

Meta tags (HTML Head)

Title tag

<!-- Bad -->
<title>Home</title>

<!-- Good -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>
Rules:
  • 50-60 characters max
  • Include primary keyword near the beginning
  • Unique per page
  • Include brand name at end

Meta description

<meta name="description" content="Compelling description with keywords. 150-160 characters that encourages clicks from search results.">
Rules:
  • 150-160 characters
  • Include primary and secondary keywords naturally
  • Compelling call-to-action
  • Unique per page

Essential meta tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en">

Open Graph tags (social sharing)

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand Name">

Twitter Card tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Canonical URL

<link rel="canonical" href="https://example.com/canonical-page">

Robots meta

<!-- Allow indexing (default) -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing (for staging, admin pages) -->
<meta name="robots" content="noindex, nofollow">

Structured data (JSON-LD)

Website schema

Organization schema

BreadcrumbList schema

Article schema (for blog posts)

Performance optimizations

Image optimization

<!-- Add width/height to prevent CLS -->
<img src="image.jpg" alt="Description" width="800" height="600">

<!-- Add lazy loading -->
<img src="image.jpg" alt="Description" loading="lazy">

<!-- Use modern formats -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Font optimization

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

Resource hints

<!-- Preconnect to critical third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- DNS prefetch for non-critical origins -->
<link rel="dns-prefetch" href="https://analytics.example.com">

<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style">

Accessibility fixes

Alt text

<!-- Good (descriptive) -->
<img src="photo.jpg" alt="Team members collaborating in the office">

<!-- Good (decorative) -->
<img src="decoration.jpg" alt="" role="presentation">

Color contrast

  • 4.5:1 contrast ratio for normal text
  • 3:1 contrast ratio for large text (18px+ or 14px+ bold)

Form labels

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

Skip link

<a href="#main-content" class="skip-link">Skip to main content</a>

Button accessibility

<!-- Icon button needs aria-label -->
<button aria-label="Close menu">
  <svg>...</svg>
</button>

Framework-specific patterns

Next.js (App Router)

// 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)

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Page Title | Brand</title>
        <meta name="description" content="Page description" />
        <link rel="canonical" href="https://example.com/page" />
      </Head>
      <main>...</main>
    </>
  );
}

React (with react-helmet)

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <>
      <Helmet>
        <title>Page Title | Brand</title>
        <meta name="description" content="Page description" />
      </Helmet>
      <main>...</main>
    </>
  );
}

Vue.js (with useHead)

Nuxt.js

Workflow

Step 1: Audit

Run the audit script on the target URL:

node ~/.claude/skills/roier-seo/scripts/audit.js <URL>

Step 2: Identify framework

Check package.json dependencies and framework-specific files.

Step 3: Prioritize fixes

  • Critical (red): Fix immediately
  • Serious (orange): Fix soon
  • Moderate (yellow): Fix when possible
  • 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

Version history

v1.0.0 (January 2026)
  • Initial release
  • Lighthouse audit integration
  • 50+ SEO fix patterns
  • Framework support for Next.js, React, Vue, Nuxt
Type
Skill
Category
Web Development
Installs
41
Source
GitHub ↗

Related Claude Code Skills

SkillWeb Development

React Best Practices

Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.

1.2k installsView →
SkillWeb Development

Web Performance Optimization

"Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance"

296 installsView →
SkillWeb Development

Shadcn

Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.

44 installsView →
SkillWeb Development

Firecrawl Scraper

Deep web scraping, screenshots, PDF parsing, and website crawling using Firecrawl API

43 installsView →
SkillWeb Development

Tailwind Design System

"Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility."

43 installsView →
SkillWeb Development

Fastapi Endpoint

Plan and build production-ready FastAPI endpoints with async SQLAlchemy, Pydantic v2 models, dependency injection for auth, and pytest tests. Uses interview-driven planning to clarify data models, authentication method, pagination strategy, and caching before writing any code.

41 installsView →
← Browse all Claude Code Skills

Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.