본문으로 건너뛰기
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

  • Run the relevant Jest specs (npx jest --testPathPatterns=...), npm run eslint and, once at the end, the full npm test in app/, then /verify per HARD RULES §5. Report real output.
  • 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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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 (tabs, native dialogs), 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년 10월 17일 업데이트

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년 10월 17일 업데이트

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년 10월 17일 업데이트

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년 10월 17일 업데이트

verify

무료

Browser-check what a change could have broken in timepicker-ui (library demo and docs-app, before/after). Use at the end of a task that changed library behavior or styles (app/src) or docs-app pages, or when the user asks to check that nothing broke. Not for demo examples in app/docs, copy/typo/comment edits or one-line fixes (HARD RULES §5 in CLAUDE.md). Main agent only, never delegated to a subagent.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

pglejzer/timepicker-ui1002026년 10월 17일 업데이트

pglejzer의 스킬 모두 보기

이 스킬의 문제 신고