ワンクリックでManusで任意のスキルを実行

create-page

スター7

フォーク3

更新日2026年1月16日 21:56

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.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

agentconfig

agentconfig/agentconfig.org

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

関連職種SOC

SOC 職業分類に基づく

ウェブ開発者コンピュータ・数学職·SOC 15-1254

SKILL.md

readonly

このリポジトリの他の Skills

同じリポジトリ

generate-llms

agentconfig/agentconfig.org

Generate llms.txt and llms-full.txt files for AI agent consumption following the llmstxt.org standard. Use when updating site content that should be reflected in the llms files, or when building/deploying the site.

2026-03-127

add-provider

agentconfig/agentconfig.org

Add a new AI provider to agentconfig.org's comparison system. Use when integrating a new coding assistant (e.g., Cursor, Claude Desktop, GitHub Copilot alternative) with proper type system updates, implementation data, UI components, tests, and documentation.

2026-01-207

advisor

agentconfig/agentconfig.org

Interactive workflow advisor that helps you choose optimal AI primitives from agentconfig.org based on your specific workflow needs, skill level, and tooling preferences. Use when deciding which primitives to implement or how to structure your AI configuration.

2026-01-197

page-styling

agentconfig/agentconfig.org

Define agentconfig.org page layout and hero styling for new pages that match the site.

2026-01-167

add-primitive

agentconfig/agentconfig.org

Add or modify AI primitive definitions in the data layer with correct typing and complete metadata. Use when adding new primitives, updating descriptions, or extending primitive categories.

2026-01-167

create-component

agentconfig/agentconfig.org

Create new Preact components following project conventions with proper file structure, TypeScript types, and Tailwind styling. Use when adding UI components, sections, or interactive elements to the site.

2026-01-167

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.

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

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