Using Coral with AI Assistants

Coral includes an auto-generated AI skill file that helps coding assistants understand the design system and generate code that follows Coral’s conventions, component APIs, and best practices.

This skill file is automatically generated from the latest documentation and kept up-to-date with each release of Coral.

What is the AI Skill?

Coral provides an auto-generated comprehensive skill file that AI assistants can reference:

SKILL.md - Complete reference for all AI tools including:

All Coral component APIs with props and usage examples
Design tokens and theming guidelines
Golden rules for using the design system correctly
Complete list of available icons from @krakentech/icons
Best practices for React development with Coral

This ensures AI assistants generate code that uses the correct component APIs and follows Coral’s patterns.

Usage

In the root of your project, run the following command to symlink this skill into your local .agents directory:

@krakentech


npx @krakentech/coral-ai

Your AI environment of choice will automatically reference the skill file to generate code that follows Coral’s conventions.

Best Practices

Be Specific

Mention “Coral Design System” or specific component names in your prompts to ensure the AI uses the skill file.

Reference the Skill Explicitly

If the AI isn’t using Coral correctly, explicitly reference the skill file in your prompt. For example with Cursor you can use the @skill tag to reference the skill file. Start typing @coral and select the skill file from the list of options.

Verify Generated Code

Always review AI-generated code to ensure it follows your project’s patterns and requirements.

Feedback

Having issues with the AI skill or have suggestions for improvement? Report feedback to #coral-feedback .