Skip to main content

Development Prompts

Ready-to-use prompts for Cursor workspace setup, Docusaurus feature development, React components, API integrations, and debugging workflows.

Overview​

These prompts help you quickly accomplish common development tasks:

  • Cursor workspaces with proper configuration
  • Docusaurus features following our patterns
  • React components with TypeScript and styling
  • API integrations with error handling and testing
  • Debugging systematic approaches

Development Stack​

Our primary development tools:

  • IDE: Cursor with AI assistance
  • Documentation: Docusaurus (this site)
  • Frontend: React with TypeScript
  • Styling: CSS Modules
  • Version Control: Git + GitHub
  • CI/CD: GitHub Actions + Cloudflare Pages
  • Package Management: npm

Available Prompts​

Workspace Setup​

Cursor New Workspace
Set up a new Cursor workspace with workspace rules (Project Rules in .cursor/rules/, or legacy .cursorrules), Git integration, and MCP servers.

Use for: Starting new projects, onboarding team members
Time: 20 minutes
Difficulty: Beginner

Documentation Development​

Docusaurus New Feature
Develop a new feature for the Docusaurus site with components, docs, and testing.

Use for: Adding new components, features, or sections to docs site
Time: 2-4 hours
Difficulty: Intermediate

Component Development​

React Component Template
Create a new React component with TypeScript, props, styling, and documentation.

Use for: Building reusable UI components
Time: 30 minutes
Difficulty: Beginner

Integration Development​

API Integration Starter
Integrate with external APIs including authentication, error handling, and rate limiting.

Use for: Connecting to third-party services (TwentyCRM, Webflow, Stape, etc.)
Time: 1-2 hours
Difficulty: Intermediate

Debugging & Testing​

Debugging Checklist
Systematic approach to debugging issues with tools, techniques, and documentation.

Use for: Troubleshooting bugs, performance issues, or unexpected behavior
Time: Variable
Difficulty: All levels

Quick Start Guide​

1. Choose Your Task​

Identify what you're trying to accomplish:

  • Starting a project? → Cursor New Workspace
  • Adding docs feature? → Docusaurus New Feature
  • Building UI component? → React Component Template
  • Connecting to API? → API Integration Starter
  • Fixing a bug? → Debugging Checklist

2. Gather Prerequisites​

Before using any development prompt, ensure you have:

  • Development environment set up (Node.js, npm, Git)
  • Access to relevant repositories
  • Understanding of project requirements
  • Related documentation reviewed

3. Customize the Prompt​

Replace these common placeholders:

  • [PROJECT_NAME] - Your project or workspace name
  • [FEATURE_NAME] - The feature you're building
  • [COMPONENT_NAME] - React component name
  • [API_NAME] - External API or service name
  • [ERROR_MESSAGE] - Specific error you're debugging

4. Follow Up​

After completing development:

  1. Write tests - Ensure code works as expected
  2. Document changes - Update relevant documentation
  3. Create PR - Follow Git workflow for review
  4. Deploy - Test in staging before production

Common Development Patterns​

Pattern 1: New Docusaurus Feature​

Typical workflow for adding a new feature to the docs site:

Prompts to use:

  1. Docusaurus New Feature
  2. React Component Template (if building new component)

Example: Adding the PromptButton component

Pattern 2: API Integration​

Typical workflow for integrating with external services:

Prompts to use:

  1. API Integration Starter

Example: Integrating TwentyCRM REST API

Pattern 3: Component Development​

Typical workflow for creating reusable components:

Prompts to use:

  1. React Component Template

Example: Creating ToolMetadata component

Development Best Practices​

Code Quality​

  • ✅ Use TypeScript for type safety
  • ✅ Follow consistent naming conventions
  • ✅ Write self-documenting code with clear names
  • ✅ Add comments for complex logic
  • ✅ Extract reusable patterns
  • ❌ Don't ignore TypeScript errors
  • ❌ Avoid magic numbers or strings
  • ❌ Don't duplicate code unnecessarily

Component Design​

  • ✅ Keep components focused (single responsibility)
  • ✅ Use props for configuration
  • ✅ Make components reusable
  • ✅ Use CSS Modules for styling
  • ✅ Handle loading and error states
  • ❌ Don't hard-code data
  • ❌ Avoid global state unless necessary
  • ❌ Don't mix concerns (styling, logic, data)

Testing​

  • ✅ Test locally before committing
  • ✅ Write unit tests for utility functions
  • ✅ Test edge cases and error conditions
  • ✅ Verify responsive design (mobile/desktop)
  • ✅ Check accessibility (WCAG compliance)
  • ❌ Don't skip testing critical paths
  • ❌ Avoid assuming happy path only
  • ❌ Don't deploy without local validation

Documentation​

  • ✅ Document all components and features
  • ✅ Include usage examples
  • ✅ Note prerequisites and dependencies
  • ✅ List common issues and solutions
  • ✅ Keep documentation up to date
  • ❌ Don't assume others know how it works
  • ❌ Avoid outdated documentation
  • ❌ Don't skip edge cases in docs

Current Projects​

See our active development work in:

Troubleshooting Common Issues​

Cursor Workspace​

Issue: MCP server not connecting
Solution: Check server configuration in settings, verify network access

Issue: Workspace rules not applying (.cursorrules / Project Rules)
Solution: Verify .cursorrules is in workspace root or Project Rules are in .cursor/rules/, then restart Cursor

Docusaurus Build​

Issue: Build fails with MDX errors
Solution: Run npm run validate-mdx, fix syntax issues

Issue: Links broken after deploy
Solution: Use relative paths, run npm run check-links

React Components​

Issue: Component not rendering
Solution: Check console for errors, verify import path, check props

Issue: Styling not applying
Solution: Verify CSS Module import, check class name spelling

API Integration​

Issue: Authentication failing
Solution: Verify API keys are correct, check environment variables

Issue: Rate limit exceeded
Solution: Implement rate limiting, add retry logic with backoff

Development Tools​

Cursor Features​

  • AI assistance - Context-aware code suggestions
  • MCP integration - Connect to Webflow, Context7, etc.
  • Multi-file editing - Edit related files simultaneously
  • Terminal integration - Run commands without leaving editor
  • Git integration - Commit, push, pull directly in Cursor

npm Scripts​

Common scripts for this project:

# Local development
npm start           # Start dev server
npm run build       # Production build
npm run serve       # Preview production build

# Quality checks
npm run validate-mdx    # Validate MDX syntax
npm run check-links     # Check for broken links
npm run verify-docs     # Verify documentation freshness
npm test                # Run unit tests

# Documentation
npm run create-doc      # Interactive doc generator
npm run sync-tools      # Sync tools to Docusaurus

Browser DevTools​

  • Console - Debug JavaScript errors
  • Network - Monitor API calls and timing
  • Elements - Inspect DOM and styling
  • Sources - Debug with breakpoints
  • Lighthouse - Performance and accessibility audits

Contributing New Prompts​

Have a new development task that needs a prompt?

  1. Follow the prompt template structure
  2. Test the prompt on a real development task
  3. Include code examples and expected output
  4. Document common issues you encountered
  5. Add to the appropriate category
  6. Share with the team for feedback

Remember: Always test changes locally before creating a PR. Use feature branches for development work, and never commit directly to main branch.