メニュー
Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthetic while meeting accessibility requirements.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Full accessibility audit covering focus management, semantic HTML, ARIA attributes, color contrast, touch targets, screen reader experience, and motion safety.
Auto-fix detectable accessibility issues. Adds focus styles, semantic HTML, ARIA attributes, and touch target sizing.
Verify visual alignment across sections. Check that headings, text, images, and components share consistent alignment points.
Add purposeful motion and transitions to the interface. Focuses on high-impact moments: page load reveals, hover states, and scroll-triggered entries. Not decorative jitter.
Audit and fix ARIA attributes. Ensures proper aria-label, aria-hidden, aria-live, and role usage throughout the interface.
Comprehensive design quality audit with severity ratings, specific line references, and actionable fix instructions. Deeper than /score — examines every declaration.
| name | focus |
| description | Generate a complete focus ring system. Creates consistent, visible :focus-visible styles that match the design aesthetic while meeting accessibility requirements. |
| user-invokable | true |
Generate focus styles for all interactive elements:
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: inherit;
}
Adapt the ring color to work against both light and dark backgrounds. Use outline (not box-shadow) for reliability. Always set outline-offset for breathing room.
For specific elements:
Never use outline: none without a visible replacement.