Anmelden
AzamCodes

Skill: Next.js Portfolio Open Graph Metadata

by @AzamCodes in AI & LLM
0
0
# Install this skill:
npx skills add AzamCodes/nextjs-portfolio-og

Or install specific skill: npx add-skill https://github.com/AzamCodes/nextjs-portfolio-og

# Description

AI agent skill to generate optimized Open Graph and Twitter card metadata for Next.js portfolio websites.

# SKILL.md

Skill: Next.js Portfolio Open Graph Metadata

Maintained by: Azam Shaikh (GitHub: azamcodes)
Purpose: Ensures correct Open Graph (OG) metadata for Next.js portfolio websites, improving social sharing and SEO visibility.

Description

This AI agent skill provides domain-specific knowledge for generating Open Graph metadata for Next.js portfolio sites. It ensures all pages have correctly formatted OG tags and images, enhancing previews on social platforms like Facebook, LinkedIn, and Twitter.

Scope

  • Open Graph metadata for all portfolio pages
  • Recommended image sizes and formats for social sharing
  • Integration with dynamic portfolio content
  • Works with Antigravity, Cursor, Gemini CLI, Claude, OpenCode, Codex, or any Agent Skill-supporting system

Rules

  1. Mandatory OG Tags
  2. og:title β€” page or portfolio item title (<60 chars recommended)
  3. og:description β€” concise description (<160 chars recommended)
  4. og:image β€” high-quality image (1200x630px recommended, optimized JPEG/PNG/WebP)
  5. og:url β€” canonical URL of the page

  6. og:type β€” website for general pages, profile for personal items if relevant

  7. Optional Tags

  8. og:locale β€” e.g., en_US

  9. og:site_name β€” portfolio or personal brand name

  10. Image Best Practices

  11. Unique image per page
  12. Properly sized and compressed for fast load

  13. Include alt text for accessibility

  14. Failure Conditions

  15. If any required OG tag is missing, agent must request info or skip conservatively
  16. Avoid invalid URLs or oversized images

Non-Goals

  • Does not design visuals or generate images
  • Does not optimize page performance
  • Does not handle SEO beyond Open Graph

Usage Example

```bash
npx skills add azamcodes-nextjs-portfolio-og

# README.md

Next.js Portfolio Open Graph Best Practices

Social-focused AI skill ensuring portfolio websites have correct Open Graph and Twitter card metadata.

Maintained by: Azam Shaikh (GitHub: azamcodes)

Installation

```bash
npx skills add azamcodes-nextjs-portfolio-og

Description

This skill provides guidance for generating Open Graph metadata for Next.js portfolio websites. It ensures every page has correctly formatted OG tags and optimized images for social sharing platforms like Facebook, LinkedIn, and Twitter.

Scope

Open Graph metadata (og:title, og:description, og:image, og:url)

Twitter card metadata (summary_large_image)

Unique, optimized images per page (recommended 1200x630px)

Works with Antigravity, Cursor, Claude, Gemini CLI, OpenCode, Codex, or any Agent Skill-supporting system

Rules

Include og:title, og:description, og:image for every page

Use unique images per page

Optional: og:site_name, og:locale

Twitter card must be summary_large_image

Images must be optimized for fast loading

Non-Goals

Does not create visual designs or branding

Does not write copy or marketing text

Does not optimize general SEO or performance

Example Usage

Prompt:

Generate Open Graph metadata for a portfolio page. Use installed Next.js Portfolio Open Graph Best Practices skill.

Expected Output:

og:title, og:description, og:image per page

Twitter card: summary_large_image

Unique images per page

Optional: og:site_name, og:locale

Contribution

PRs, suggestions, and issue reports are welcome.
https://github.com/AzamCodes/nextjs-portfolio-og

# Related Skills

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚑ Amp πŸš€ Antigravity πŸ€– Claude Code πŸ¦€ Clawdbot πŸ“ Codex ▢️ Cursor πŸ€– Droid πŸ’Ž Gemini CLI πŸ™ GitHub Copilot πŸͺΏ Goose πŸ“Š Kilo Code πŸ”§ Kiro CLI πŸ’» OpenCode 🦘 Roo Code 🌲 Trae πŸ„ Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.