frontend-seo
A portable, framework-agnostic SEO system for any React or React Native-for-web frontend. Centralizes site metadata in one constants module, derives canonical URLs from a single base, builds per-route metadata (title, description, canonical, Open Graph, Twitter/X cards), generates...
Profile →npx skills add sickn33/agentic-awesome-skills --skill frontend-seo --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill provides a framework-agnostic SEO system for React or React Native-for-web frontends. It centralizes site identity in a single constants module, derives absolute canonical URLs from a base, and builds per-route metadata including title, description, canonical, Open Graph, and Twitter cards. It also generates sitemap, robots, RSS, and JSON-LD structured data derived from the same content. The system is designed to function via a thin adapter and a set of pure builder functions, without direct framework coupling in most builders.
How it works
- One source of truth for identity is exposed through constants/seo.ts (SITE_URL, SITE_NAME, SITE_DESCRIPTION, OG_IMAGE_PATH, etc.).
- canonicalUrl(path) normalizes paths to absolute URLs using the single SITE_URL and applies a trailing-slash policy (no trailing slash). All OG URLs, sitemap URLs, RSS links, and JSON-LD IDs route through canonicalUrl.
- buildMetadata(route) is the pure builder that converts a RouteDescriptor (path, title, description, ogImage) into a framework-specific Metadata object, using canonicalUrl for the canonical value and a derived ogImage URL.
- Global defaults live in app/layout.tsx, with per-route overrides, ensuring a single title template, default OG/Twitter values, and canonical resolution.
- Discovery surfaces (sitemap.xml, robots.txt, RSS feed) are generated from content via sitemapEntries, rssItems, etc., and all entries use canonicalUrl for URLs.
- Structured data is produced via a small set of JsonLd builders; data is typed, and cross-referenced via stable IDs.
When to use it
Use this skill when you need a portable, framework-agnostic SEO system for any React or React Native-for-web frontend. It should be used when you want a single source of truth for identity, absolute canonical URLs, and generated metadata across routes, plus machine-readable data (JSON-LD) derived from the app content.
What it can touch
- Files and modules referenced include constants/seo.ts, services/seo/index.ts, services/seo/structured-data.ts, types/seo.ts, and app/layout.tsx. Commands or function names explicitly mentioned include: canonicalUrl, buildMetadata, sitemapEntries, rssItems, structuredData.
- It expects a barrel at services/seo/index.ts exporting canonicalUrl, buildMetadata, sitemapEntries, rssItems, structuredData, redirects, etc.
Caveats
- Declared risk: critical. No promises about outcomes; only explicit behaviors and data flows are described.
- The description emphasizes a framework-agnostic approach; it relies on a thin adapter for framework-specific metadata types (e.g., Next.js Metadata).
- No hand-written SEO tags in components; metadata is generated through builders and mounted by route adapters.
# Frontend SEO (portable, builder-based) ## When to Use Use this skill when you need a portable, framework-agnostic SEO system for any React or React Native-for-web frontend. Centralizes site metadata in one constants module, derives canonical URLs from a single base, builds per-route metadata (title, description, canonical, Open Graph, Twitter/X cards), generates... > Portable skill — readable by Claude Code, OpenCode, Codex, Cursor, Windsurf, and others. > This skill describes an **SEO system** — a set of pure builder functions plus a thin > framework adapter — not a component library or a visual style. > It pairs with the **frontend-architecture** skill: the SEO system lives in a single > service module (`services/seo/`) and is consumed through one barrel. The goal: every route ships **correct, consistent, machine-readable metadata** without anyone copy-pasting `<meta>` tags. Site identity lives in **one** constants module, URLs are **always absolute and canonical**, and search engines get a **sitemap, robots rules, an RSS feed, and typed JSON-LD** derived from the same content the app already renders. --- ## 0. The five core ideas 1. **One source of truth for identity.** Site U
- When to Use
- 0. The five core ideas
- 1. Directory layout
- 2. One source of truth for identity (constants/seo)
- 3. Typed data models (types/seo)
- 4. Canonical URLs (the spine of the system)
- 5. Per-route metadata
- 5.1 The pure builder
- 5.2 Global defaults live in the root layout
- 5.3 Per-route override (dynamic pages)
- 6. Discovery surfaces (generated from content)
- 6.1 Sitemap
- 6.2 Robots
- 6.3 RSS feed
What does the frontend-seo skill do?
A portable, framework-agnostic SEO system for any React or React Native-for-web frontend. Centralizes site metadata in one constants module, derives canonical URLs from a single base, builds per-route metadata (title, description, canonical, Open Graph, Twitter/X cards), generates...
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill frontend-seo --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.