astro-content

nozomi-koborinai's avatarfrom nozomi-koborinai

Create Astro/Starlight MDX content pages. Use when the user says "write a new article", "add a blog post", "create content in Tech/Life category", or "add an MDX page".

⭐6stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Technical Writing]

When & Why to Use This Skill

This Claude skill automates the creation and management of MDX content specifically for Astro and Starlight documentation frameworks. It streamlines the technical writing workflow by handling frontmatter generation, directory organization, and automatic sidebar updates, ensuring a consistent and SEO-friendly publishing process for developers and content creators.

Use Cases

  • Rapid Documentation Generation: Quickly create new technical documentation pages with pre-configured MDX frontmatter, including titles, descriptions, and draft statuses.
  • Automated Blog Management: Effortlessly add and categorize blog posts into specific directories like 'Tech' or 'Life' using simple natural language triggers.
  • Sidebar Configuration Sync: Automatically update the Starlight 'sidebar.ts' file whenever a new article is added, maintaining site navigation without manual code edits.
  • Multimedia Asset Integration: Streamline the inclusion of images and assets by automating path resolution and MDX import statements within the content files.
nameastro-content
descriptionCreate Astro/Starlight MDX content pages. Use when the user says "write a new article", "add a blog post", "create content in Tech/Life category", or "add an MDX page".

astro-content

Create Astro/Starlight MDX content pages.

Trigger Examples

  • "Write a new article"
  • "Add an article to Tech category"
  • "Create a blog post"
  • "Add an MDX page"

Directory Structure

app/src/content/docs/
├── about-me/          # About Me section
│   └── overview.mdx
├── tech/              # Tech articles
│   └── *.mdx
└── life/              # Life articles
    └── *.mdx

Execution Flow

1. Confirm Category

Ask user for category:

Category Purpose
tech Technical articles (Cloud, AI, DevOps, Architecture, etc.)
life Lifestyle, hobbies, journals, etc.

2. Gather Article Information

Confirm the following:

  • Title: Article title
  • Description: One-sentence summary
  • Slug: URL path (e.g., tech/genkit-intro → /tech/genkit-intro/)
  • Draft: Whether it's a draft (default: false)

3. Create MDX File

File path: app/src/content/docs/{category}/{slug}.mdx

Frontmatter template:

---
title: <title>
description: <description>
draft: true  # Only if draft
---

With hero image:

---
title: <title>
description: <description>
hero:
  tagline: <subtitle>
  image:
    alt: <image description>
    file: ../../../assets/<image-file>
---

4. Update sidebar.ts

Add new article to app/src/sidebar.ts:

{
  label: "Tech",
  items: [
    { label: "<Article Title>", slug: "tech/<slug>" },
  ],
},

5. Assets (Optional)

If using images:

  1. Place image in app/src/assets/
  2. Import and use in MDX:
import myImage from '../../../assets/my-image.png';

<img src={myImage.src} alt="Description" style="..." />

Content Guidelines

  1. Language: English or Japanese (follow user preference)
  2. Markdown: Use GitHub Flavored Markdown
  3. Headings: Start with ## (# is auto-generated from title by Starlight)
  4. Lists: Use bullet points for readability
  5. Code blocks: Always specify language (typescript, bash, etc.)
  6. Emoji: Use sparingly (only when user explicitly requests)

Post-Creation Verification

After creation, suggest:

cd app && npm run build && npm run lint && npm run typecheck

Verify build succeeds.