메뉴
Sense accessibility barriers with gentle awareness. Listen to the forest, scan for obstacles, test the paths, guide toward inclusion, and protect all wanderers. Use when auditing accessibility, testing for a11y, or ensuring inclusive design.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Move mountains with patient strength. Wake from hibernation, gather what must move, carry it carefully, hibernate to verify, and wake again to confirm. Use when migrating anything — data, components, icons, documents, formats, or systems.
Gather scattered ideas into organized GitHub issues. The bee collects pollen from every flower, checks if the hive already has it, and carefully deposits new work in the comb for later. Never edits code—only organizes the work ahead. Use when creating issues from TODOs or planning work.
Better Auth framework reference — configuration, security, rate limiting, sessions, plugins, and production hardening. Use when configuring Better Auth, auditing auth security, adding plugins, or troubleshooting Heartwood.
Build multi-file features with unstoppable momentum. Trumpet the vision, gather materials, construct with strength, test thoroughly, and celebrate completion. Use when implementing features that span multiple files or systems.
Make your invisible work visible. The firefly drifts through your git history, gathers what you shipped into stories, glows them into human words, and helps you share them with the world. Use when you need patch notes, posts, or just want to see what you built.
The drum sounds. Hummingbird, Squirrel, Firefly, and Wren gather for a complete growth cycle — from finding opportunities to shipping findable content. Use when you want to plan and execute your content-to-discovery pipeline in one focused session.
| name | deer-sense |
| description | Sense accessibility barriers with gentle awareness. Listen to the forest, scan for obstacles, test the paths, guide toward inclusion, and protect all wanderers. Use when auditing accessibility, testing for a11y, or ensuring inclusive design. |
The deer moves through the forest with heightened awareness. It hears what others miss—a twig snapping underfoot, a bird's warning call. It notices what blocks the path. The deer guides the herd around danger, ensuring everyone can travel safely. In the digital forest, the deer senses barriers that stop some wanderers from finding their way.
/deer-sense or mentions deer/accessibilityPair with: chameleon-adapt for accessible UI implementation
LISTEN --> SCAN --> TEST --> GUIDE --> PROTECT
| | | | |
Hear Look for Validate Fix Prevent
Needs Barriers Paths Issues Regression
The deer's ears twitch, hearing what others miss before the danger arrives...
Understand who we're building for and what barriers they face. Map disability types to assistive technologies. Establish WCAG level targets for this project.
Reference: Load references/automated-scanning.md for the full disability/assistive technology table and WCAG level guide, and references/grove-a11y-patterns.md for Grove-specific barrier patterns
The deer's eyes scan the forest floor, spotting what blocks the path before setting a hoof forward...
Run automated scanning to surface mechanical violations quickly. Automated tools catch approximately 30% of real issues — use them to clear obvious problems before manual testing begins.
npx axe https://localhost:5173 --tags wcag2aadiv with click)Component isolation audit with Showroom:
Before scanning full pages, audit individual components in isolation using Showroom. Showroom checks focus styles, heading hierarchy, and interactive element compliance at the component level — catching a11y issues that get masked by page context.
# Audit each component the deer is reviewing
uv run --project tools/glimpse glimpse showroom \
libs/engine/src/lib/ui/components/[path-to-component].svelte
# The audit checks: focus styles on interactive elements, heading hierarchy,
# image alt text, color contrast via computed styles, spacing grid compliance
This is a required gate for component-level a11y work. A component that lacks focus indicators or has broken heading hierarchy must be caught here, not deferred to page-level scanning.
Visual scan with Glimpse:
Capture the page to see what the rendered result actually looks like. Console logs often reveal hidden a11y issues:
# Prerequisite: seed the database if not already done
uv run --project tools/glimpse glimpse seed --yes
# Capture with console logs — errors often reveal missing ARIA, broken refs
# Local routing uses ?subdomain= for tenant isolation; --auto starts the dev server
uv run --project tools/glimpse glimpse capture \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--season autumn --theme dark --logs --auto
# Check dark mode contrast — capture both themes side by side
uv run --project tools/glimpse glimpse matrix \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--themes light,dark --logs --auto
# Browse interactively — does tab order make visual sense?
uv run --project tools/glimpse glimpse browse \
"http://localhost:5173/[page]?subdomain=midnight-bloom" \
--do "click first interactive element, press Tab, press Tab, press Tab" \
--screenshot-each --auto
Review the screenshots: Are focus indicators visible? Do glass surfaces maintain contrast? Are touch targets visually large enough?
Reference: Load references/automated-scanning.md for axe-core commands, Lighthouse CI setup, ESLint plugin config, CI integration YAML, and the full issues checklist
The deer tests each path personally, because knowing the map is not the same as walking the trail...
Manual testing catches what automation misses. Test keyboard navigation, screen reader output, reduced motion, and zoom. Work through the test scenarios relevant to this interface.
prefers-reduced-motionReference: Load references/keyboard-testing.md for the keyboard checklist, focus trap patterns, modal testing, touch target requirements, and conditional field test scenarios. Load references/screen-reader-testing.md for screen reader tools, ARIA patterns, semantic HTML fixes, and the ARIA checklist.
The deer guides the herd around the fallen tree, showing the clear path with a gentle turn of its head...
Fix accessibility issues with proper implementations. Prefer semantic HTML over ARIA when possible. Every fix should leave the interface clearer for everyone.
article, button, nav, main)openModal() focuses first element, closeModal() returns focus to triggerfor/id pairs, aria-describedby for errors, role="alert" on error messagesReference: Load references/screen-reader-testing.md for ARIA label patterns, semantic HTML fixes, and form accessibility code. Load references/grove-a11y-patterns.md for touch target patterns, glass card focus styles, GroveTerm requirements, and reduced motion store usage.
The deer stands watch, ensuring the path stays clear long after this audit is done...
Prevent future accessibility regressions. Add automated checks to CI and maintain documentation so the forest stays walkable for every wanderer.
Reference: Load references/automated-scanning.md for the CI YAML, ESLint plugin setup, axe-core in vitest, and the documentation template. Load references/screen-reader-testing.md for the final audit report template.
| Phase | Reference | Load When |
|---|---|---|
| LISTEN | references/automated-scanning.md | Always (disability types, WCAG levels) |
| LISTEN (Grove) | references/grove-a11y-patterns.md | Any Grove component audit |
| SCAN | references/automated-scanning.md | Always (axe-core, Lighthouse, checklist) |
| TEST (keyboard) | references/keyboard-testing.md | Manual keyboard and zoom testing |
| TEST (screen reader) | references/screen-reader-testing.md | Screen reader testing scenarios |
| GUIDE | references/screen-reader-testing.md + references/grove-a11y-patterns.md | Fixing issues |
| PROTECT | references/automated-scanning.md + references/screen-reader-testing.md | CI setup, final report |
Notice what others miss. Accessibility barriers hide in details — the focus ring that's technically present but invisible over a glass surface, the touch target that's 42px instead of 44.
Design for everyone. The forest is for all wanderers. Accessibility benefits everyone: keyboard shortcuts help power users, captions help people in noisy environments, clear error messages help everyone.
Accessibility is ongoing, not one-time. Every new component is an opportunity to get it right from the start, and every PR without a11y checks is a chance to let a barrier back in.
Use sensory metaphors:
The deer does NOT:
User: "Audit the new dashboard for accessibility"
Deer flow:
LISTEN — "Dashboard has complex data, charts, tables. Users: screen reader, keyboard, motor. WCAG AA target. Grove glass cards with custom focus needed."
SCAN — "axe-core: 5 violations. Missing alt on charts, low contrast on metrics, no table headers. Svelte warns: 2 div with onclick."
TEST — "Keyboard: Can't reach filter dropdowns (trap in date picker). Screen reader: Tables not navigable (no scope). Zoom: Sidebar overlaps main content at 200%."
GUIDE — "Add aria-labels to charts, increase metric contrast to 4.5:1 using Grove tokens, add proper table markup with <th scope>, make sidebar responsive, replace date picker with keyboard-accessible version."
PROTECT — "axe-core added to CI, eslint-plugin-svelte-a11y enabled, audit report written, accessibility section added to component docs."
| Situation | Action |
|---|---|
| New component | Semantic HTML first, test keyboard/screen reader before shipping |
| Color choice | Check contrast ratio (4.5:1 minimum — use Grove palette tokens) |
| Interactive element | Keyboard accessible, visible focus-visible style required |
| Image | Descriptive alt text (or alt="" if purely decorative) |
| Form | Associate labels, error messages with aria-describedby, required indicators |
| Animation | Conditional on $reducedMotion store — no exceptions |
| GroveTerm/GroveText | Load references/grove-a11y-patterns.md for required ARIA attributes |
| Touch target | 44px minimum — use padding if visual size must stay smaller |
Before Sensing:
chameleon-adapt — If building new UI, design with accessibility in mind from the startAfter Sensing:
chameleon-adapt — For accessible UI implementation of fixesbeaver-build — Add accessibility regression tests after fixing issuesowl-archive — Document accessibility standards for the projectThe forest welcomes all who seek it. Remove the barriers.