carbon-react

Name: carbon-react
Author: sage

github.com/sage開発316222 回インストール今日更新

リポジトリ

carbon-react について

carbon-reactは、ReactプロジェクトでCarbonコンポーネントを選び、利用するためのリファレンススキルです。コンポーネントAPIや関連例、設定資料、移行情報を参照し、インポート、プロパティ、非推奨APIを確認できます。

主な機能

01コンポーネント選択の指針
02ソース由来のAPI詳細
03厳選されたコンポーネント例
04設定・ルーティング・スタイル資料
05非推奨APIと移行のガイダンス

活用シーン

01適切なCarbonコンポーネントの選定
02コンポーネントのインポートとプロパティ確認
03コンポーネントとルーティングの統合
04非推奨APIへの対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/sage/carbon --skill carbon-react

インストール後、Claude Code で/carbon-reactを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

components/

accordion-group.md

accordion.md

action-popover-divider.md

action-popover-item.md

action-popover-menu-button.md

action-popover-menu.md

action-popover.md

adaptive-sidebar.md

advanced-color-picker.md

alert.md

anchor-navigation-item.md

anchor-navigation.md

anchor-section-divider.md

badge.md

batch-selection.md

box.md

breadcrumbs.md

button-bar.md

button-minor.md

button-next.md

button-toggle-group.md

button-toggle.md

button.md

carbon-provider.md

card-column.md

card-footer.md

card-row.md

card.md

checkbox-group.md

checkbox.md

詳細

Carbon コンポーネントカタログ

index.mdでコンポーネントを選び、そのファイルを開いて、関連するリンク先の例だけを確認してください。

コンポーネントファイルには、作成者による選択ガイダンスと、ソースから抽出された API の詳細がまとめられています。厳選されたコンポーネントには選択済みの例へのリンクがあり、プレイグラウンドは省略されています。それ以外のコンポーネントには、生成された Storybook の例が残されています。

必要な場合にのみ、以下の参照資料を読み込んでください。

references/docs/usage.md：パッケージのセットアップと基本的な使い方。
references/docs/installation.md：インストールと設定。
references/docs/recommended-practices.md：プロジェクト全体の規約。
references/docs/usage-with-routing.md：ルーティングとの連携。
references/docs/extending-styles-using-styled-components.md：スタイルの拡張。
references/docs/colors.md：色とトークン。
references/docs/i18n.md：翻訳。
references/docs/deprecation-migration.md：非推奨機能の移行。

完了する前に、インポートとプロパティがコンポーネントファイルの内容と一致していること、また非推奨の API を使用していないか、移行ガイダンスに従って適切に扱っていることを確認してください。

Markdown 対応

ログインしてコメント

基本情報

作者: sage
リポジトリ: sage/carbon
カテゴリ: 開発
インストール数: 222
GitHub スター: 316

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

848.6k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。