Documentation
Prompt Examples
This collection demonstrates Terragon's context capabilities through three essential examples that show how to leverage multiple context types effectively.
UI Update with Visual Context
Scenario: Update React components to match a new design system
Update the dashboard to match the new design shown in the attached mockup.
Requirements:
- Implement the new color scheme and spacing
- Update all card components to use rounded corners
- Add the gradient header as shown
- Ensure mobile responsiveness
- Maintain existing functionality
Current implementation:
@src/pages/dashboard/index.tsx
@src/components/DashboardCard.tsx
@src/styles/theme.css
[Attached: new-dashboard-design.png]Why This Works:
- Visual reference provides exact design requirements
- Multiple file mentions give full context
- Clear requirements prevent ambiguity
- Specific scope keeps task focused
Result: Terragon analyzes the mockup, understands the current implementation, and systematically updates all components to match the new design while preserving functionality.
Bug Fix from External Sources
Scenario: Fix a complex issue using GitHub issue details and monitoring data
Fix the memory leak issue reported in GitHub and confirmed by our monitoring.
Issue details: https://github.com/acme/app/issues/892
Performance data: https://app.datadog.com/dashboard/mem-leak-analysis
The leak appears to happen in our real-time features after 1-2 hours of use.
Investigate:
@src/hooks/useWebSocket.ts
@src/contexts/RealtimeContext.tsx
@src/components/LiveFeed.tsx
Look for:
- Event listeners not being cleaned up
- Subscriptions not being unsubscribed
- Large objects being retained in closuresWhy This Works:
- External URLs provide rich context from multiple sources
- Specific investigation areas guide Terragon efficiently
- Clear symptoms help identify the problem
- Targeted file list focuses the search
Result: Terragon fetches issue details and monitoring data, identifies the memory leak in event listener cleanup, and implements proper disposal patterns.
Full Feature with Mixed Context
Scenario: Implement a complete feature using voice, images, and code references
[Voice transcription]: I need a notification system for our app. Users should be able to receive in-app notifications for important events like new messages, mentions, and system alerts. The notifications should appear as a dropdown in the header with a bell icon, show unread count, and have real-time updates.
UI Design: [Attached: notification-dropdown-mockup.png]
Backend requirements:
- Store notifications in database
- WebSocket for real-time delivery
- Mark as read/unread functionality
- Pagination for old notifications
Reference our existing message system for patterns:
@src/features/messages/
@src/server/websocket/messageHandler.ts
Add to:
@src/components/layout/Header.tsx
@prisma/schema.prismaWhy This Works:
- Voice input captures natural requirements quickly
- Visual mockup shows exact UI expectations
- Reference implementation ensures consistency
- Mixed context provides complete picture
Result: Terragon implements the entire notification system following existing patterns, matching the UI mockup, and fulfilling all requirements from the voice description.
Key Takeaways
Combine Context Types
The most effective prompts use multiple context types:
- Visual + Code: UI updates with mockups and current implementation
- URLs + Files: Bug fixes with issue trackers and specific code locations
- Voice + Images + References: Complex features with natural language and visual specs
Be Specific About Scope
- List exact files to modify
- Provide clear acceptance criteria
- Reference existing patterns to follow
- Include both what to do and what not to change
Leverage External Resources
- GitHub issues for bug context
- Monitoring dashboards for performance data
- Documentation sites for API integration
- Design tools for UI specifications
Best Practices
Best Practices
-
Be Specific: Clear, detailed prompts yield better results
-
Provide Context: Use file mentions to give Terragon the full picture
-
Visual References: Attach images for UI/UX work
-
External Resources: Include URLs for issues, docs, or monitoring
-
Voice for Ideas: Use voice input for brainstorming or detailed requirements
-
Combine Methods: Mix different context types for complex tasks
Tips for Success
- Start with smaller, focused prompts to understand Terragon's capabilities
- Use file mentions (
@) liberally - Terragon works best with context - For UI work, always include screenshots or mockups
- For bugs, include error messages, logs, or issue links
- Break large tasks into smaller, manageable prompts
- Review the generated PR before merging
Remember
Terragon excels when you provide rich context. The more relevant information you include, the better Terragon can understand and complete your task.