メニュー
Ensure Tabs active state works with and without URL params by passing the canonical tab href as activeHref, not a URL with extra query params.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
When changing API routes, auth, or env-dependent behavior, add or update the corresponding integration tests and keep the test file layout consistent.
When adding or changing files under infra/k8s/ or sync targets for k8s, know what Argo CD syncs and remind the user to push to Git so the cluster can sync.
Keeps tools/generate-data seeders and docs in sync when main or management DB schema or ORM entities change. Use when adding or changing tables/entities in packages/orm, packages/management-orm, or infra database migrations.
When changing DB schema or permission dimensions, consider predefined roles and bucket_role / role-related code.
Use when adding or changing environment variables, infra/env/classification YAML, scripts/env-classification, K8s env render, or local env generation.
Common patterns for the Boilerplate HTTP API (Express)
| name | tab-active-state-url-match |
| description | Ensure Tabs active state works with and without URL params by passing the canonical tab href as activeHref, not a URL with extra query params. |
| version | 1.0.0 |
When to use: When adding or changing tab navigation that uses Tabs from @boilerplate/ui with exactMatch, or when the tab URL can have query params (e.g. ?tab=messages, ?sort=oldest).
This file is the authority for canonical tab href and activeHref matching behavior.
For the active tab to be highlighted reliably:
href should be the canonical URL for that tab (the base URL users land on when they click the tab, e.g. path only or path + minimal params like ?tab=buckets).activeHref to Tabs, it must equal the same href as the tab item for the current tab. Do not pass the full current URL if it includes extra query params (e.g. sort, page) that are not part of the tab item's href.Otherwise, with exactMatch, currentHref === item.href will be false (e.g. activeHref is /bucket/1?tab=messages&sort=oldest but the Messages tab's href is /bucket/1), and no tab will appear active.
searchParams.tab === 'buckets' ? 'buckets' : 'messages').activeHref to the canonical href for that tab—the same value as the corresponding item in items (e.g. when on messages tab use bucketViewRoute(id) or bucketDetailRoute(id), not a URL that includes &sort=oldest or &page=2).activeHref set to the canonical href for the current tab (same as the tab item's href), not the full URL with sort/page/other params?