Focus state design

Skill Dragoon0x/everything-design-taste/skills/focus-state-design

Keyboard focus indicator design, focus management, and accessible focus patterns.From its SKILL.md

Install

npx -y skills add Dragoon0x/everything-design-taste --skill focus-state-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.1 KB, 214 tokens by cl100k_base, as published. Nobody here has run it

Focus State Design

Focus Ring Design

Requirements

Visible on all backgrounds (light and dark).
Minimum 3:1 contrast ratio against surrounding area.
Must not rely on color alone (use outline, not just color change).

Recommended Style

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default only when providing custom */
:focus:not(:focus-visible) {
  outline: none;
}

Focus Management

Modal opens: focus moves to first interactive element inside.
Modal closes: focus returns to the element that opened it.
Dynamic content: focus moves to new content (toast, expanded section).
Page navigation: focus moves to main content area.

Anti-Patterns

outline: none without replacement (accessibility violation).
Focus rings that are invisible on some backgrounds.
Focus order that doesn't match visual order.
No focus management in dynamic content (modals, drawers).

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.