القائمة
Implement SEO and social sharing for web games and apps. Adds meta tags, Open Graph, Twitter cards, social card images, PWA support, share buttons, and shareable result links.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | social-seo |
| description | Implement SEO and social sharing for web games and apps. Adds meta tags, Open Graph, Twitter cards, social card images, PWA support, share buttons, and shareable result links. |
| disable-model-invocation | true |
| argument-hint | ["phase1|phase2|phase3|all"] |
Implement comprehensive SEO and social sharing capabilities for web-based projects. See reference.md for detailed templates, code snippets, and platform-specific notes.
phase1 - Foundation only (meta tags, social card, robots.txt, sitemap)phase2 - Foundation + Enhancement (adds PWA, structured data, share buttons)phase3 - All phases including shareable result linksall - Same as phase3Before implementing, collect this information from the user:
| Information | Example | Used For |
|---|---|---|
| App/Game name | "My App" | Title, OG tags, structured data |
| Tagline | "A Short Tagline" | Meta description, social cards |
| Full description | "A compelling 150-char description..." | Meta description (150-160 chars) |
| Production domain | myapp.example.com | Canonical URL, OG URLs, sitemap |
| Brand/Studio name | "My Studio" | og:site_name, JSON-LD author |
| Primary brand color | #3b82f6 | theme-color, PWA colors |
| Secondary/background color | #1e40af | PWA background_color |
Use AskUserQuestion to gather any missing information.
index.html)<head> content to preserveAdd to <head> (ensure <html lang="en"> is set):
<!-- Basic SEO -->
<title>[Game Name] - [Tagline]</title>
<meta name="description" content="[150-160 char description]">
<link rel="canonical" href="https://[domain]">
<meta name="theme-color" content="[primary-color]">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://[domain]">
<meta property="og:locale" content="en_US">
<meta property="og:title" content="[Game Name] - [Tagline]">
<meta property="og:description" content="[Description]">
<meta property="og:image" content="https://[domain]/social-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="[Alt text]">
<meta property="og:site_name" content="[Brand Name]">
<!-- Twitter/X (twitter:url is unnecessary - X derives it from the shared link) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[Game Name] - [Tagline]">
<meta name="twitter:description" content="[Description]">
<meta name="twitter:image" content="https://[domain]/social-card.jpg">
Using the pre-configured Playwright browser control (preferred method):
Do NOT install Playwright from npm or write Playwright scripts. Use only the browser control tools already configured in this environment — either Playwright MCP tools (e.g.
browser_navigate,browser_screenshot) or Playwright CLI commands (e.g.playwright-cli open,playwright-cli screenshot), whichever is available.
social-card.html with project colors/branding (see reference.md §1.3 for HTML template)file:///[path]/social-card.htmlsocial-card.pngmagick social-card.png -quality 85 social-card.jpg (or convert on ImageMagick 6)social-card.html and social-card.pngIf no browser control tools are available: Ask the user to provide a social card image (1200x630 JPG), or create one using an external design tool and place it in the project root as social-card.jpg.
| File | Size | Purpose |
|---|---|---|
favicon.png | 32x32 | Browser tab |
apple-touch-icon.png | 180x180 | iOS home screen |
Simple geometric icons: Write SVG directly. Complex graphics: Use browser control tools to screenshot HTML at each size. Transparency: Set HTML/body background to transparent, use PNG format. See reference.md §1.5 for details.
robots.txt:
User-agent: *
Allow: /
Sitemap: https://[domain]/sitemap.xml
Ask the user if they want to block AI training crawlers. If yes, see reference.md §1.4 for the full bot list. Tip: Allow search-only bots (OAI-SearchBot, PerplexityBot) while blocking training bots.
sitemap.xml (changefreq/priority are ignored by Google; only lastmod matters if consistently accurate):
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://[domain]/</loc>
<lastmod>[YYYY-MM-DD]</lastmod>
</url>
</urlset>
<html lang="en"> set<title> (50-60 chars)<meta name="description"> (150-160 chars)<link rel="canonical"> absolute URL<meta name="theme-color">og:* tags with absolute URLstwitter:* tags (except twitter:url)favicon.png (32x32)apple-touch-icon.png (180x180)social-card.jpg (1200x630)robots.txtsitemap.xmlAdd to <head> after Twitter tags. Use "@type": ["VideoGame", "WebApplication"] for games (co-typing is required for Google rich results). See reference.md §2.1 for complete JSON-LD templates for games and web apps.
Create manifest.json with id, name, short_name, display, icons, screenshots, and shortcuts. Add <link rel="manifest"> and <meta name="mobile-web-app-capable"> to <head>. Create icon-192.png (192x192) and icon-512.png (512x512). See reference.md §2.2 for the complete manifest template.
Implement Web Share API with clipboard fallback. Requirements: HTTPS (localhost exempt), user gesture trigger. Fallback chain: navigator.share() → navigator.clipboard.writeText() → selectable text element. See reference.md §2.3 for complete code.
manifest.json created and linkedicon-192.png (192x192)icon-512.png (512x512)mobile-web-app-capable meta addedOnly implement if users share scores/achievements that others should view.
?s=base36encoded)See reference.md §3.3 for state encoding/decoding code and shared results landing page implementation. See reference.md §3.4 for localStorage safety wrapper.
?s=...)| What | Tool |
|---|---|
| Social preview | OpenGraph.xyz |
| Structured data | Rich Results Test |
| PWA | Chrome DevTools > Lighthouse |
Remind user to test with these tools after deployment.
When updating social cards, add version parameter: social-card.jpg?v=2
Force refresh tools:
See reference.md Platform-Specific Notes for full platform quirks and cache behavior.
Generate images using OpenAI's gpt-image-1 model. Ideal for game assets (sprites, tiles, UI elements, icons), concept art, and placeholder graphics. Supports iteration — "try again", "make it bluer", "go back to v1".
Generate a project briefing: worktree status, open checkboxes, recent commits. Modes: summary (default), report, verify, current, worktrees. Period: 1h, 6h, 24h, 2d, 7d.
Safe commit workflow with optional scope hint. Inventories all changes, classifies related vs. unrelated files, traces dependencies, protects other agents' work, and optionally pushes or lands worktree commits. Usage: /commit [scope] [push|land]
Draft a high-quality plan through iterative adversarial review. Multiple rounds of research, drafting, review, devil's advocate, and refinement until the plan converges. Output is a plan file ready for /run-plan. Usage: /draft-plan [output FILE] [rounds N] <description...>
Orchestrate a batch bug-fixing sprint. Supports scheduling with every/now/next/stop. Use sync to update trackers and verify/close already-fixed issues. Use plan to draft plans for skipped issues. Usage: /fix-issues N [focus] [auto] [every SCHEDULE] [now] | sync | plan [auto] | stop | next.
Plan dashboard and batch executor. View plan status, find the next ready plan, or work through plans automatically. Usage: /plans [rebuild | next | work N [auto] [every SCHEDULE]]