LogoCraftReactNative

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

AiConversationScreen.tsx
HeaderTitle.tsx
info.json
instructions.md
...

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:

# The instructions are already in your project after copying a template
craftrn-templates/AiConversation/instructions.md

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:

  1. Faster development: AI understands your template's patterns immediately
  2. Consistent code: Recommendations follow established architectural patterns
  3. Fewer bugs: AI suggests code that fits the existing system
  4. Better performance: AI recommendations consider the template's optimization strategies
  5. 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.