القائمة
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 المهني
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 | 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.