菜单
Reviews SEO including meta tags, semantic HTML, and Open Graph. Use when building public-facing pages, adding title/description tags, or optimizing for search engines.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Transforms completed work into powerful resume bullet points with action verbs, technical context, and quantified impact. Use when completing tasks, updating portfolio, or preparing job applications.
Transforms completed work into STAR interview stories (Situation, Task, Action, Result). Use when completing tasks, preparing for behavioral interviews, or documenting achievements.
Reviews accessibility including WCAG, ARIA, keyboard navigation. Use when junior builds forms, buttons, modals, interactive elements, or asks "is this accessible", "a11y", "screen reader".
Reviews API design, REST conventions, and backend architecture. Use when junior builds API endpoints, Express routes, middleware, controllers, or asks "is this RESTful", "check my endpoint".
Reviews schema design, SQL queries, ORM patterns. Use when junior creates schema, writes queries, adds migrations, works with Prisma/MongoDB/PostgreSQL, or asks "is this SQL safe", "N+1", "index".
Guides systematic debugging through Protocol D (READ, ISOLATE, DOCS, HYPOTHESIZE, VERIFY). Use when junior says "stuck", "not working", "broken", "bug", "error", "crashed", "failing", "can't figure out", or expresses frustration. Do NOT use for general questions.
| name | seo-fundamentals |
| description | Reviews SEO including meta tags, semantic HTML, and Open Graph. Use when building public-facing pages, adding title/description tags, or optimizing for search engines. |
"Good SEO is good UX. If search engines can't understand your page, users might not find it."
Activate this skill when:
<head> sections<header>, <main>, <nav>, <article>, <footer><!-- ❌ BAD: Multiple H1s confuse search engines -->
<h1>Welcome</h1>
<h1>Our Products</h1>
<h1>Contact Us</h1>
<!-- ✅ GOOD: One H1, logical hierarchy -->
<h1>Welcome to Our Store</h1>
<h2>Our Products</h2>
<h2>Contact Us</h2>
<!-- ❌ BAD: Empty or useless alt -->
<img src="hero.jpg" alt="">
<img src="team.jpg" alt="image">
<!-- ✅ GOOD: Descriptive alt text -->
<img src="hero.jpg" alt="Software engineer working at laptop">
<img src="team.jpg" alt="Our founding team of 5 engineers">
<!-- ❌ BAD: No semantic meaning -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- ✅ GOOD: Semantic HTML -->
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
<!-- ❌ BAD: Jumps from H1 to H4 -->
<h1>Page Title</h1>
<h4>Some Section</h4>
<!-- ✅ GOOD: Sequential hierarchy -->
<h1>Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
<!-- ❌ BAD: Not descriptive -->
<title>Home</title>
<title>Page</title>
<!-- ✅ GOOD: Descriptive with keywords -->
<title>Daniel Lamb - Full Stack Developer Portfolio</title>
<title>Contact Us | Acme Software Solutions</title>
Ask these instead of giving answers:
// Pattern: Metadata export
export const metadata = {
title: 'Page Title',
description: 'Page description',
// Your implementation will differ
};
// Pattern: Next Head
import Head from 'next/head';
<Head>
<title>Your title here</title>
<meta name="description" content="Your description" />
</Head>
<!-- In index.html or via react-helmet -->
<head>
<title>Title here</title>
<meta name="description" content="Description here">
</head>
| Flag | Question |
|---|---|
| Missing title tag | "What will this page show in search results?" |
| Multiple H1s | "Which heading is the main topic? Search engines are confused." |
| No meta description | "How will Google summarize this page?" |
| Empty alt text | "What if the image doesn't load? What info is lost?" |
| All divs, no semantics | "Can a screen reader navigate this page?" |
| Title over 60 chars | "This will be cut off in search results. Can you shorten it?" |
<!-- Minimum viable Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">
"I implemented SEO best practices including semantic HTML, proper heading hierarchy, and meta tags, improving our page's discoverability."
When reviewing their code:
Fetch: Next.js metadata documentation
Fetch: Semantic HTML best practices
Search: "metadata" + "title" + "description" in Next.js repos
Search: Open Graph implementation patterns