react-components

Name: react-components
Author: github/replica

$npx mdskill add github/replica/react-components

Import CoreAI components, styling APIs, and tokens directly from `@coreai-ds/react-components`.

SKILL.md

.github/skills/react-componentsView on GitHub ↗

---
name: react-components
description: 'CoreAI Sandbox component usage: import boundaries, published CoreAI documentation, and local adapter inspection. USE WHEN: editing any `*.tsx` file, picking a component, or writing component imports.'
---

# CoreAI Sandbox Component Usage

## Import Boundary

Import CoreAI components, styling APIs, and tokens directly from
`@coreai-ds/react-components`.

```tsx
import { Button, Dropdown, Spinner } from '@coreai-ds/react-components';
```

Import CoreAI-Sandbox-owned components and adapters from `~/components/common`.

```tsx
import { Card, ExternalLink, Image, Link, TabLinkList } from '~/components/common';
```

The app barrel exports only repository-owned behavior. It does not re-export CoreAI. Never import
components from `@fluentui/react-components` directly. Direct imports from
`@fluentui/react-icons` remain supported.

Use the local `Link` for React Router navigation, `ExternalLink` for external URLs, `Card` for all
cards, and `Image` for theme-aware and deployment-safe image sources. ESLint restricts direct
`Link`, `Card`, and `Image` imports from `@coreai-ds/react-components`; only the local adapter
implementations may import those underlying CoreAI components.

## Skill Boundary

- This skill owns CoreAI Sandbox's repository boundary: decide whether the need is satisfied by
  CoreAI or by an existing app-owned adapter, composition, hook, theme utility, or asset.
- `coreai-ds-fluentui-react` owns external package documentation retrieval and version checks.
  Invoke it for every CoreAI component or prop decision instead of restating its catalog
  here.
- Local source under `app/components/common/**` is authoritative only for CoreAI-Sandbox-owned behavior;
  it is not a substitute for CoreAI documentation.

## Choose and Verify Components

1. Invoke the `coreai-ds-fluentui-react` skill and retrieve the relevant published documentation
   before selecting, changing, or reviewing a component or its props. Follow its discovery,
   version-check, and retrieval-failure workflow. Do not infer APIs from stock Fluent behavior.
2. Verify the selected API against the installed package when documented versions differ.
   Report missing guidance or unsupported APIs rather than silently substituting prior knowledge.
3. Check `app/components/common/index.ts` for an existing CoreAI-Sandbox-owned export only when the
   requested behavior is product-specific or integrates an app concern such as React Router.
4. When a local export exists, read its source under `app/components/common/**` before using it.
   Published package documentation does not define CoreAI-Sandbox-owned behavior.
5. Prefer an existing documented component or template over recreating the same
   interaction with custom markup and CSS.

Do not maintain a static component catalog in this skill. Published CoreAI documentation is the
source of truth for CoreAI components, and the app barrel and local source are the
source of truth for repository-owned exports.

## Semantics

Use links for navigation and buttons for actions. Do not make a `Button` navigate
or use a link to perform an action. Use `Link` for app routes and `ExternalLink` for URLs outside
the app.

## Related skills

- `css-styling` — required when writing styles for the component
- `icons` — for icon selection and bundling
- `coreai-ds-fluentui-react` — required for CoreAI component documentation and API decisions

More from github/replica

Skill	Description
accessibility-audit	Audits actual components and routes against applicable WCAG 2.2 A/AA criteria using consumer-owned design-system evidence and repository tools. Use when asked for an accessibility audit, a11y check, keyboard or focus review, contrast check, or screen-reader verification.
add-seed-data	Creates or updates believable deterministic raw fixture scenarios without breaking an existing prototype. Use when asked to add or change fixtures, seed data, sample data, scenarios, or cross-record relationships. Not for UI redesign, live-data infrastructure, or unrelated commands.
agent-browser	Use for explicit agent-browser CLI checks or a named browser capability neither the Copilot canvas nor configured Playwright MCP can supply. Ordinary rendered checks and browser selection belong to browser-canvas-validation.
browser-canvas-validation	Use the Copilot browser canvas first for rendered route checks, interaction tests, screenshots and visual, responsive or accessibility evidence. Use configured isolated Playwright MCP only when the canvas is unavailable for a required check.
component-design-system-review	Reviews existing UI components for design-system consistency, states, responsiveness and accessibility using consumer-owned context. Use when asked to review component quality, check design-system adherence or audit component consistency.
context-templates	Shared context template library for setup-skills. Read when discovering context documents or their ownership. This library supplies research inputs, not active product context or a separate authoring workflow.
coreai-ds-fluentui-react	Find and apply CoreAI design-system documentation. Use when choosing or reviewing @coreai-ds/react-components components, props, tokens, themes, templates, or UI patterns.
create-prototype	Builds new UI prototypes and makes targeted changes to existing prototypes using consumer-owned context. Use when asked to build a prototype, mock up a UI, or add, change, refine or recreate part of an existing prototype. Do not use for unrelated tasks, routine commands, Git lifecycle actions, acknowledgements or infrastructure work.
css-styling	CSS Modules conventions, design tokens, container queries, and CSS-vs-component boundaries. USE WHEN: editing any `.css` / `.module.css` file in this repo, or writing styles for a new component.
developer-handoff	Writes a lightweight Markdown concept handoff from existing decisions and evidence. Use when explicitly asked for a developer handoff, to transfer a prototype or concept to another team, or to prepare a brief for implementation. Not for ordinary prototype completion, building, reviewing or publishing.