Use Coral Components

Build or update React, JSX, and TSX interfaces with Coral using the local mirrored docs in this skill. Start with references/catalog.md, then open the specific component or pattern pages under references/coral-docs/.

Workflow

1. Read references/catalog.md first to confirm installation, section names, common entrypoints, and deprecated replacements.
2. Open the matching page under references/coral-docs/ before editing code so imports, composition, and API usage come from Coral docs instead of memory.
3. Copy the doc's import style and compound component structure exactly when a component is built from parts.
4. Use Coral theme primitives when colors, spacing, typography, dark mode, or interaction states matter.
5. Check references/coral-docs/caveats.md and the relevant component page before passing refs or replacing wrappers around interactive components.
6. Avoid deprecated components. If a mirrored page is deprecated, use the replacement listed in references/catalog.md.

Import Rules

• Import components from @seaweb/coral/components/<Component>.
• Import icons from @seaweb/coral/icons/<IconName>.
• Import styled helpers from @seaweb/coral/hoc/styled when theme autocomplete or Coral theme typing matters.
• Import ThemeProvider, darkTheme, palette, and related theme helpers from @seaweb/coral/components/ThemeProvider when theming or token overrides are involved.

Composition Rules

• Respect compound component structures from the docs. Examples:
  • Select usually pairs with SelectButton or SelectSearch, plus SelectList and SelectOption.
  • Tabs uses TabList, Tab, TabPanels, and TabPanel.
  • Field wraps inputs and centralizes label, message, invalid, and required states.
• Preserve the documented child order and nesting for compound components. If the doc shows a part rendered inside another part, keep that structure.
• If a component needs DOM access, only pass refs through Coral components, DOM nodes, class components, React.forwardRef, React.lazy, or React.memo components. See references/coral-docs/caveats.md.
• When docs mention custom indexes or placement props for nested options or overlays, keep those explicit props instead of simplifying them away.

Styling And Accessibility

• Prefer Coral theme tokens such as theme.colors, theme.spacing, and theme.typography over hard-coded values when extending Coral UI.
• Use ThemeProvider instead of ad hoc dark mode branching when colors or overlay behavior need to adapt across light and dark backgrounds.
• Use Coral typography components and semantic as props when heading structure matters.
• Use Field, validation props, and built-in message patterns instead of inventing parallel form-label or error wrappers.
• Preserve keyboard and screen-reader behavior implied by the documented Coral structure.

Doc Navigation

• Start with references/catalog.md for:
  • package setup
  • section inventory
  • deprecated replacements
  • high-signal lookup guidance
• Use these mirrored docs as common entrypoints when the right component is unclear:
  • references/coral-docs/get-started.md
  • references/coral-docs/components.md
  • references/coral-docs/caveats.md
  • references/coral-docs/foundation/themeprovider.md
  • references/coral-docs/input/field.md
  • references/coral-docs/input/select.md
• Use the component-specific page under references/coral-docs/ for final prop names, examples, and composition details.

Maintenance

• Refresh the mirrored Coral docs with python scripts/sync_coral_docs.py.
• The default source is an auto-detected sibling Coral docs export folder containing output/coral-developer-markdown.
• After editing the skill, run the Codex validator from the coral-skill/ repo root: python "$CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py" ./use-coral-components.