og-creator-skill
Create or fix Open Graph metadata for any web project across stacks (React/Vue/Svelte/Next/Nuxt/SSR/SSG/static). Use when a user asks to add OG tags, fix social previews, or standardize OG/Twitter metadata, especially when react-helmet-async is required and og:image must be an absolute URL.
Best use case
og-creator-skill is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create or fix Open Graph metadata for any web project across stacks (React/Vue/Svelte/Next/Nuxt/SSR/SSG/static). Use when a user asks to add OG tags, fix social previews, or standardize OG/Twitter metadata, especially when react-helmet-async is required and og:image must be an absolute URL.
Teams using og-creator-skill should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/og-creator-skill/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How og-creator-skill Compares
| Feature / Agent | og-creator-skill | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create or fix Open Graph metadata for any web project across stacks (React/Vue/Svelte/Next/Nuxt/SSR/SSG/static). Use when a user asks to add OG tags, fix social previews, or standardize OG/Twitter metadata, especially when react-helmet-async is required and og:image must be an absolute URL.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# OG Creator Skill ## Overview Provide a repeatable, web-project-agnostic workflow to add or fix OG/Twitter metadata across all stacks while honoring constraints like react-helmet-async and absolute og:image URLs. ## Workflow ### 1) Confirm scope and constraints - Ask which stack and rendering mode applies: static HTML, SPA, SPA+runtime head updates, SSR, SSG/pre-render. - Confirm hard constraints (if any): require react-helmet-async, require absolute og:image URLs, and deployment base URL. - Request example pages that need custom OG (home, product detail, blog, etc). ### 2) Locate current metadata - Search for existing OG/Twitter tags in entry HTML, templates, or shared SEO components. - Identify the head management tool: React Helmet/Head, Next/Nuxt/SvelteKit head APIs, or static templates. - If SSR/SSG exists, find server/renderer entry points that build the HTML head. ### 3) Implement the minimal viable OG setup - Keep a static fallback in the entry HTML/template for SPA-first bots and unknown routes. - Add or update a shared SEO component that sets: - `og:type`, `og:title`, `og:description`, `og:url`, `og:image`, `og:site_name` - `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image` - Enforce absolute URLs for `og:image` (and ideally `og:url`), using a base URL constant. ### 4) Make per-page metadata predictable - Expose `SEO` props for title/description/type/image/url. - For each route, pass page-specific values; keep defaults centralized. - Prefer stable, deterministic values for SSG/SSR routes. ### 5) Validate and document - Provide a quick checklist (see `references/og-checklist.md`) and explain any tradeoffs. - If the user wants verification, suggest testing with platform validators after deploy. ### 6) Update and refresh share caches - Verify the live HTML contains the new `og:image` URL. - Confirm the image URL is publicly accessible (200 OK). - Refresh platform caches after deploy: - Telegram: `@WebpageBot` -> `/refresh <url>` - If still stale, add a new query string to the page URL (e.g. `?v=YYYYMMDD`) and refresh again. ## Notes - If the user mandates react-helmet-async, treat it as the only runtime head tool allowed. - Absolute `og:image` URLs are mandatory; if the project is not deployed yet, require a temporary base URL or placeholder host. - Always tailor guidance to the stack's head API or template system while preserving the static fallback HTML. ## Stack-specific guidance (concise) ### React SPA (Vite/CRA) with react-helmet-async - Keep static fallback OG in `index.html`. - Wrap app with `HelmetProvider`, create shared `SEO` component, and set per-route tags via props. - Ensure `og:image` uses an absolute URL built from a base URL constant. ### Next.js (App Router / Pages Router) - Prefer framework metadata API (`metadata` / `generateMetadata`) or `<Head>` for per-page tags. - If custom head management is required, centralize defaults and override per page. - For SSG/SSR, ensure tags render in HTML, not only client runtime. ### Nuxt 3 - Use `useHead`/`useSeoMeta` in pages and layouts. - Put defaults in `app.vue` or a layout; override in pages. - Ensure absolute URLs for `og:image`. ### Vue (Vite) SPA - Use `@vueuse/head` or `vue-meta` for dynamic tags. - Provide a shared SEO composable and route-level overrides. - Keep a static fallback in `index.html`. ### SvelteKit - Use `<svelte:head>` in layout/page files. - For SSG/SSR, make sure `load` or data props provide stable metadata. - Keep base URL in a shared constants module. ### Static HTML / Server templates - Put OG/Twitter tags directly in the HTML/template. - Use server-side template variables to set per-page metadata. - Validate absolute `og:image` and `og:url`.
Related Skills
opence-skill-creator
Learn how to create effective project skills following opence conventions.
nav-skill-creator
Analyze codebase patterns and create custom skills for repetitive workflows. Use when project needs automation or pattern enforcement. Auto-invoke when user says "create a skill for...", "automate this workflow", or "we keep doing X manually".
modern-web-creator
Creates distinctive, human-quality websites using 2025 design philosophy—anti-design aesthetics, bold minimalism, organic shapes, and intentional imperfection. Specializes in React/TypeScript with Tailwind CSS, shadcn/ui, and custom micro-interactions. Prevents generic AI templates through specific constraints, asymmetric layouts, and brand-aligned creative direction. Use for portfolios, marketing sites, SaaS interfaces, or any project requiring unique visual identity beyond cookie-cutter designs.
ln-114-frontend-docs-creator
Creates design_guidelines.md for frontend projects. L3 Worker invoked CONDITIONALLY when hasFrontend detected.
interactive-component-creator
Build interactive web components and artifacts. Creates interactive UI elements, visualizations, and web-based applications.
fastmcp-creator
Build Model Context Protocol (MCP) servers - comprehensive coverage of generic MCP protocol AND FastMCP framework specialization. Use when creating any MCP server (Python FastMCP preferred, TypeScript/Node also covered). Includes agent-centric design principles, evaluation creation, Pydantic/Zod validation, async patterns, STDIO/HTTP/SSE transports, FastMCP Cloud deployment, .mcpb packaging, security patterns, and mid-2025+ community practices. Standalone skill with no external dependencies.
claude-md-creator
Use when creating CLAUDE.md files, updating existing CLAUDE.md, validating CLAUDE.md structure, or auto-fixing CLAUDE.md issues. Load for setting up project instructions, global guidelines, local overrides, or modular rules. Handles global (~/.claude/CLAUDE.md), project (.claude/CLAUDE.md), local (CLAUDE.local.md), and rules (.claude/rules/*.md) with smart project detection and template generation.
architecture-documentation-creator
Create comprehensive technical documentation for code systems including data flow diagrams, architecture overviews, algorithm documentation, cheat sheets, and multi-file documentation sets. Use when documenting pipelines, algorithms, system architecture, data flow, multi-stage processes, similarity algorithms, or creating developer onboarding materials. Covers Mermaid diagrams, progressive disclosure, critical patterns, JSON schemas, Pydantic models, and print-friendly reference materials.
architecture-diagram-creator
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
adr-creator
Create Architecture Decision Records (ADRs) documenting significant technical decisions for the FF Analytics platform. This skill should be used when making architectural choices, evaluating alternatives for data models or infrastructure, documenting trade-offs, or when the user asks "should we use X or Y approach?" Guides through the ADR creation workflow from context gathering to documentation.
action-creator
Creates user-specific one-click action templates that execute email operations when clicked in the chat interface. Use when user wants reusable actions for their specific workflows (send payment reminder to ACME Corp, forward bugs to engineering, archive old newsletters from specific sources).
ac-handoff-creator
Create handoff packages for session transitions. Use when ending sessions, preparing for continuation, saving session state, or creating resumable context.