AI Instructions

This section provides comprehensive guidelines for AI-assisted development within the Editor platform.

Overview

Our AI Instructions are designed to help AI assistants understand our codebase, coding standards, and development practices. These guidelines ensure that AI-generated code follows our best practices and integrates seamlessly with our existing codebase.

Key Guidelines

Development Workflow

• Immediate Implementation: AI should generate code that can be immediately used without significant modifications
• Real-time Feedback: Generate code, test, and refine in real-time based on feedback
• Iterative Approach: Embrace an iterative development workflow for complex features

Code Standards

• Enterprise Standards: Follow SOLID principles and enterprise-level coding standards
• Clean Code: Write clean, maintainable, and well-documented code
• Type Safety: Use strict typing with proper interfaces and avoid any types
• Testing: Include unit tests for all significant functionality
• Documentation: Add comprehensive documentation for all public APIs

Angular Specifics

• Standalone Components: Use Angular's standalone component API
• Segregate Components: Always divide the components into independent html template, and independent .scss (or .css depending on the project) files. Do not include the html or style inside the .ts file.
• Signals: Leverage signals for reactive state management
• Change Detection: Implement OnPush change detection strategy
• Dependency Injection: Use the inject() function for dependency injection
• File Organization: Keep .ts, .html, and .scss files separate

State Management

• Flash Persistence: Use Flash Persistence for managing global application state
• Signals for Local State: Use signals for component-level state
• Computed Values: Use computed signals for derived state
• Actions & Selectors: Follow proper naming conventions for actions and selectors

Rule Categories

Our AI instructions are organized into the following categories:

• Components: Guidelines for Angular components
• Services: Best practices for services and API integration
• Templates: Standards for HTML templates
• State Management: Rules for global and local state management
• Testing: Requirements for unit and integration tests
• Performance: Optimization guidelines
• UI/UX: Standards for user interface and experience
• AI Integration: AI Chat Integration Guide

Key Documentation

• How to Organize Documentation ⭐ NEW: Master guide for documentation organization and writing
• AI Integration Guide: Comprehensive setup, configuration, and troubleshooting for OpenAI and Anthropic APIs
• AI Chat Integration: Comprehensive guide for integrating AI features
• Module Documentation Consolidation ⭐: Comprehensive guide for consolidating and aligning module documentation across editor and gograb-modules monorepos
• Add New UX Widget: Step-by-step guide for adding new widgets to ux-test
• Add New Library: How to create new libraries in the monorepo
• Add New App: How to create new applications in the monorepo

Using These Guidelines

These guidelines should be followed when:

1. Generating new code for the Editor platform
2. Modifying existing code
3. Reviewing code or suggesting improvements
4. Adding AI-powered features to widgets
5. Creating new UX test demonstrations

New Standards (NON-NEGOTIABLE) ✅ Read ENTIRE interface definition FIRST ✅ Match field names EXACTLY - Zero tolerance for mismatches ✅ Implement ALL required fields - No shortcuts ✅ Check linter after EVERY method - Immediate fixes ✅ Review before committing - Quality over speed

By adhering to these guidelines, we ensure consistency across our codebase and maintain high-quality standards.