메뉴
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?