Using Coral with Claude Code

Coral includes an auto-generated AI skill file that helps Claude Code 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 Claude Code 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 @octopus-energy/icons
Best practices for React development with Coral

This ensures Claude Code generates 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 .claude directory:

@octopus-energy


npx @octopus-energy/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 Claude Code uses the skill file.

Reference the Skill Explicitly

If Claude Code isn’t using Coral correctly, explicitly reference the skill file in your prompt.

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 .