Communitygithub.com

YepAPI/skills

MDX 블로그 설정, RSS 피드 생성, sitemap.xml, 구조화된 데이터/JSON-LD 및 관련 게시물.

skills란 무엇인가요?

이 스킬은 Next.js App Router를 사용하여 MDX 기반 블로그 엔진을 완벽하게 설정하는 방법을 제공합니다. 개발자는 `content/blog/[slug].mdx`에 프론트매터를 포함한 MDX 파일을 작성하고, 동적 라우팅을 통해 각 게시물을 정적으로 생성할 수 있습니다. 또한 빌드 시 RSS 피드(`/rss.xml`), 사이트맵(`sitemap.xml`), JSON-LD 구조화 데이터(`Article` 스키마)를 자동 생성하여 SEO를 최적화합니다. 태그 기반 관련 게시물 추천, H2/H3 기반 목차, 페이지네이션(10개씩)을 지원하며, 프론트매터에 `publishedAt` 누락 시 정렬 및 RSS가 깨지는 문제를 방지합니다. 이 스킬은 Next.js, React, MDX 환경에서 블로그 구축 시 SEO와 사용자 경험을 모두 만족시키는 강력한 가이드 역할을 합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/blog-engine

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

블로그 엔진

규칙

  • MDX 콘텐츠: content/blog/[slug].mdx — 제목, 설명, 게시일, 수정일, 태그, 이미지를 포함한 프론트매터
  • 동적 라우팅: app/blog/[slug]/page.tsx — 빌드 시 MDX를 가져오고, 파일 시스템에서 정적 파라미터 생성
  • RSS 피드: /rss.xml에 feed.xml 생성 — 각 게시물의 제목, 설명, pubDate, 링크, guid 포함 — 빌드 시 재생성
  • 사이트맵: 모든 블로그 URL, lastmod 날짜, changefreq가 포함된 sitemap.xml 생성 — Google Search Console에 제출
  • JSON-LD 구조화 데이터: 모든 게시물에 Article 스키마 — headline, datePublished, dateModified, author, image, publisher
  • 관련 게시물: 태그 기반 매칭 — 2개 이상의 태그를 공유하는 게시물 찾기, 없으면 최근 게시물로 대체 — 3개의 관련 게시물 표시
  • 목차: MDX의 H2/H3 제목에서 자동 생성 — 데스크탑에서 고정 사이드바로 렌더링
  • 페이지네이션: 페이지당 10개 게시물, /blog/page/[num] — SEO를 위해 이전/다음 링크 포함

프론트매터 스키마

title: "게시물 제목"
description: "160자 미만의 메타 설명"
publishedAt: "2025-01-15"
updatedAt: "2025-02-01"
tags: ["nextjs", "react"]
image: "/blog/post-title/cover.jpg"
author: "작성자 이름"

RSS 피드 패턴

API 라우트에서 제공하거나 빌드 시 생성합니다. 필수 필드: <title>, <link>, <description>, 게시물당 <item> (<guid>, <pubDate> 포함).

피해야 할 사항

  • 프론트매터에 publishedAt 누락 — RSS 및 정렬이 깨짐
  • 사이트맵 미제출 — Google이 새 게시물을 빠르게 발견하지 못함
  • JSON-LD 생략 — 리치 스니펫 자격 상실
  • 관련 게시물 하드코딩 — 자동 관련성을 위해 태그 매칭 사용

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

관련 스킬