@builder.io/dev-tools
Version:
Builder.io Visual CMS Devtools
2 lines (1 loc) • 5.74 kB
TypeScript
export declare const REPO_INDEXING_AGENT_PROMPT = "You are tasked with generating comprehensive documentation for a design system based on the provided component groups.\n\n---\n\n# Design System Component Reference\n\nThis document provides a comprehensive overview of the design system's component architecture and available components for code generation and development reference.\n\n## System Architecture\n\nThe design system follows a modular component-based architecture where each component group provides specific functionality. Components are organized into logical groups that can work independently or in combination with other components.\n\n### Component Organization Principles\n\n- **Single Responsibility**: Each component group serves a specific purpose\n- **Composability**: Components can be combined to create complex interfaces\n- **Consistency**: All components follow the same design patterns and API conventions\n- **Accessibility**: Components are built with accessibility standards in mind\n\n## Documentation Structure\n\nFor detailed documentation on any component group, refer to the corresponding MDX file in the `design-system-docs` folder. The documentation files follow the naming convention:\n\n```\ndesign-system-docs/[componentgroupname].mdx\n```\n\nFor example:\n- `design-system-docs/button.mdx` - Detailed documentation for Button component\n- `design-system-docs/table.mdx` - Detailed documentation for Table component\n- `design-system-docs/annotationcontext.mdx` - Detailed documentation for the AnnotationContext group\n- `design-system-docs/applayout.mdx` - Detailed documentation for AppLayout component\n\nThese MDX files contain comprehensive information including:\n- Component API documentation\n- Usage examples\n- Props and configuration options\n- Best practices and implementation guidelines\n- Accessibility requirements\n- Integration patterns with other components\n\n## Component Categories\n\nCategorize and organize the components into logical groups such as:\n\n### Layout & Structure\nComponents that provide foundational layout and structural elements for applications.\n\n### Navigation\nComponents for user navigation and wayfinding within applications.\n\n### Form Controls\nInteractive components for user input and data collection.\n\n### Data Display\nComponents for presenting and organizing data and content.\n\n### Charts & Visualization\nComponents for data visualization and graphical representation.\n\n### Interactive Elements\nComponents for user interaction and actions.\n\n### Feedback & Communication\nComponents for providing feedback and communicating with users.\n\n### Form Organization\nComponents for structuring and organizing forms.\n\n### Content Organization\nComponents for organizing and structuring content.\n\n### Advanced Controls\nSpecialized components for complex interactions and data management.\n\n### Selection & Control\nComponents for user selections and interface controls.\n\n### Specialized Components\nComponents for specific use cases and advanced functionality.\n\n### Tutorial & Annotation System\nA specialized component group for creating interactive tutorials and annotations.\n\n### System Components\nComponents for system-level functionality and configuration.\n\n**Instructions for categorization:**\n1. Analyze each component in the component groups data provided below\n2. Group components by their primary functionality\n3. List each component with its description under the appropriate category\n4. Use the format: `**ComponentName** - [description from the component group data]`\n5. Identify any component dependencies (like the AnnotationContext group)\n6. Create new categories if needed based on the actual component data\n\n## Usage Guidelines\n\n### Component Dependencies\n- Most components are self-contained and can be used independently\n- Identify any component groups that require multiple components to work together\n- Some components work better in combination (e.g., Form + FormField, Table + Pagination)\n\n### Integration Patterns\n- Layout components typically serve as containers for other components\n- Form controls should be wrapped in FormField components for proper labeling\n- Navigation components can be used independently or as part of larger layout structures\n- Data display components can be enhanced with interactive elements like buttons and popovers\n\n### Accessibility Considerations\n- All components are built with accessibility in mind\n- Use semantic HTML structures provided by the components\n- Leverage built-in ARIA attributes and keyboard navigation\n- The LiveRegion component provides additional accessibility announcements when needed\n\n### Responsive Design\n- Layout components provide responsive behavior out of the box\n- Grid and ColumnLayout components adapt to different screen sizes\n- Mobile-friendly navigation patterns are built into navigation components\n\n## Usage Reference\n\nThis reference should be used to understand the available components and their intended purposes when generating code or building applications with this design system. For specific implementation details, always consult the corresponding MDX documentation file in the `design-system-docs` folder.\n\n---\n\n**Template Usage Instructions:**\n1. Replace {{COMPONENT_GROUPS}} with the actual JSON array of component groups\n2. Process each component group to extract the name and description\n3. Categorize components based on their functionality and description\n4. Generate the appropriate category sections with component listings\n5. Ensure all component names are properly formatted and descriptions are included\n\nMake sure to save the output in the file AGENT.md";