メニュー
Create a new tutorial/content page on agentconfig.org with proper file structure, routing, and registry entry. Use when adding a new top-level page like /skills, /agents, or /mcp. Use when this capability is needed.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/tomevault-io/skills-registry --skill create-pageコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | create-page |
| description | Create a new tutorial/content page on agentconfig.org with proper file structure, routing, and registry entry. Use when adding a new top-level page like /skills, /agents, or /mcp. Use when this capability is needed. |
| metadata | {"author":"agentconfig"} |
Create a new content page on agentconfig.org following project conventions.
This skill creates all the necessary files for a new page:
site/{slug}/index.html)site/src/pages/{slug}.tsx)site/src/components/{Name}Page/)site/src/data/{slug}Tutorial.ts)Use this skill when:
Create site/{slug}/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{Page Title} - agentconfig.org</title>
<meta name="description" content="{One-line description}" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/pages/{slug}.tsx"></script>
</body>
</html>
Create site/src/pages/{slug}.tsx:
import { render } from 'preact'
import { {Name}Page } from '@/components/{Name}Page'
import '@/index.css'
const rootElement = document.getElementById('root')
if (!rootElement) {
throw new Error('Root element not found')
}
render(<{Name}Page />, rootElement)
Create site/src/components/{Name}Page/index.ts:
export { {Name}Page } from './{Name}Page'
Create site/src/components/{Name}Page/{Name}Page.tsx:
import type { VNode } from 'preact'
import { PageLayout } from '@/layouts'
import { TableOfContents } from '@/components/TableOfContents'
import { tocItems } from '@/data/{slug}Tutorial'
export function {Name}Page(): VNode {
return (
<PageLayout>
{/* Hero Section */}
<header className="border-b border-border bg-muted/30">
<div className="container mx-auto px-4 py-12 md:py-16">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
{Page Title}
</h1>
<p className="text-xl text-muted-foreground max-w-2xl">
{Description}
</p>
</div>
</header>
{/* Main Content */}
<div className="container mx-auto px-4 py-8">
{/* Add page content here */}
)
}
Create site/src/data/{slug}Tutorial.ts:
import type { TocItem } from '@/components/TableOfContents'
export const tocItems: readonly TocItem[] = [
{ id: 'section-1', label: '1. First Section', level: 'beginner' },
// Add more sections
] as const
export const codeSamples: Record<string, string> = {
// Add code samples
}
export const furtherReadingLinks: readonly FurtherReadingLink[] = [
// Add further reading links
] as const
Update site/vite.config.ts build inputs:
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
skills: resolve(__dirname, 'skills/index.html'),
agents: resolve(__dirname, 'agents/index.html'),
{slug}: resolve(__dirname, '{slug}/index.html'), // Add this
},
},
},
Update site/src/components/Navigation/Navigation.tsx:
const navLinks = [
{ href: '/', label: 'Home' },
{ href: '/skills/', label: 'Skills' },
{ href: '/agents/', label: 'Agents' },
{ href: '/{slug}/', label: '{Label}' }, // Add this
]
Update site/src/data/pages.ts to include the new page:
export const pages: readonly PageMeta[] = [
// ... existing pages
{
slug: '{slug}',
title: '{Page Title}',
description: '{One-line description for llms.txt}',
features: '{What the md file contains}',
dataFile: '{slug}Tutorial.ts',
mdFile: '{slug}.md',
partNumber: {next number}, // Increment from last page
},
]
If the page has unique data structure, update .claude/skills/generate-llms/scripts/generate-llms-full.ts:
loadData()generate{Name}Md() functionmain() functionAfter creating the page, regenerate the llms files:
Use the generate-llms skill to regenerate all llms files
Before considering the page complete:
site/{slug}/index.htmlsite/src/pages/{slug}.tsxsite/src/components/{Name}Page/site/src/data/{slug}Tutorial.tssite/src/data/pages.tsCreate a new page at /security for security best practices documentation
Add the /mcp page to the page registry so it's included in llms generation
Converted and distributed by TomeVault — claim your Tome and manage your conversions.