# Add Section Type

> Create a new course section component and register it in the section router. Use when adding a new section type to the course learn experience (e.g., "add a quiz section type" or "add a new section component").

- Skill: `joshuashepherd/add-section-type` (Agent Skill)
- Install (CLI): `npx skillmds@latest add joshuashepherd/add-section-type`
- Raw SKILL.md: https://api.skillmd.com/api/skills/joshuashepherd/add-section-type/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JoshuaShepherd (https://skillmd.com/u/joshuashepherd)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/joshuashepherd/add-section-type

---


Create a new course section component for the section type: $0

## Process

1. Read 2-3 existing sections in `{{COURSE_SECTIONS_DIR}}/` to understand the pattern (e.g., `ReadingSection.tsx`, `VideoSection.tsx`, `ReflectionSection.tsx`)
2. Read `{{COURSE_SECTIONS_DIR}}/SectionContent.tsx` to understand the section registry and how sections are rendered
3. Create the new section at `{{COURSE_SECTIONS_DIR}}/$0Section.tsx` following the exact same pattern as existing sections
4. Register it in `SectionContent.tsx` by adding the import and mapping entry

## Rules

- Follow the exact component signature and prop types of existing sections
- Use shadcn/ui components and semantic CSS classes
- Never hardcode tenant-specific text
- Keep the component focused on rendering its content type