agarichan/orbit-ui
skills/orbit-ui/SKILL.md
Add Orbit UI components to a React project via shadcn-compatible registry. Use when the user asks to add UI components, build interfaces, or set up a design system using Orbit. Also use when the user asks about Orbit component APIs, props, or usage patterns. Triggers include: "orbit", "add button/input/tabs", "use the registry", "npx shadcn add", building UI with the Orbit component catalog, or asking how to use Orbit components.
development
Updated May 6, 2026
$ install --global
skillsauthnpx skillsauth add agarichan/skills orbit-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 6, 2026, 2:04 AM190.4s2 files scanned
SKILL.md
- name:
- orbit-ui
- description:
- >
- APIs, props, or usage patterns. Triggers include:
- orbit", "add button/input/tabs",
- allowed-tools:
- Bash(npx:*) Bash(pnpm:*) Bash(npm:*) Read
Orbit UI
Orbit は https://orbit-ui.pages.dev でホストされている shadcn 互換コンポーネントレジストリ。
前提条件
プロジェクトに shadcn が初期化済みであること（npx shadcn@latest init）。
shadcn には Tailwind CSS と tsconfig.json の @/* import alias が必要 — 未設定なら先にセットアップする。
registry:hook アイテム（use-scroll-lock 等）を使うコンポーネントがあるため、
components.json に aliases.hooks が設定されている必要がある:
{
"aliases": {
"components": "@/components",
"ui": "@/components/ui",
"hooks": "@/hooks" // ← 必須
}
}
hook を依存に持つコンポーネント（modal, command-palette, code-viewer, data-table, file-browser）を
npx shadcn add すると hook も自動インストールされる。
コンポーネントのインストール
npx shadcn@latest add "https://orbit-ui.pages.dev/r/<component>.json"
依存関係（tokens・use-scroll-lock 等）はフルURL の registryDependencies により自動解決される。
複数コンポーネントを 1 コマンドでまとめてインストール可能。
トークンのセットアップ
コンポーネントインストール後、アプリのルートでトークン CSS をインポートする:
import "@/components/ui/tokens.css"
<html> に data-theme="dark" または data-theme="light" を追加してテーマを切り替える。
tokens.css は shadcn の --background/--foreground を Orbit の値に自動ブリッジするため、body の手動上書きは不要。
ワークフロー
- shadcn が初期化済みか確認（
components.jsonの存在チェック） components.jsonにaliases.hooksがあるか確認 — なければ追加- レジストリ URL でコンポーネントをインストール（tokens・hook は自動解決）
- アプリルートで
tokens.cssをインポートし、<html>にdata-themeを設定 - 検証:
npx vite build（またはフレームワーク相当）でエラーがないことを確認
利用可能なコンポーネント
全コンポーネントの一覧・説明・依存関係は references/components.md を参照。
最新の一覧は https://orbit-ui.pages.dev/r/registry.json から取得可能。
主要パターン
- コンポーネントは
tokens.cssの CSS カスタムプロパティを使用（Tailwind は shadcn CLI にのみ必要で、コンポーネントのスタイリングには不要） - コンポーネントはプロジェクトにコピーされる（node_modules ではない）— 自由に編集可能
- コンポーネント間 import はレジストリ JSON 内で
@/registry/orbit-ui/<pkg>/<sub>形式で宣言されており、shadcn CLI がインストール時に利用者の aliases に応じてパスを自動解決する Iconは name prop でインライン SVG を切り替える。アイコン一覧はカタログを参照modalは flat 構造（modal.tsx+modal.css）。backdrop + container だけ提供し中身は自由overlayは flat prefix 構造（overlay.tsx,overlay-dialog.tsx,overlay-toast.tsx,overlay.css）。Dialog と Toast を提供code-viewerは flat prefix 構造（code-viewer.tsx,code-viewer-shiki.ts,code-viewer-diff-utils.ts,code-viewer.css）app-shellはregistry:block— Sidebar + Topbar + MainContent + リサイズ可能パネルシステムの完全レイアウト。パネルはスワイプ/ドラッグでスナップ
カタログ
ライブプレビュー付きの全コンポーネント一覧: https://orbit-ui.pages.dev
Related Skills
agarichan/skill-authoring
testing
VerifiedTrustedCommunity
Use when creating, editing, reviewing, naming, or restructuring an Agent Skill (SKILL.md / スキル) — even if the user doesn't say "Agent Skills" but is working in a skill directory, designing skill metadata, or asking to fix/improve a skill that didn't trigger or behaved unexpectedly. Provides the official specification, progressive disclosure model, and description-optimization methodology.
SKILL.mdUpdated Apr 25, 2026
agarichan/mise-config
data-ai
VerifiedTrustedCommunity
Add or edit mise tasks and environment variables in `mise.toml`. Use when the user asks to: - configure environment variables in mise - add or edit a mise task - make something runnable with `mise run` - pass arguments to a mise task - "miseに環境変数を設定して" - "miseにtaskを書いて" - "mise runで○○できるようにして" - "mise taskに引数を渡せるようにして" - "miseについて教えて"
SKILL.mdUpdated Apr 25, 2026
agarichan/codex-task-delegate
development
VerifiedTrustedCommunity
ファイルに書かれたタスク、または直接渡されたテキストタスクを Codex に委譲する。 次の依頼で使う: - "codexでXXX.mdのタスクを実施して" - "codexでXXX.txtの手順を実施して" - "このmdをcodexに投げて" - "この指示をcodexに投げて" - "thread_id にフィードバックして" - "Codexの結果を確認して"
SKILL.mdUpdated Apr 25, 2026
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026