create-page

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.

跳到安装

仓库: tomevault-io/skills-registry
最近来源活动: 2026年4月28日 22:53
检测到的 SKILL.md 语言: 英语
星标: 0
分支: 0

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/tomevault-io/skills-registry --skill create-page

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

2 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

polanyi-perspective

| Use when this capability is needed.

2026-07-19

capture

> Use when this capability is needed.

2026-07-19

vfs-architect

Review architecture and API design for the vfs-s3 project. Use when the user mentions @architect, asks to review an issue's design, discuss module boundaries, API shape, or architectural decisions for vfs-s3. Also trigger when the user wants to create an ADR (Architecture Decision Record) or evaluate a technical approach for the project. Intended for dispatch from Codex automation or Claude routines; GitHub trigger phrase: @vfs-s3-bot please prepare design doc Use when this capability is needed.

2026-07-19

查看这个仓库的全部 Skills

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 Page

Create a new content page on agentconfig.org following project conventions.

Overview

This skill creates all the necessary files for a new page:

HTML entry point (site/{slug}/index.html)
Page renderer (site/src/pages/{slug}.tsx)
Page component (site/src/components/{Name}Page/)
Data file (site/src/data/{slug}Tutorial.ts)
Vite config entry
Navigation link
Page registry entry for llms generation

When to Use

Use this skill when:

Creating a new tutorial or content page
Adding a major new section to the site
The page needs to be included in llms.txt generation

Step-by-Step Process

Step 1: Create HTML Entry Point

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>

Step 2: Create Page Renderer

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)

Step 3: Create Page Component

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 */}
      
    
  )
}

Step 4: Create Data File

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

Step 5: Add to Vite Config

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
    },
  },
},

Step 6: Add Navigation Link

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
]

Step 7: Add to Page Registry (IMPORTANT!)

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
  },
]

Step 8: Update generate-llms Script

If the page has unique data structure, update .claude/skills/generate-llms/scripts/generate-llms-full.ts:

Import the new data file in loadData()
Add a generate{Name}Md() function
Call it in the main() function

Step 9: Regenerate LLMs Files

After creating the page, regenerate the llms files:

Use the generate-llms skill to regenerate all llms files

Checklist

Before considering the page complete:

HTML entry point created in site/{slug}/index.html
Page renderer created in site/src/pages/{slug}.tsx
Page component created in site/src/components/{Name}Page/
Data file created in site/src/data/{slug}Tutorial.ts
Vite config updated with build input
Navigation link added
Page registry entry added to site/src/data/pages.ts
generate-llms script updated (if needed)
LLMs files regenerated

Example Prompts

Create a new page

Create a new page at /security for security best practices documentation

Add page to registry only

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.

create-page

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Create Page

Overview

When to Use

Step-by-Step Process

Step 1: Create HTML Entry Point

Step 2: Create Page Renderer

Step 3: Create Page Component

Step 4: Create Data File

Step 5: Add to Vite Config

Step 6: Add Navigation Link

Step 7: Add to Page Registry (IMPORTANT!)

Step 8: Update generate-llms Script

Step 9: Regenerate LLMs Files

Checklist

Example Prompts

Create a new page

Add page to registry only

Create Page

Overview

When to Use

Step-by-Step Process

Step 1: Create HTML Entry Point

Step 2: Create Page Renderer

Step 3: Create Page Component

Step 4: Create Data File

Step 5: Add to Vite Config

Step 6: Add Navigation Link

Step 7: Add to Page Registry (IMPORTANT!)

Step 8: Update generate-llms Script

Step 9: Regenerate LLMs Files

Checklist

Example Prompts

Create a new page

Add page to registry only