ReactやNext.jsのフォームやモーダルを、キーボード操作と画面読み上げに対応させるスキル。ラベル、エラー表示、フォーカス移動を実装・見直しします。
- フォームのラベルとエラー表示の改善
- ドロップダウンのキーボード操作確認
- モーダル開閉時のフォーカス管理
300 件 ・ 関連度順
概要と使いどころ
ReactやNext.jsのフォームやモーダルを、キーボード操作と画面読み上げに対応させるスキル。ラベル、エラー表示、フォーカス移動を実装・見直しします。
Web・iOS・Androidの画面を、読み上げやキーボード操作に対応させ、ラベル、配色、操作対象の大きさなどをWCAG 2.2に沿って設計・点検するスキル。
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Enable keyboard navigation for all elements. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
日本語の概要は準備中です。原文の説明を表示しています。
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy iOS-only APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar", "UseSafeArea migration", "soft input keyboard", "IgnoreSafeArea replacement". DO NOT USE FOR: general layout or grid design (use Grid and StackLayout), app lifecycle handling (use maui-app-lifecycle), theming or styling (use maui-theming), or Shell navigation structure.
日本語の概要は準備中です。原文の説明を表示しています。
Render a static iOS QWERTY keyboard as inline HTML+CSS sized for the 750-wide 9:16 stage. Includes the 3-suggestion bar, alpha keys, shift/backspace, 123/emoji/space/return row, and the bottom globe+mic strip. No animation logic — slide up/down is the molecule's job (CSS transform on the .keyboard root).
日本語の概要は準備中です。原文の説明を表示しています。
Verify that every interactive control on a page can take keyboard focus and that its primary action fires from the keyboard rather than only the mouse, and say plainly that Tab order cannot be verified today. Use when a component was hand-tested with a mouse, a custom dropdown/modal/combobox was added, or an accessibility report flags an unreachable control.
日本語の概要は準備中です。原文の説明を表示しています。
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy iOS-only APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar", "UseSafeArea migration", "soft input keyboard", "IgnoreSafeArea replacement". DO NOT USE FOR: general layout or grid design (use Grid and StackLayout), app lifecycle handling (use maui-app-lifecycle), theming or styling (use maui-theming), or Shell navigation structure.
日本語の概要は準備中です。原文の説明を表示しています。
First-run setup — learn the bboxes of your three key input boxes (Spotlight search, chat input keyboard-down, chat input keyboard-up) plus the keyboard keys and Paste buttons. Run once when SYSTEM shows the first-run notice, before opening apps by search or sending messages. Screenshot each page, read the box coordinates off the returned elements, save them with the screen_layout.py CLI.
日本語の概要は準備中です。原文の説明を表示しています。
World-class accessibility design expertise combining the inclusive design principles of Microsoft's Inclusive Design team, the technical rigor of the W3C WCAG working group, and the lived experience perspective of disability advocates. Accessibility is not a feature - it's a fundamental quality attribute that makes products usable by everyone. Great accessibility design is invisible to those who don't need it and essential to those who do. It benefits everyone: captions help in noisy environments, keyboard navigation helps power users, high contrast helps in bright sunlight. When you design for the extremes, you improve the experience for all. Accessibility is not a checklist - it's a mindset that asks "who are we excluding?" at every design decision. Use when "accessibility, a11y, wcag, screen reader, keyboard navigation, color contrast, alt text, aria, focus management, skip link, assistive technology, inclusive design, ada compliance, section 508, accessible, voiceover, nvda, jaws, tab order, focus trap, accessibility, a11y, wcag, inclusive-design, screen-reader, keyboard-navigation, color-contrast, aria, focus-management, assistive-technology" mentioned.
日本語の概要は準備中です。原文の説明を表示しています。
Accessibility isn't a feature - it's a fundamental quality of good software. 1 in 4 adults has a disability. Many more have temporary impairments or situational limitations. Your users include people who can't see, can't hear, can't use a mouse, or can't process information the way you do. This skill covers WCAG guidelines, ARIA patterns, keyboard navigation, screen reader compatibility, and automated testing. Key insight: accessible code is better code. The constraints of accessibility lead to simpler, more semantic, more maintainable implementations. 2025 lesson: Accessibility lawsuits are at an all-time high. "We'll add it later" is both ethically wrong and legally risky. Start accessible, stay accessible. Use when "accessibility, a11y, wcag, aria, screen reader, keyboard navigation, focus trap, alt text, color contrast, skip link, accessible, accessibility, a11y, wcag, aria, screen-reader, keyboard, inclusive, semantic-html" mentioned.
日本語の概要は準備中です。原文の説明を表示しています。
Use this skill to configure a Lightning Service Console app in Salesforce — Console Navigation (split view), workspace tabs and subtabs, the utility bar with Omni-Channel, Macros and History, Quick Text, keyboard shortcuts, and navigation rules per object. Trigger keywords: Service Console, console app, workspace tabs, subtabs, utility bar macros, Omni-Channel utility, split view, Quick Text, console navigation rules, keyboard shortcuts service console, navType Console, workspaceConfig mappings, WorkspaceMapping fieldName, UtilityBar FlexiPage, tabLimitConfig, listPlacement, MacroInstruction, QuickText Channel multipicklist, isNavTabPersistenceDisabled. NOT for opening or refreshing console tabs from code — use lwc/lwc-console-workspace-api. NOT for Omni-Channel routing setup — use admin/omni-channel-routing-setup.
日本語の概要は準備中です。原文の説明を表示しています。
Implement WCAG 2.2 AA/AAA compliance with automated testing, keyboard navigation, screen reader support, and focus management. Activate on: accessibility audit, WCAG compliance, keyboard navigation, screen reader, aria attributes, axe-core, focus trap. NOT for: design-level accessibility review (use design-accessibility-auditor), color contrast only (use css-in-js-architect).
日本語の概要は準備中です。原文の説明を表示しています。
Load this skill for every project containing interactive UI elements — buttons, links, modals, dropdowns, sliders, tabs, carousels, or any custom widget. Under no circumstances create an interactive component that cannot be fully operated by keyboard alone. Absolutely always ensure visible focus indicators, logical tab order, and no keyboard traps. Apply these rules to every interactive element without exception.
日本語の概要は準備中です。原文の説明を表示しています。
Add a Keyboard Shortcuts help window (Ctrl+question) listing all app accelerators, plus the standard GNOME accelerator set. Use when wiring keyboard shortcuts or the Keyboard Shortcuts menu item.
日本語の概要は準備中です。原文の説明を表示しています。
Implement WCAG 2.2 AA/AAA compliance with automated testing, keyboard navigation, screen reader support, and focus management. Activate on: accessibility audit, WCAG compliance, keyboard navigation, screen reader, aria attributes, axe-core, focus trap. NOT for: design-level accessibility review (use design-accessibility-auditor), color contrast only (use css-in-js-architect).
日本語の概要は準備中です。原文の説明を表示しています。
React 18/19の画面部品を実装・レビューする際に、状態管理やデータ取得、フォーム、読み込み・エラー表示、アクセシビリティの設計を支えるスキル。
ReactやNext.jsの画面を実装・レビューするために、部品の組み立て、状態管理、データ取得、表示速度、フォームや操作性の改善パターンを示すスキル。
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Make modal dialogs keyboard accessible. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
日本語の概要は準備中です。原文の説明を表示しています。
Guide and apply cmux keyboard shortcut customization. Use when the user asks to customize, rebind, unbind, reset, audit, or create shortcut templates for cmux, including tmux-style, Vim-style, terminal-first, browser-heavy, iTerm/Terminal-like, or agent-triage layouts.
日本語の概要は準備中です。原文の説明を表示しています。
Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a single-file HTML presentation with arrow-key / space / PgDn / PgUp / Home / End / P / Esc keyboard navigation, presenter mode (split view with current slide + speaker notes + clock + next-slide preview), URL-hash deep linking, and `@media print` page-per-slide for PDF export. Triggers when the markdown-html-orchestrator classifies an input as SLIDES, or when invoked directly via /cs:md-slides. Reuses md-document's markdown parser for slide-body rendering and reads design-system tokens via config_loader.py. Refuses if input has no clear slide boundaries, produces a 1-slide deck, or `--strict-notes` is on with < 50% notes coverage. Use after orchestrator routing.
日本語の概要は準備中です。原文の説明を表示しています。
Create React components with localStorage persistence and keyboard navigation support
日本語の概要は準備中です。原文の説明を表示しています。
[omh] Screen-reader or keyboard accessibility gaps: prepare WCAG, keyboard, focus, screen-reader, target-size, and reflow evidence gates for UI surfaces. Use when the user says: accessibility-audit, accessibility audit, a11y audit, a11y architect, wcag audit, wcag 2.2, wcag 2.2 aa, accessibility pass.
日本語の概要は準備中です。原文の説明を表示しています。
Design and build game UI/UX — HUDs, menus, and overlays — that survive every screen: anchor- based responsive layout, resolution/aspect scaling and safe areas, keyboard/gamepad focus navigation, a screen/menu state stack, and event-driven (not polled) HUD updates. Engine- neutral patterns that pair with the detected engine's UI skill. Use when the user mentions HUD, health bar, main menu, pause menu, settings screen, UI layout, anchors, UI scaling, aspect ratio, safe area, controller/keyboard menu navigation, or wiring UI to game state.
日本語の概要は準備中です。原文の説明を表示しています。
Visually validate an interactive CLI or terminal UI in Codex's in-app browser using a real local PTY, fixed rendering, keyboard interaction, screenshots, and session evidence. Use for TUI layout changes, terminal menus, colors, prompts, resize behavior, keyboard flows, or proof-of-work where Codex would otherwise reach for Computer Use or a desktop terminal. Do not use for desktop-terminal-emulator-specific behavior or ordinary non-interactive command output.
日本語の概要は準備中です。原文の説明を表示しています。