本文へ移動
cccskills
無料GitHub で公開

a11y

Audit and improve the accessibility of the timepicker-ui LIBRARY (app/src) - ARIA, keyboard operability, focus trap/management, screen-reader announcements, labels - against WCAG 2.2 AA and the WAI-ARIA Authoring Practices. Use when the user wants an a11y audit/fix of the picker itself (clock, wheel, plugins, modal, inputs). Drives the accessibility subagent in an audit → approve → apply flow. Does NOT cover docs-app (use /docs-a11y for that).

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Library Accessibility (a11y)

Make the timepicker-ui picker fully usable by keyboard and assistive technology. This skill is a thin orchestrator: the real work is done by the accessibility subagent. The skill exists to hold the approval gate the subagent can't run itself.

Standard: WCAG 2.2 AA + the WAI-ARIA Authoring Practices (dialog / listbox / combobox / spinbutton patterns). Scope is app/src only - the docs site is /docs-a11y.

Arguments (optional)

  • A focus area narrows the run, e.g. /a11y clock, /a11y wheel, /a11y range, /a11y timezone, /a11y modal, /a11y keyboard. No argument = full audit.
  • --apply-all skips the per-area approval prompt and applies the whole audited plan (still reports
    • verifies). Use only for an explicitly unattended run.

Workflow

Phase 1 — Audit (read-only)

Dispatch the accessibility subagent (Task tool, subagent_type: accessibility) in audit mode, with the focus area if given. Ask for a prioritized, file-level plan grouped into:

  1. Keyboard operability (open/close, selection, AM/PM, OK/Cancel/Clear, tabs, dropdown, wheel)
  2. ARIA roles/names/states (dialog, listbox, spinbutton; aria-pressed/selected/disabled/valuenow)
  3. Screen-reader feedback (the .timepicker-announcer live region; validation/error announcements)
  4. Forms, labels & relationships (all text via the labels group)
  5. Non-text & motion (no color-only state; prefers-reduced-motion) Each finding cites its WCAG/APG reference and the exact file + attribute/handler. No edits.

Phase 2 — Present & approve (gate)

Relay the plan concisely (grouped, with references). Use AskUserQuestion to approve all, pick which groups/items to apply, or skip. Capture the approved set. Do not skip this gate unless --apply-all was passed.

Phase 3 — Apply

Dispatch accessibility again in apply mode with the exact approved list. It implements fixes with native ARIA + the existing helpers (announceToScreenReader, updateAriaPressed), adds any new strings to the labels group, and stays within the architecture (engine = no DOM; manager contract; public API unchanged; SSR-safe; CRLF; zero new deps).

Phase 4 — Verify & report

  • Offer to run focused checks: relevant Jest specs (npx jest --testPathPattern=...) and/or npm run eslint in app/. Report real output; defer the full suite to the user's batched run.
  • Summarize what changed, grouped by the five areas, with the file list.
  • Give the manual checklist: keyboard-only walkthrough (Tab/Shift+Tab/Arrows/Esc/Enter/Space), an NVDA/VoiceOver pass on open→select→confirm, and focus returning to the input on close.
  • Surface any CSS-contrast item for styling-themes and any structural/logic item for core-architect / clock-engine-dev / plugin-dev.

Guardrails

  • app/src only; never edit docs-app/ or dist/.
  • Don't change the public API or getValue() shape; visible/AT text goes through labels.
  • Keep engine pure (no DOM), manager (core, emitter)+destroy() contract, SSR-safety, CRLF, and the zero-dependency promise intact.
  • This skill audits/fixes; git and npm publish stay with the user.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

docs-a11y

無料

Audit and improve the accessibility of the timepicker-ui documentation site (docs-app/) - landmarks, heading order, skip links, keyboard nav, focus management in the command menu / sidebar / dialogs, color contrast, alt text, ARIA on custom components, Radix usage, reduced motion - against WCAG 2.2 AA. Use when the user wants an a11y audit/fix of the docs site. Drives the docs-accessibility subagent in an audit → approve → apply flow. Does NOT cover the library (use /a11y for that).

日本語の概要は準備中です。原文の説明を表示しています。

pglejzer/timepicker-ui1002026年7月8日 更新

docs-seo

無料

Audit and improve the discoverability of the timepicker-ui documentation site (docs-app/) across the full modern discoverability stack — SEO (ranking), AEO (answer engines / featured snippets), GEO (citations inside ChatGPT/Gemini/Perplexity/Claude), and AIO (Google AI Overviews). Use when the user wants to optimize docs SEO, improve Google ranking/positioning, win featured snippets or AI-answer boxes, get the docs cited by AI engines, add or fix sitemap/robots/manifest, fill in page metadata, add Open Graph/Twitter cards, answer-first copy, or JSON-LD (FAQPage/SoftwareApplication/TechArticle/BreadcrumbList). Drives the seo-optimizer subagent with an audit → approve → apply flow.

日本語の概要は準備中です。原文の説明を表示しています。

pglejzer/timepicker-ui1002026年7月8日 更新

release

無料

Cut a new timepicker-ui release. Use when the user wants to bump the version, prepare a release, write/update the changelog, or sync version + changelog across README, CHANGELOG.md and the docs-app (changelog/what's-new/version strings). Drives the build-release subagent in an audit → approve → apply flow, then runs a sanity build. Does NOT git-commit/tag or npm-publish — proposes those for the user to run.

日本語の概要は準備中です。原文の説明を表示しています。

pglejzer/timepicker-ui1002026年7月8日 更新

Full repository maintenance pipeline that orchestrates all project agents in sequence - code review, accessibility, bundle size, security, API stability, test coverage, ecosystem, and release preparation. Acts as a quality gate before publishing or merging major changes. Use when: maintenance, health check, pre-release audit, quality gate, full pipeline, repo health, pre-merge check, release readiness, audit all.

日本語の概要は準備中です。原文の説明を表示しています。

pglejzer/timepicker-ui1002026年7月8日 更新

pglejzer のスキルをすべて見る

このスキルの問題を報告する