Function SkillSpecSection

web/app/docs/page.tsx:437–498

()

}

function SkillSpecSection() {
	return (
		<DocSection id="skill-spec" title="Skill Format">
			<p className="text-[var(--foreground)]">
				Skills are plain Markdown files with optional YAML frontmatter. The
				frontmatter is used by Agentfiles for display and filtering.
			</p>
			<CodeBlock lang="markdown">{`---
name: ship
description: Commit staged changes with a conventional commit message
tool: claude
type: skill
version: 1.0.0
---

When asked to ship or commit:

1. Run \`git status\` to see staged files
2. Analyze the diff with \`git diff --staged\`
3. Write a conventional commit message (feat/fix/chore/docs/refactor)
4. Run \`git commit -m "..."\`

Follow the project's existing commit style. Never skip hooks.`}</CodeBlock>
			<p>Supported frontmatter fields:</p>
			<div className="rounded-lg border border-[var(--border)] bg-[var(--card)] overflow-hidden">
				<table className="w-full text-xs font-mono">
					<thead>
						<tr className="border-b border-[var(--border)] bg-[var(--background)]">
							<th className="text-left px-4 py-2 text-[var(--muted)]">Field</th>
							<th className="text-left px-4 py-2 text-[var(--muted)]">Type</th>
							<th className="text-left px-4 py-2 text-[var(--muted)]">
								Required
							</th>
						</tr>
					</thead>
					<tbody>
						{[
							["name", "string", "No"],
							["description", "string", "No"],
							["tool", "string", "No"],
							["type", "skill | command | agent", "No"],
							["version", "string", "No"],
						].map(([field, type, required]) => (
							<tr
								key={field}
								className="border-b border-[var(--border)] last:border-0"
							>
								<td className="px-4 py-2 text-violet-300">{field}</td>
								<td className="px-4 py-2 text-[var(--muted)]">{type}</td>
								<td className="px-4 py-2 text-[var(--muted)]">{required}</td>
							</tr>
						))}
					</tbody>
				</table>
			</div>
			<p>
				All fields are optional. Skills without frontmatter work fine &mdash;
				Agentfiles uses the filename as the display name.