Docusaurus New Feature Prompt

Context

Use this prompt when adding a new feature to the Pacing Agency Docusaurus documentation site (docs.pacing.agency). This covers:

• New React components (FAQ, Callout, ToolMetadata, etc.)
• New documentation sections (Prompts, Processes, etc.)
• New build scripts (sync, validation, etc.)
• New styling or themes

This prompt helps ensure features follow established patterns and are properly documented.

Prerequisites

• Local development environment - Node.js 20.x, npm installed
• Repository cloned - TechStackMain workspace open in Cursor
• Docusaurus knowledge - Basic understanding of Docusaurus architecture
• Feature planned - Clear requirements for what you're building

See Docusaurus documentation and Repository Structure.

Prompt Template

I need to develop a new feature for the Pacing Agency Docusaurus documentation site with the following requirements:

**Feature Information:**
- Feature name: [FEATURE_NAME]
- Feature type: [FEATURE_TYPE] (React component/Build script/New section/Theme enhancement)
- Purpose: [PURPOSE_DESCRIPTION]
- User benefit: [USER_BENEFIT]

**Technical Requirements:**
- Component location: [COMPONENT_PATH] (docusaurus/src/theme/MDXComponents/ or docusaurus/src/components/)
- Props/configuration: [PROPS_CONFIG]
- Styling approach: [STYLING] (CSS Modules/Inline styles/Theme tokens)
- Dependencies: [DEPENDENCIES]
- TypeScript types: [TYPE_REQUIREMENTS]

**Integration Requirements:**
- Where used: [USAGE_LOCATIONS] (MDX files/Sidebars/Build process)
- Data sources: [DATA_SOURCES] (Frontmatter/External API/Static data)
- Build integration: [BUILD_INTEGRATION] (Script hooks/Plugin/None)

**Documentation Requirements:**
- Feature documentation: [DOCS_LOCATION] (docusaurus/docs/docusaurus/features/)
- Usage examples: [EXAMPLES_NEEDED]
- Setup guide: [SETUP_STEPS]
- Migration notes: [MIGRATION_INFO] (if replacing existing feature)

**Testing Requirements:**
- Unit tests: [TEST_REQUIREMENTS]
- Visual testing: [VISUAL_TESTS]
- Build verification: [BUILD_TESTS]
- Browser compatibility: [BROWSER_SUPPORT]

Please provide:

1. **Component implementation** (if applicable):
   - React component code
   - TypeScript interfaces
   - CSS Module styles
   - Props validation
   - Error handling
2. **Build script** (if applicable):
   - Node.js script
   - Integration with prebuild hook
   - Error handling and logging
3. **Feature documentation**:
   - Overview and benefits
   - Installation/setup guide
   - Usage examples
   - Configuration options
   - Common issues and solutions
4. **Setup guide updates**:
   - Updates to setup-new-repo.md
   - Configuration changes needed
5. **Testing plan**:
   - How to test locally
   - What to verify
   - Edge cases to check

Follow Pacing Agency patterns from existing features:
- CopyDownloadButton component
- FAQ component
- Tool categorization system
- Sync scripts (sync-tools.cjs, sync-todo.cjs)

Format with clear sections and code blocks.

Variables to Customize

Variable	Description	Example
[FEATURE_NAME]	Feature name	"PromptButton", "Analytics Integration", "Tool Health Dashboard"
[FEATURE_TYPE]	Type of feature	"React component", "Build script", "New section", "Theme enhancement"
[PURPOSE_DESCRIPTION]	What the feature does	"Allows copying documentation in AI-optimized format"
[USER_BENEFIT]	Why this helps users	"Saves time when using docs with AI assistants"
[COMPONENT_PATH]	Where component lives	"docusaurus/src/theme/MDXComponents/PromptButton/"
[PROPS_CONFIG]	Component configuration	"platformType, formatOptions, content"
[STYLING]	Styling approach	"CSS Modules with theme tokens", "Inline styles"
[DEPENDENCIES]	External packages	"None", "clipboardy", "gray-matter"
[TYPE_REQUIREMENTS]	TypeScript types needed	"Props interface, format options enum"
[USAGE_LOCATIONS]	Where feature is used	"All MDX documentation pages", "Tool documentation only"
[DATA_SOURCES]	Data sources	"Frontmatter metadata", "CSV file", "API call"
[BUILD_INTEGRATION]	Build process integration	"Add to prebuild hook in package.json"
[DOCS_LOCATION]	Documentation file path	"docusaurus/docs/docusaurus/features/prompt-button.md"
[EXAMPLES_NEEDED]	Example types	"Basic usage, advanced configuration, edge cases"
[SETUP_STEPS]	Installation instructions	"npm install, add to MDXComponents, configure"
[MIGRATION_INFO]	Migration from old version	"Replace X with Y, update configuration"
[TEST_REQUIREMENTS]	Testing needs	"Unit tests for formatters, visual test in dev server"
[VISUAL_TESTS]	Visual testing	"Test in light/dark mode, mobile/desktop"
[BUILD_TESTS]	Build verification	"Verify builds without errors, check output files"
[BROWSER_SUPPORT]	Browser compatibility	"Chrome, Firefox, Safari (modern browsers)"

Expected Output

The AI should provide complete implementation following Pacing Agency patterns. See full implementation examples in:

• FAQ Structured Data
• Tool Categorization System
• Setup Guide Template

Follow-up Actions

1. Test locally: Run npm start and verify feature works
2. Build test: Run npm run build and verify no errors
3. Write documentation: Create feature documentation in docusaurus/docs/docusaurus/features/
4. Update setup guide: Add to setup-new-repo.md if reusable
5. Create PR: Follow Git workflow for review
6. Deploy: Test in staging before production

Related Documentation

• Docusaurus Overview
• Repository Structure
• Features Documentation
• FAQ Structured Data

Success Criteria

✅ Feature works in local development
✅ Build completes without errors
✅ Feature documented with examples
✅ Follows established code patterns
✅ TypeScript types are correct
✅ Visual testing complete (light/dark, mobile/desktop)
✅ PR created and reviewed
✅ Setup guide updated (if reusable)

Common Issues

Issue: Component not rendering in MDX

Solution: Verify component is exported from MDXComponents/index.js and imported correctly in MDX file.

Issue: CSS styles not applying

Solution: Check CSS Module import, verify class names match, check theme tokens are correct.

Issue: Build fails with TypeScript errors

Solution: Add type definitions, ensure all props are typed, check tsconfig.json includes component files.

Issue: Dark mode styling broken

Solution: Use Docusaurus CSS variables (--ifm-*) instead of hard-coded colours, test in both themes.

---

Last updated: 2026-01-07
Estimated time: 2-4 hours (planning + implementation + documentation)