AI assistant guide
Learn how to leverage the built-in AI customization guides included with each template for enhanced development experience with AI assistants.
AI-assisted template customization
Every CraftReactNative template includes a comprehensive AI customization guide designed to help AI assistants (like GitHub Copilot, Claude, ChatGPT, or other LLMs) understand the template's architecture and provide more accurate assistance when customizing or extending the code.
These instruction files are specifically crafted to provide AI assistants with deep context about each template's structure, patterns, and best practices.
What's included in each template
Each template directory contains an instructions.md
file that provides:
- Template Purpose & Architecture: Clear overview of the template's design goals
- Component Structure: Detailed breakdown of all components and their relationships
- Design System Usage: How the template leverages craftrn-ui components and Unistyles
- Key Patterns: Specific patterns for animations, state management, and data flow
- Customization Guidelines: AI-friendly guidance for common modifications
- API Integration Examples: Code patterns for connecting to real backends
- Performance Considerations: Optimization techniques and best practices
File structure
How to use with AI assistants
1. Share context with your AI assistant
When working on a template customization, reference the instructions.md
file that's included in your template folder:
Share this file's content with your AI assistant for better context about the template's architecture and patterns.
2. Reference template architecture
The instruction files include detailed component architecture diagrams that help AI assistants understand:
- Component hierarchy and relationships
- Data flow patterns
- Animation systems
- Design patterns and conventions
Example AI prompts
Here are some effective ways to leverage the instruction files with AI assistants:
For customization
"I want to add a dark mode toggle to the EditorialFeed template. Here's the instructions.md file: [paste content]. How should I implement this while following the existing patterns?"
For feature addition
"Based on this AI Conversation template's instructions.md: [paste content], help me add support for image attachments in messages while maintaining the existing animation patterns."
For performance optimization
"Looking at this Messaging Inbox instructions.md: [paste content], help me optimize the list performance for 10,000+ conversations."
Pro tip: You can reference both the instructions.md
and info.json
files
when working with AI assistants. The info.json
provides dependency
information while instructions.md
provides architectural context.
Benefits of AI-assisted development
Using these instruction files with AI assistants provides:
- Faster development: AI understands your template's patterns immediately
- Consistent code: Recommendations follow established architectural patterns
- Fewer bugs: AI suggests code that fits the existing system
- Better performance: AI recommendations consider the template's optimization strategies
- Design system compliance: Ensures new code follows craftrn-ui patterns
Contributing to instructions
If you find the instruction files could be improved or are missing important context, consider contributing back to help other developers and improve AI assistance quality.