メニュー
Use exactly one visible focus indicator per focusable element; when using the focus-ring mixin, do not also change border or add a second outline.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | single-focus-indicator |
| description | Use exactly one visible focus indicator per focusable element; when using the focus-ring mixin, do not also change border or add a second outline. |
| version | 1.0.0 |
When to use: When adding or changing focus styles on buttons, links, selects, inputs, or any focusable component in @boilerplate/ui or app code.
Use exactly one visible focus indicator per focusable element. Do not combine multiple indicators (e.g. outline and border-color change, or outline and box-shadow) on the same element when focused.
focus-ring mixin (@include focus-ring from packages/ui/src/styles/_mixins.scss), do not also change border-color or add a second outline/ring on :focus or :focus-visible. The mixin already provides an outline; adding a border-color change causes a "double focus" (inner border + outer outline).outline: none on :focus only to suppress the browser default; then use :focus-visible (e.g. via the mixin) for the one visible indicator so keyboard users get a clear ring.@include focus-ring, is there a separate &:focus { border-color: ... } (or similar)? If yes, remove the border-color (or other second indicator) so only the focus-ring outline shows.:focus-visible and the shared focus-ring mixin for keyboard-visible focus.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)