К основному содержанию
скилл CX Codex

content-collection — скилл для Claude Code: установка

Скилл помогает создавать и менять коллекции контента Astro с типизированными схемами и запросами. Пригодится для блогов, документации и других структурированных данных.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add incluud/astro-agent-skills --skill content-collection -a claude-code
Открыть на GitHub

Что делает content-collection

Скилл ведёт работу от проектирования коллекций до проверки записей. Он помогает выбрать build-time или live-подход, описать обязательные поля и связи, настроить схемы через astro/zod, а загрузку данных организовать с помощью glob() или file(). Для изображений предусмотрена проверка через image().

В запросах используются getCollection(), getEntry() и getEntries(), а маршруты строятся по entry.id; содержимое выводится через render(entry). После изменений скилл предлагает запустить npx astro sync и проверить реальные записи. Для Astro 6 и новее конфигурация должна находиться в src/content.config.*, а старый путь src/content/config.* использовать нельзя.

Какие задачи решает

  • спроектировать типизированные коллекции Astro
  • настроить загрузку данных из папок и файлов
  • связать записи через reference()
  • перенести коллекции на текущий Content Layer API
  • проверить схемы и реальные записи после изменений

Примеры запросов агенту

  • Настрой коллекции блога и авторов в src/content.config.ts с типами, связями и проверкой изображений.
  • Перенеси проект со старого Content API на текущий Astro API и обнови запросы к записям.
  • Проверь коллекции после изменений и исправь ошибки схем перед запуском npx astro sync.

Как установить content-collection

1Через Skills CLI (Vercel)

npx skills add incluud/astro-agent-skills --skill content-collection -a claude-code

2Вручную: положить файлы

~/.claude/skills/content-collection/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/content-collection/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о content-collection

Как установить content-collection в Claude Code?

Выполните npx skills add incluud/astro-agent-skills --skill content-collection -a claude-code, затем проверьте файл ~/.claude/skills/content-collection/SKILL.md.

Что делает content-collection?

Скилл помогает создавать и рефакторить коллекции Astro: задавать схемы, загружать данные, связывать записи и получать их через актуальные Content API.

Что изменилось в коллекциях Astro 6 и новее?

Используйте src/content.config.*, entry.id, getEntry() и render(entry). Коллекциям нужен loader, а устаревшие type: 'content' и type: 'data' нужно убрать.

Исходный текст

SKILL.md · MIT
---
name: content-collection
description: Set up and evolve Astro content collections with typed schemas and reliable querying patterns.
---

# Astro Content Collections

Use this skill when creating or refactoring structured content in Astro, such as blogs, docs, changelogs, case studies, team data, or other schema-driven content.

If `astro-best-practices` is available, apply it alongside this skill for naming, accessibility, and performance defaults.

## Workflow

### 1. Decide whether the collection is build-time or live

Most content sites should use build-time collections in `src/content.config.*`. Only reach for live collections in `src/live.config.*` when the data truly needs request-time freshness.

Before coding, decide:

- which collections exist
- which fields are required
- which relationships need references
- whether assets such as images should be validated

Favor a schema that reflects how the site queries content, not just how frontmatter currently looks.

### 2. Define collections in `src/content.config.*`

Use the current Content Layer API. For build-time collections:

- define them in `src/content.config.ts` (or `.js` / `.mjs`)
- give every collection a `loader`
- import `z` from `astro/zod`
- do not use `type: 'content'` or `type: 'data'`

Example:

```ts
import { defineCollection, reference } from 'astro:content'
import { glob } from 'astro/loaders'
import { z } from 'astro/zod'

const blog = defineCollection({
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  schema: ({ image }) => z.object({
    title: z.string(),
    description: z.string(),
    publishDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    author: reference('authors'),
    cover: image().optional(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
})

const authors = defineCollection({
  loader: glob({ base: './src/data/authors', pattern: '**/*.json' }),
  schema: z.object({
    name: z.string(),
    email: z.email().optional(),
    avatar: z.url().optional(),
  }),
})

export const collections = { blog, authors }
```

Useful patterns:

- `glob()` for folders of local entries
- `file()` for a single JSON or other data file
- `z.enum(...)` for controlled values
- `z.coerce.date()` for frontmatter dates
- `reference('collection-name')` for relationships
- `schema: ({ image }) => ...` when image validation matters

### 3. Keep the collection shape current

For Astro 6 and newer:

- use `src/content.config.*`, not `src/content/config.*`
- use `entry.id` as the slug-like identifier in URLs and queries
- use `entry.filePath` only when you truly need the source path
- use `getEntry()` instead of legacy `getEntryBySlug()` or `getDataEntryById()`

Prefer a stable folder structure and predictable IDs. Avoid scattering content across route folders if it is logically a collection.

### 4. Query with intent

Use the content APIs that match the job:

- `getCollection()` for lists
- `getEntry()` for a single known entry
- `getEntries()` for arrays of references
- collection filters for draft/published splits

Example:

```astro
---
import { getCollection } from 'astro:content'

const posts = await getCollection('blog', ({ data }) => !data.draft)
---
```

When rendering entries, keep route generation and content rendering separate enough that each part remains easy to reason about.

### 5. Wire routes and rendering with the current API

For dynamic routes:

- build paths from collection IDs
- pass the entry through props cleanly
- render content with `render(entry)`

Example:

```astro
---
import { getCollection, render } from 'astro:content'

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }))
}

const { post } = Astro.props
const { Content } = await render(post)
---

<article>
  <h1>{post.data.title}</h1>
  <Content />
</article>
```

### 6. Sync and validate

After changing collections:

- run `npx astro sync` or the repo’s normal Astro workflow
- fix schema mismatches instead of weakening types
- validate at least one real entry per collection
- watch for warnings about missing loaders, legacy config paths, or deprecated imports

## Migration Guidance

When migrating from older content patterns:

1. move `src/content/config.ts` to `src/content.config.ts`
2. add a `loader` to every collection
3. remove any `type: 'content'` or `type: 'data'`
4. replace `import { defineCollection, z } from 'astro:content'` with `import { defineCollection } from 'astro:content'` and `import { z } from 'astro/zod'`
5. replace `post.slug` with `post.id`
6. replace `entry.render()` with `render(entry)`
7. replace `getEntryBySlug()` and `getDataEntryById()` with `getEntry()`

If the project is crossing Astro versions at the same time, verify version-sensitive content APIs in the current official Astro docs before finalizing.

© incluud · MIT · incluud/astro-agent-skills

Похожие скиллы

Всё по теме «Фронтенд и UI» →
astro-framework delineas Скилл для ИИ-агента, который разбирается в islands architecture, гидратации и Content Layer API. Пригодится, когда проект на Astro растёт и нужно решить, что рендерить на сервере, а что в браузере. CX Codex +1 2 200установок astro официальный github Правило задаёт Copilot стандарты разработки на Astro 7: островная архитектура, Content Layer API, TypeScript и серверный рендеринг по умолчанию. ★ 40 451звёзд репо presentation iii-hq Превращает каталог технической спецификации в интерактивную веб-презентацию. Нужен, когда спецификацию хотят показать как связный публичный дек. CX Codex +1 3 500установок taiwan-md-knowledge-base reason-machines Скилл ведёт открытую базу знаний о Тайване на Astro v5: статьи на китайском и английском, граф связей на D3.js. Пригодится, если вы пишете или переводите материалы для такого проекта. CX Codex +1 1 300установок building-emdash-site emdash-cms Скилл для сборки клиентской части проекта EmDash CMS на Astro: схема, сиды, запросы к контенту, меню и деплой. CX Codex +1 756установок custom-pages-and-apis eventcatalog Собирает свои страницы и API-роуты внутри проекта EventCatalog: Astro-страницы в pages/, TypeScript-эндпоинты в pages/api/. CX Codex +1 410установок

Из того же набора4

Спонсоры проекта

Компании, которые помогают держать аналитику открытой