roier-seo
Audit websites for SEO, performance, and accessibility. Automatically applies code-level fixes to improve Core Web Vitals and meta tags.
Install
mkdir -p .claude/skills/roier-seo && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1523" && unzip -o skill.zip -d .claude/skills/roier-seo && rm skill.zipInstalls to .claude/skills/roier-seo
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Run lighthouse performance audits on URLs
- →Identify accessibility (WCAG) violations
- →Inject structured data (JSON-LD) schemas
- →Optimize meta tags for search engines
- →Calculate Core Web Vitals
How it works
Executes a headless Lighthouse audit to gather metrics, then matches findings against common SEO/performance templates to suggest or inject code changes.
Inputs & outputs
When to use roier-seo
- →Run lighthouse audit on local server
- →Fix accessibility issues on website
- →Improve Core Web Vitals scores
About this skill
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:
| 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
<!-- 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
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Site Name",
"url": "https://example.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
Organization schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://twitter.com/company",
"https://linkedin.com/company/company"
]
}
</script>
BreadcrumbList schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com"},
{"@type": "ListItem", "position": 2, "name": "Category", "item": "https://example.com/category"},
{"@type": "ListItem", "position": 3, "name": "Page"}
]
}
</script>
Article schema (for blog posts)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": {"@type": "Person", "name": "Author Name"},
"datePublished": "2024-01-15",
"dateModified": "2024-01-20",
"image": "https://example.com/article-image.jpg",
"publisher": {
"@type": "Organization",
"name": "Publisher Name",
"logo": {"@type": "ImageObject", "url": "https://example.com/logo.png"}
}
}
</script>
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>
<style>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0;
top: 0;
z-index: 9999;
background: #000;
color: #fff;
padding: 8px 16px;
}
</style>
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)
<script setup>
useHead({
title: 'Page Title | Brand',
meta: [
{ name: 'description', content: 'Page description' }
],
link: [
{ rel: 'canonical', href: 'https://example.com/page' }
]
})
</script>
Nuxt.js
<script setup>
useSeoMeta({
title: 'Page Title | Brand',
description: 'Page description',
ogTitle: 'Page Title',
ogDescription: 'Page description',
ogImage: 'https://example.com/og-image.jpg'
})
</script>
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
- [Google Lightho
Content truncated.
When not to use it
- →Static sites without SEO or performance requirements
- →Sites that cannot be crawled by Lighthouse
Prerequisites
Limitations
- →Requires local environment access for auto-fix
- →Lighthouse metrics can vary based on test environment
How it compares
It automates the feedback-to-fix loop, transforming audit reports into actionable code edits rather than just displaying static scores.
Compared to similar skills
roier-seo side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| roier-seo (this skill) | 4 | 6mo | Review | Intermediate |
| frontend-developer | 0 | 4mo | No flags | Intermediate |
| a11y-audit | 0 | 4mo | Review | Intermediate |
| full-review | 0 | 3mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
frontend-developer
bonnguyenitc
Use when building web UI, designing component architecture, or reviewing frontend code — regardless of framework (React, Vue, Svelte, etc.)
a11y-audit
jarbitechture
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating acce
full-review
Trophalaxeur
Analyse complète du repository Bismuth (Astro 6 / React / Tailwind v4). Détecte le code mort, fichiers inutilisés, mauvaises pratiques, problèmes qualité, SEO et accessibilité. Produit un fichier Markdown avec liens VSCode cliquables.
audit
educlopez
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
init
alirezarezvani
Set up Playwright in a project. Use when user says "set up playwright", "add e2e tests", "configure playwright", "testing setup", "init playwright", or "add test infrastructure".