メニュー
Use when building, configuring, styling, or modifying any SVAR React UI component from the @svar-ui/react-* packages - widgets, layouts, menus, toolbars, calendars, popups, themes, and locales
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/yamatatsu/project-template-2026 --skill svar-reactコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
このモノレポ（project-template-2026）の `apps/backend`（Hono BFF）でテストを書く／直す／レビューするときの唯一の実装ガイド。ルート単体テストを PGlite（インメモリ Postgres）上で request→db→response で回し、`hono/testing` の `testClient` で型付き RPC として叩く方式・共通ヘルパ（`support.ts` / `seed.ts`）・session/認可の seed・並列性・落とし穴を集約する。以下のいずれかのとき必ず読むこと —— (1) `apps/backend` に新しいルートのテストを追加する／既存テストを直す・レビューする、(2) PGlite・`vi.mock('@icasu/db/client')`・`migrateTestDb`・`withSession`・`testSession`・`seedTask`・`seedSessionUser`・`testClient`・`InferRequestType` の使い方を知りたい、(3) テストで DB を差し替える／マイグレーションを当てる／session や role を用意する／楽観ロック（body の `expectedVersion`）や zValidator の 400/404/409 を検証する、(4) 「テストが並列で衝突しないのはなぜか」「negative test で型が通らない」等のテスト特有の疑問がある。バックエンドのテストに関わるならまずこのスキルを読む。
CLAUDE.md / CLAUDE.local.md / `.claude/rules/` / auto memory —— Claude Code の記憶ファイルを 書く・削る・移す・レビューするときのガイド。何を書き何を書かないか、どのスコープに置くか、 CLAUDE.md ではなく hook / `permissions.deny` に移すべきか、200 行をどう守るかを判断できる。 以下のいずれかのとき必ず読むこと —— (1) CLAUDE.md / CLAUDE.local.md を新規作成・追記・整理・レビューする、`/init` の生成物を仕上げる、 (2) 「これを覚えておいて」「ルール化して」「規約に追加して」と頼まれた、 (3) ルート CLAUDE.md か、パッケージ直下の CLAUDE.md か、path スコープの `.claude/rules/` か、 skill かで置き場所に迷う、 (4) 「指示に従ってくれない」「必ず守らせたい」「CLAUDE.md が効かない／大きすぎる／compact 後に 消えた」を調べる、 (5) `@path` import・AGENTS.md 連携・`claudeMdExcludes`・auto memory の仕組みを扱う。 記憶ファイルに触るならまずこれを読む。
このモノレポ（project-template-2026）の認証の唯一の実装ガイド。OAuth 2.0 authorization code + PKCE を confidential client として実装した BFF（Backend-For-Frontend）パターン（draft-ietf-oauth-browser-based-apps §6 準拠）。ブラウザには不透明・署名付きの HttpOnly セッション Cookie だけを渡し、アクセス／リフレッシュ／id トークンはサーバ側（DynamoDB）にのみ保持する。以下のいずれかのとき必ず読むこと —— (1) 認証・ログイン・ログアウト・セッション・Cookie・OIDC/OAuth/PKCE・トークンリフレッシュ・`@icasu/backend-auth`・Cognito・oidc-server-mock について質問された、(2) ログイン/ログアウト/セッション/保護ルート/認可などの認証関連機能を実装・変更・レビューする、(3) `packages/backend-auth`・`apps/frontend` の `features/auth`・`entities/session`・`apps/iac` の Cognito/CloudFront/DynamoDB セッション周りを触る、(4) 認証の設計判断（なぜ Cookie にトークンを載せないか、なぜ /auth と /api を分けるか等）や落とし穴を知りたい。
SOC 職業分類に基づく
SKILL.md を表示中
| name | svar-react |
| description | Use when building, configuring, styling, or modifying any SVAR React UI component from the @svar-ui/react-* packages - widgets, layouts, menus, toolbars, calendars, popups, themes, and locales |
SVAR React ships as a family of @svar-ui/react-* packages. This file routes to the per-package entry; each child file is standalone and contains the imports, public types, styling hooks, and recipes for its components.
Open the matching file for the package you are using. If the component you need is not listed in the routing table below, default to core/index.md
| File | Package | Components |
|---|---|---|
core/index.md | @svar-ui/react-core | buttons, inputs, selectors, calendars, dropdowns, popups, modals, themes, locale (40+ widgets) |
menu/index.md | @svar-ui/react-menu | Menu, MenuBar, DropDownMenu, ContextMenu, ActionMenu |
toolbar/index.md | @svar-ui/react-toolbar | Toolbar |
layout/index.md | @svar-ui/react-layout | Layout, Cell, Panel |
grid/index.md | @svar-ui/react-grid | Grid, HeaderMenu, Tooltip, ContextMenu, Toolbar |
editor/index.md | @svar-ui/react-editor | Editor |
filter/index.md | @svar-ui/react-filter | FilterBuilder, FilterEditor, FilterBar, FilterQuery |
gantt/index.md | @svar-ui/react-gantt | Gantt, Toolbar, ContextMenu, Editor, Tooltip, HeaderMenu |
tasklist/index.md | @svar-ui/react-tasklist | Tasklist |
comments/index.md | @svar-ui/react-comments | Comments |
filemanager/index.md | @svar-ui/react-filemanager | Filemanager |
These apply to every @svar-ui/react-* package:
themes.md - theme wrappers, CSS variables, the css prop convention, class hookslocales.md - locale context, bundled language packs, extending words and formatsThe widget hierarchy need to be wrapped in a theme component to ensure proper styling Some widgets (grid,gantt,filemanager, etc) exports their own theme components that delegate to core theme and add their own variables