# Validation — v1.2

## Account-menu skill download · 29 October 2026

Download Skill appears below Guidelines in the catalogue account dropdown. The expanded Chromium menu check passed for actual ZIP downloads and byte equality with the served file, keyboard entry and arrow navigation, focus return and closed-menu state at 320/390/1440px in both themes. Existing navigation, responsive-sidebar and scoped accessibility checks also passed. The dropdown screenshot was visually reviewed.

The skill-only ZIP contains exactly SKILL.md, agents/openai.yaml, two generated reference files and the source-resolution helper. Application HTML/CSS/JS, assets and the full checkout are excluded. Packaging checks verify exact archive contents; isolated synchronization tests cover automatic rebuilding, corrupted-archive rejection and resolving the extracted skill against an explicit source checkout. This is a source-linked skill, so the ZIP still needs access to a separate design-system checkout. Download initiation does not prove that a user retained the file.

Checked locally on 26 October 2026. The catalogue contains **46 sections, five application-page examples**, Getting started in HTML/Markdown, 80 mapped Persona reference entries, and a dashboard/reporting guide. The new patterns are client-side demonstrations with synthetic data.

## Completed checks

- **Chromium regression:** original catalogue interactions, search, forms, tabs/dialogs/macros, safe formatting, themes, reduced motion, and page overflow at 320/390/768/1024/1440px. The advanced interaction suite and its light/dark axe scan also pass.
- **Chromium, Firefox, WebKit — workspace additions:** applied filters, keyboard tree navigation, filtered timeline, notification states, pointer/keyboard/button reordering, required rating and reset, split-pane resizing/mobile stacking, recovery states, saved drawer reset baseline, and disabled empty-signature downloads. Light/dark axe checks pass for the new component regions.
- **Font verification:** local DM Sans actually loads in all five examples with HTTPS requests blocked; this is checked using the FontFaceSet loaded status, not just the CSS family declaration. Firefox/WebKit quoting differences are normalized in the assertion. Body and heading sizes match the shared scale. Native code/signature special families are intentional.
- **Dashboard:** 7/30-day fixture switching, reconciled chart/queue/KPI counts, target/team cards, loading/empty/error/retry, responsive layouts, and local example links.
- **Chromium, Firefox, WebKit — reporting:** all eight charts render from shared period/channel filters; summary counts reconcile with chart data; full-report CSV preserves selected rows and metadata; every chart CSV downloads; SVG includes context; PNG bytes have the correct signature and 1040 × 860 dimensions. Download-again returns identical bytes, history is capped at ten entries, and removal restores focus. A simulated canvas failure announces recovery and leaves controls usable.
- **Reporting states and printing:** loading/empty/error hide stale charts and disable new downloads; Retry recovers; print invocation expands tables, uses a light theme, and restores the selected theme. Automated checks intercept the native print dialog and inspect print CSS; they do not assert a file was saved through the OS dialog.
- **Reporting responsiveness/accessibility:** no page overflow at 320/390/768/1024/1440px. Axe reports zero violations in the reporting region in light/dark across all three engines. SVG names, exact data tables, native selects/disclosures, and named download buttons supplement the visuals.
- **Visual inspection:** reporting line chart card and downloaded PNG with title, unit, filter context, and legend. Existing selection, member-row, PIN, and calendar corrections remain covered by regression checks.
- **Synchronization:** tokens, section/element inventory, state matrix, Persona references, duplicate IDs, and tracked-source fingerprints are checked by `scripts/sync.py --check`.

Stacked-bar follow-up: segment joins now use a single rounded silhouette with flat internal boundaries. The reporting regression suite passes in Chromium; light/dark/mobile rendering and PNG/SVG download were exercised in Chromium, Firefox, and WebKit. The Chromium screenshot confirms the visible gap is removed.

Grouped top-navbar follow-up: Chromium, Firefox, and WebKit pass the menu suite, including all 46 anchors in seven groups, search filtering, arrow/Home/End navigation, Escape focus recovery, hidden/inert mobile navigation, responsive overflow checks, and light/dark axe checks for the catalogue header, reusable navbar, and partial Broadcast result. The original Chromium catalogue suite also passes.

## Reproduction

Run `npm ci`, then `npx playwright install chromium firefox webkit`. `npm test` runs catalogue, advanced, workspace, reporting, and menu suites; `npm run test:all` repeats them per engine. `DS_CHROMIUM_EXECUTABLE` selects an available Chromium binary. `DS_BROWSER=firefox` or `webkit` selects those engines. Screenshots go to the system temporary directory or `DS_SCREENSHOT_DIR`.

The original suite uses file URLs. Advanced/workspace/reporting suites use a loopback-only HTTP server, closed after the checks. Automated download clicks are spaced to avoid browser download-burst throttling. No remote backend or credentials are used for reporting.

## Boundaries and manual checks

Automated checks do not establish complete accessibility compliance. VoiceOver/NVDA, actual Safari/iOS, physical camera permission/success, native PDF rendering, browser OTP autofill, and production backend behavior require separate verification. WebKit is a test engine, not Safari itself. PDF/signature examples are UI previews, not document-editing or digital-signing implementations.

Verify the final printed report in the target browser/printer. SVG recipients need DM Sans installed for exact editable text; exported PNGs preserve their rasterized appearance. “Download requested” does not prove the browser/user saved a file. Scheduled jobs, emails, and real delivery analytics are not implemented. The concurrently maintained Support API Integration example is preserved; its production integration is outside this dashboard validation scope.

The included GitLab CI configuration has not been run remotely; no branch-protection settings were changed.

## Chart motion and single-row navbar follow-up — 26 October 2026

- `scripts/chart-interactions-check.mjs`: passed in Chromium, Firefox, and WebKit. Covers values for all eight reporting charts, pointer and keyboard inspection, arrow/Home/End/Escape behavior, 30-day targets, entrance motion and filter replay, reduced motion, export cleanup, hidden-state cleanup, ticket-volume values, and the additional single-row navbar.
- The same checks cover the single-row navbar's desktop keyboard menus, mobile collapse at 320/390/768/1024px, 1440px desktop layout, viewport-constrained tooltips, and automated axe checks of both navbar variants in light/dark themes.
- Existing Chromium reporting checks passed for filters/totals, all eight CSVs, real SVG/PNG bytes, history, export failure, loading/empty/error, print, responsive widths, and light/dark axe. Existing Chromium menu checks passed for grouped catalogue navigation, search, full anchor inventory, keyboard/focus, mobile collapse, and partial-result specimen.
- Visual inspection confirmed the compact desktop header keeps identity and page navigation in one row. This is a local synthetic demonstration; these checks do not establish complete accessibility compliance or real backend behavior.

## Donut visibility correction — 26 October 2026

The entrance helper previously set a CSS transform origin on opacity-only donut circles, moving their rotated geometry outside the SVG viewBox. The helper now leaves those presentation transforms intact. Visual inspection confirms the complete three-segment ring is centred around the total. The chart interaction regression now uses physical pointer coordinates on every painted donut arc and validates its actual hit target and exact tooltip, replacing the synthetic pointer event that failed to detect the original defect. Chromium, Firefox, and WebKit checks cover this behavior.

## Navigation and search follow-up — 26 October 2026

- `scripts/account-menu-check.mjs` passed in Chromium, Firefox and WebKit: the left-aligned menu variant, profile dialog, logout cancellation/confirmation, local sign-in restore, keyboard focus, mobile account popup bounds, sidebar submenu arrows/Enter/Escape, light/dark axe, and equal 44px navbar control heights at 320/390/768/1440px.
- `scripts/search-dropdown-check.mjs` passed in all three engines: dropdown results while all catalogue sections and navigation groups remain available, title/subheading matching, keyboard and pointer selection with heading focus, empty results, Escape/Tab/outside dismissal, 320–1440px layouts, mobile menu preservation, and light/dark axe.
- Visually checked the account variant and equal-height navbar controls. Profile/logout/sign-in remain local demonstrations; no real session is modified.

## Operational workflows, pagination and focus — 26 October 2026

`workflow-check.mjs` passed in Chromium, Firefox and WebKit. It exercises all 13 new workflow sections: column visibility/pinning and validated inline edits; AND/OR saved views; malformed and quoted CSV, mapping invalidation, duplicates and formula-safe error exports; job failure/retry/cancel/expiry and real local downloads; permission preview invalidation; approval notes; future recurrence and pause/resume; linked report details; draft/publish/compare/restore; native-select and real pointer-drag Kanban movement; webhook retry and fake-key hide; preference save/discard and session revocation; conflicts, unknown-result checking, partial retry, successful and expired Undo, and stale refresh recovery.

The same suite checks no page overflow at 320/390/768/1024/1440px, left/right pagination alignment, pointer versus branded keyboard focus, and axe violations in new sections for both themes. Existing Chromium browser and menu checks also passed with 59 sections and all navigation anchors. Visually inspected the advanced table and Kanban layouts. These checks cover local demonstration behavior; they do not prove production authorization, real job execution, data persistence, full accessibility conformance or native-device support.

## Typography, notifications and field refinement — 26 October 2026

`visual-refinement-check.mjs` passed in Chromium, Firefox and WebKit: standard preview-button sizing, explicit DM Sans availability, 24px scheduler field/action spacing, 12px notification-row gaps, fixed metadata timestamps, read/unread/filter/loading/error/retry behavior, light/dark border and focus colors, responsive layouts at 320/390/768/1440px, and targeted axe checks. Chromium CDP also confirmed custom DM Sans glyph rendering on the reported preview buttons, scheduler actions, notification titles/actions and member names; the original preview labels were already DM Sans but had a 12px override. Search/check glyphs now use SVG instead of an OS-font fallback. The existing Chromium workspace check passed, including offline fonts across all five examples. Visually reviewed the light notification center and dark scheduler.

## Navbar search trigger correction — 26 October 2026

The shared workspace search previously bound only the first matching button. It now binds all four catalogue navbar triggers and explicitly records the opening button. Chromium, Firefox and WebKit checks passed for opening, initial query focus, filtering, Escape/Close focus restoration, light/dark themes, desktop/mobile, and the five full-page examples. `advanced-check.mjs` now verifies every catalogue search trigger.

## Single-row catalogue, interaction motion and feedback refinement

Validated the main catalogue header with left-aligned groups, component-search popup, account/profile/logout preview and compact navigation. Chromium checks passed for search suggestions, grouped-menu keyboard behavior, catalogue regression, advanced controls and workflow states. The focused motion check passed in Chromium, Firefox and WebKit: search/profile focus restoration, sort direction, light/dark toast and API-key panels, modal/drawer motion, reduced motion, 320–1440px layout and focused-toast timer pause. Scoped axe checks for the header, interactive table and key panel passed; this is not a complete accessibility certification. Chart motion retains its dedicated regression check.

Run `node scripts/motion-check.mjs` (also included in `npm test`) for the new focused checks. Motion timing tokens are generated from `tokens.json`; `motion.css` supplies the catalogue and all five examples.


## Responsive preview, search metadata and burgundy navigation

The responsive preview check covers actual iframe widths, mobile/desktop breakpoints, custom-dimension validation, rotation, all five page examples, light/dark theme messaging, fit/100% scaling and internal overflow. It also exercises the documented direct-file workflow, sidebar keyboard navigation, singular search-result wording and count alignment below the input. Scoped axe checks cover preview controls and both sidebar themes. Run `node scripts/responsive-check.mjs`; it is included in `npm test`. The preview does not emulate touch hardware or an operating-system keyboard.

Responsive-preview checks passed in Chromium, Firefox and WebKit, including direct-file loading. Existing grouped navigation and search checks also passed in Chromium. These targeted checks do not certify every device/browser combination.

## Custom searchable selects

The focused custom-select check covers option/group search, empty results, keyboard commit/cancel, external value changes, disabled/dynamic options, required validation, reset, form serialization, modal Escape behavior and viewport bounds. It passed in Chromium, Firefox and WebKit. Existing workflow, reporting and responsive-preview checks cover original select event/value compatibility. The native backing fields remain form controls; their visible presentation and accessibility interaction use the custom combobox. Run `node scripts/custom-select-check.mjs` (included in `npm test`).

Mobile touch search/selection also passed in Chromium and WebKit. The regression preserves option nodes during unrelated visibility changes and checks that required errors survive background component updates.

## Dashboard input patterns

The focused dashboard-input checks cover grouped-money editing and plain form values, malformed/oversized amounts, phone formatting, URL normalization and unsupported formats, inclusive range ordering, form reset, atomic tag additions/deduplication/limits, safe tag rendering, keyboard removal focus and clearable search. Light/dark scoped axe checks and 320/390/768/1440px layouts are included. Run `node scripts/dashboard-inputs-check.mjs` (included in `npm test`). All data remains local.

The dashboard-input check passed in Chromium, Firefox and WebKit. These are targeted interaction/layout checks, not certification of every device or a production data-validation contract.

## Advanced forms and HTML/JSON editor

`node scripts/form-patterns-check.mjs` exercises blur/correction validation, error-summary focus links, repeated contact limits/removal focus, inactive channel serialization, dependent lookup races/empty/failure/retry, availability race/unavailable/failure states, stepper bounds, review/cancel, save locking/failure/retry and baseline restoration. It checks compact/mobile control sizes, floating-action clearance, page overflow and scoped light/dark axe findings.

`node scripts/code-editors-check.mjs` exercises independent keyboard tabs, JSON syntax/schema/type/required errors, formatting/reset, unknown variables, text-only interpolation and static iframe restrictions. The test verifies removal of interactive content, no attempted remote fixture requests, responsive sizes and scoped light/dark axe results. Both checks passed Chromium, Firefox and WebKit; the existing catalogue browser regression also runs separately. The preview is intentionally restricted, not a production sanitizer. Soft keyboard behavior still requires physical-device testing.

## Leading-filter search and recruitment patterns

`node scripts/filtered-search-check.mjs` covers combined status/query filtering, field scope, custom dropdown keyboard commit, Clear versus Reset all, query Escape, no-match state, singular result counts, 320/390/768/1440px bounds and settled light/dark axe checks.

`node scripts/recruitment-check.mjs` covers permitted team/role views, candidate table filtering/sort/pagination, HR-only profile fields, candidate-message separation, modal focus return, current-offer and terminal-stage guards, optimistic revision conflict/reload, WIB schedule editing, separate reviews, template/job visibility, consent-gated factual follow-up, archive irreversibility and shared non-data/stale states. It also checks narrow/wide bounds, mobile profile drawer and settled light/dark axe results. These checks use synthetic fixtures; server-side authorization, real files, real consent events and delivery are outside the kit.

The responsive-preview regression includes the sixth example page, Recruitment workspace.

The leading-filter search and recruitment checks passed in Chromium, Firefox and WebKit. Recruitment verification includes native drag-to-review, invalid-drop rejection and the mobile drawer after its entrance motion settles. The existing catalogue browser regression and the expanded responsive-preview check passed in Chromium. These targeted results do not certify all devices or production services.

## EBS pagination and compact heading patterns

`node scripts/ebs-patterns-check.mjs` covers page-size changes, reset to page 1, last-page ranges, full-result sorting/filtering, loading skeletons, empty versus error, query-preserving retry, old-success/old-error response races, current-page focus, named detail actions, heading-count states, reduced motion, custom-select keyboard interaction, 320/390/768/1440px layout bounds and scoped light/dark axe checks. The framework recipe was checked against local source props/slots; its adapter example is documentation, not a compiled or connected EBS integration.

The EBS interaction check passed in Chromium, Firefox and WebKit; the existing catalogue browser regression passed in Chromium. Checks cover local UI fixtures and scoped automated accessibility scans, not production API or assistive-technology certification.

## CLM patterns · 27 October 2026

The catalogue now contains **73 sections and seven full-page examples**. Five new specimens and `examples/clm.html` cover fourteen CLM patterns; see [CLM_GUIDE.md](CLM_GUIDE.md).

- **Chromium, Firefox and WebKit:** scoped repository/filter/save-view/sort/pagination, read-only restrictions, dirty-switch confirmation, revision conflict preservation, comparison/change navigation, internal/shared comment separation, sequential/parallel and conditional Finance approvals, delegation/reasons, approval invalidation, conditional SOW request validation, template restrictions and explicit metadata confirmation.
- **All three engines:** signer-field prerequisites, sequential signing, unknown-outcome reconciliation without resend, signed-document locking, separate effective term, evidence-required obligation completion/monthly recurrence, notice-date calculation, linked renewal/amendment drafts and unchanged original document.
- **Downloads:** actual CSV and JSON bytes checked for scope, dates and omission of private comments.
- **States/layout:** loading/empty/error/permission/stale/refresh, light/dark axe scans with zero reported violations in the full example main region, no page overflow at 320/390/768/1440px, catalogue interaction smoke check. Light/dark and mobile screenshots inspected.

Run `node scripts/clm-check.mjs`, with `DS_BROWSER=firefox` or `DS_BROWSER=webkit` as required. Tests do not provide production legal, signature-provider or authorization assurance; fixtures remain local and synthetic.

CLM follow-up checks also cover approval blocking on changed notice metadata, explicit notice confirmation, and cancelled dirty state changes after Refresh. The original Chromium catalogue regression and Responsive preview suite pass with all seven examples.

## Standalone logout confirmation · 27 October 2026

The expanded `node scripts/account-menu-check.mjs` passed in Chromium (installed Chrome), Firefox and WebKit. It checks Cancel initial focus, keyboard activation, exclusion of background controls from modal tab navigation, Cancel/Escape/close/backdrop dismissal, explicit confirmation, focus return and reopening after a previous confirmation. Both themes pass at 320/390/768/1024/1440px; scoped axe checks pass for the open modal at 320px and 1440px. The existing sidebar check now identifies its named navigation explicitly because two sidebar variants share the same class.

The existing Chromium catalogue regression also passed. The copyable overlay HTML matches the specimen and includes the new trigger and dialog. Visually reviewed the narrow light and wide dark modal. These checks cover the local companion only; no real logout request or session change is implemented, and automated checks do not establish complete accessibility compliance.

## Error-page designs · 27 October 2026

`node scripts/error-pages-check.mjs` (included in `npm test`) passed in Chromium (installed Chrome), Firefox and WebKit. It covers all eleven variants: 400/401/403/404/408/429/500/502/503/504 and offline; keyboard selection, pressed states, distinct messages, disclosure focus, retry busy/disabled behavior, cancellation of pending retry feedback, and catalogue search by code. Checks confirm that the actions make no requests apart from the expected local assets when switching themes. Back to workspace links to the existing local dashboard example.

Both themes were checked at 320/390/768/1024/1440px, including long offline labels and stacked mobile actions. Scoped axe scans passed in both themes. Desktop light/dark and narrow light screenshots were visually reviewed. The existing Chromium catalogue regression passed, and the copyable HTML was checked against the actual specimen. These local simulations do not test real HTTP responses, authentication, service availability or complete accessibility compliance.

### Error-page simplification and icon variants

Removed guidance actions and the “What can I do?” disclosure from the error-page companion. Each of the eleven states now has a distinct decorative SVG icon. The updated `scripts/error-pages-check.mjs` passed in Chromium: removal of guidance controls, primary workspace links for non-retry states, icon variation and hidden accessibility semantics, keyboard selection, retained retry behavior, pending-work cancellation, both themes, scoped axe and 320–1440px bounds. The HTML snippet remains aligned with the preview. Visually reviewed the shield, broken-link, maintenance and offline icons. Firefox and WebKit were not rerun for this visual refinement.

## Collapsible sidebar · 27 October 2026

The expanded `scripts/menu-check.mjs` passed in Chromium. In addition to existing catalogue/menu regression checks, it covers the 72px collapsed rail, 240px expanded width, native Enter/Space toggle, focus retention, Escape collapse, tooltip visibility/dismissal, all nine named links, retained active state, resize focus/state retention and reduced-motion operation. Both themes pass at 320/390/768/1024/1440px without page overflow; expanded mobile content follows the sidebar. Scoped axe checks passed for the new specimen in both themes.

Visually inspected collapsed desktop, expanded dark desktop and both mobile layouts. The copyable HTML matches the implemented specimen. These are local navigation examples; no backend changes or complete accessibility certification are implied. Firefox and WebKit were not run for this addition.

## Shared design-system skill · 28 October 2026

The skill-creator validator passed for `skills/privy-design-system`; UI metadata and referenced resources were also checked. `npm run test:skill` exercises a temporary complete checkout: unsynchronized token detection, read-only tracked-file checks, same-pass CSS/reference/hash updates, generated-reference corruption and deletion, installation idempotency, collision protection, source resolution through an installed symlink, live updates visible from another project, and an explicit source override for a copied skill. No consumer application code is changed by these tests.

The installer created the user-level `~/.agents/skills/privy-design-system` symlink to the maintained checkout. The resolver checks the live source through the same normal synchronization gate. Skill discovery inside a future Codex session has not been observed; restart the session if needed. No remote plugin was published or background watcher installed.

The updated HTML Getting started guide passed Chromium keyboard-link checks, scoped axe in light/dark themes and 320/390/768/1440px overflow checks. This validates setup documentation, not runtime component integration or complete accessibility compliance. PyYAML was installed only in a temporary directory for the skill-creator validator; the design-system scripts remain standard-library-only Python.

## Bot messaging and recoverable operations — 28 October 2026

`scripts/bot-patterns-check.mjs` passes in Chromium: disabled bot history remains visible, local replies, one-time secret removal and focus restoration, no secret storage, three-second retry feedback, unknown-outcome recovery with a stable reference, and structured rejection feedback. Axe checks pass for the new section in light/dark themes; widths 320, 390, 768 and 1440 have no page overflow. The test is included in `npm test`. Other browser engines and real backend messaging were not exercised for this addition.

## Broadcast delivery results — 28 October 2026

`scripts/broadcast-delivery-check.mjs` passes in Chromium: request acceptance remains distinct from job status; queued/running/completed/failed and unavailable/selected/stale states; real zero counts versus missing data; overlapping Delivered/Read metrics; labeled recipient progress; and keyboard activation. The specimen passes light/dark axe checks and 320, 390, 768 and 1440px page-overflow checks. It is included in `npm test`. This local fixture makes no delivery requests; Firefox/WebKit were not rerun for this addition.

Latest status follow-up: the Broadcast delivery check also verifies the current job summary remains separate from request acceptance. The existing light/dark axe and narrow/wide layout checks include the added panel.

Activity refinement: the current delivery job is now a single timeline row; the separate Latest status panel is removed. The fixture check verifies the failed-job row and actual completion time, plus one card-header Refresh control. Existing keyboard, light/dark axe and mobile checks include both changes.

Request wording/pagination follow-up: Chromium EBS checks pass after correcting unequal page-button dimensions; disabled and numbered controls remain aligned, and custom page-size selection, focus, light/dark axe and 320–1440px bounds pass. The delivery specimen check verifies that the accepted notice is hidden for completed delivery and uses Request completed/Request failed labels. A local isolated Privy Career browser check verified cached authenticated HR non-admin template loading without Refresh, square pagination controls and the 88px custom-select wrapper at 390/1440px. No production records were modified.