Skip to content

Vibe coded sections, QA agent, and many more#55

Merged
MaryWylde merged 25 commits into
mainfrom
dev
May 5, 2026
Merged

Vibe coded sections, QA agent, and many more#55
MaryWylde merged 25 commits into
mainfrom
dev

Conversation

@MaryWylde
Copy link
Copy Markdown
Contributor

Major additions

  • Country Bias Map: new section above UXCP body that pre-selects the
    user's country (IANA timezone → 53-country map, navigator.language
    fallback) and surfaces culturally-relevant cognitive biases
    (7ed4617, 3773b09)
  • Interactive bias demos rendered inline inside the bias modal
    (587e0ee)
  • Search experience: unmatched biases fade out as the user types
    (7c24535)
  • Bias modal widened to 900px with animated tab switcher (eb9a9d9)
  • Rating row (1-10) redesigned as a button cluster (7545c11)
  • Table row layout redesigned (ae6a2fb)
  • Persona builder smart defaults: stage auto-selects from tag
    relevancy; priority filter defaults to dominant bucket; smooth
    scroll to persona section when biases are applied (3773b09)

Fixes

  • Certificate display no longer leaks the internal user id
    (a588ce4, hotfix/certifiate via Hotfix/certifiate #51)
  • Demo heading hierarchy restored under bias panels for SEO
    (1c6db4a)
  • JSON-LD url aligned with canonical and og:url (715f19b)

Performance

  • Fonts: font-display: swap + Armenian fallback (de54f16)
  • 404 background swapped to webp (fafa487)

QA / CI

  • Playwright e2e suite scaffolded with scheduled CI runs (2fb1b48)
  • Playwright base URLs now read from repo secrets (f3e047b)
  • Linkinator-based link checker added (918b4aa)
  • Cypress removed; Playwright is sole e2e framework (prior commit)

Tooling / repo hygiene

  • yarn.lock updated for new dependencies (99b2969)
  • .env.example refreshed for contributors (4c37fa7)
  • Auth files marked as shared with KeepSimpleOSS (a6ae135)
  • .gitignore expanded for runtime artifacts and local state
    (1d453a1, 373c314)
  • Project Claude skills added: bias-advisor, uxcore-style (b6acfce)

MaryWylde and others added 25 commits April 8, 2026 15:25
- Per-machine Claude Code state (.claude/settings.local.json) but
  keep project skills under .claude/skills/ tracked.
- Linkinator outputs (reports/links-*.{json,html}) — produced by
  yarn check-links.
- Ad-hoc local screenshots (/screenshots/).
- llms-full.txt / llms.txt / llms-full-pages/ — already auto-committed
  by .github/workflows/generate-llms.yml on schedule, no need to
  track manual copies.
- scripts/import-repo.sh — personal dev utility, not for repo history.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds two Claude Code skills under .claude/skills/ that guide
AI-assisted development in this repo:

- bias-advisor (Bob): cognitive bias advisor that suggests how
  to apply the 105 biases catalogued at uxcore.io to UI/UX/copy
  decisions. Includes bias and question references plus demo
  recipes used by src/components/_biases/BiasBody/demos/.
- uxcore-style: UXCore visual identity guide — typography,
  colors, spacing, components, motion, and do/don't rules for
  UXCore, UXCG, UXCP, and UXCat surfaces.

These auto-load in Claude Code; other agents (Cursor, etc.) can
load them manually for visual or bias-related work.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
JSON-LD `url` was built from router.asPath, but <link rel="canonical">
and og:url already used the locale-prefixed originalUrl. They now
match — search engines see one canonical URL across surfaces instead
of two competing ones for the same page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds the Playwright test infrastructure that will replace Cypress
once one clean weekly scheduled run lands on main (per QA_PLAN §5).

Tests
- 5 P0 specs: home renders, /uxcore /uxcg /uxcp loads, 404 invariants
  (HTTP status + page title — guards against the inline-404-at-200
  regression).
- 1 P2 spec: numeric-slug → canonical-slug redirect.
- tests/p1/.gitkeep — placeholder; P1 tier still to write.

Fixtures
- analytics-blocker: 204s mixpanel / google-analytics / googletagmanager
  / analytics.ahrefs.
- popup-silencer: stubs Strapi /api/setting with all-disabled flags so
  feedback/pleaseShare/helpToHelp popups never fire. Also exports an
  unused seedCalmCookies (test.ts inlines the equivalent).
- cookie-banner-dismiss: pre-sets cookieBoxIsSeen=true to dismiss the
  consent banner. Originally written because the banner overlay
  blocked Playwright interactions and stuck test runs. The dismiss
  logic is now inlined into test.ts (alongside updateModalSeen), so
  this file is currently unused — kept as a reference for future P2
  cookie-consent tests that need the banner visible.
- test.ts: extends base with \`dismissCookieBanner\` option (default
  true); composes blockAnalytics + silencePopups on every page.

Helpers
- gotoSuccess / gotoNotFound — assert HTTP status AND page title.
- axe.ts — placeholder; real AxeBuilder wrapper deferred to P2 #31.

Global setup
- Pre-warms next dev's per-route compile cache to avoid the
  ERR_ABORTED on cold dynamic-route hits described in
  tests/STATUS-2026-04-29.md §0.

Config + CI
- playwright.config.ts: 3 browsers, workers=1 locally (compile
  contention), webServer health-checks /uxcore (root 404s in dev).
- .github/workflows/playwright-scheduled.yml: Mon 06:00 UTC +
  workflow_dispatch on main, against PLAYWRIGHT_STAGING_URL /
  PLAYWRIGHT_PRODUCTION_URL repo vars (Node 20).
- eslint.config.mjs: disables react-hooks/rules-of-hooks under
  tests/ — Playwright fixtures use \`use()\` as a fixture-setup
  pattern (unrelated to the React hook).

Docs: QA_PLAN.md, QA_RECON.md, AGENTS.md, LOCAL-DEV-NOTES.md,
STATUS-2026-04-29.md, qa-config.yml.

Cypress (cypress/, cypress-manual.yml) intentionally untouched —
removal is gated on first clean Playwright run.

Note: GitHub repo variables PLAYWRIGHT_STAGING_URL and
PLAYWRIGHT_PRODUCTION_URL must be set at Settings → Secrets and
variables → Actions → Variables before the workflow can run.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wraps linkinator's programmatic API so JSON output flushes
incrementally — survives the upstream Node-20 abort-DOMException
crash that wipes the CLI's report on partial runs.

- linkinator.config.json: recurse, retry, skip social URLs.
- scripts/run-linkinator.mjs: incremental-flush wrapper around
  LinkChecker; writes reports/links-YYYY-MM-DD.json after each link.
- render-links-report.js: turns the JSON into a readable HTML report
  at reports/links-YYYY-MM-DD.html.
- reports/.gitkeep: keeps the output directory present after clone
  (actual outputs are gitignored).
- yarn check-links / yarn render-links scripts in package.json.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Lets users browse cognitive biases by country via a TopoJSON world
map (110m resolution, ~108KB). Selecting a country populates the
existing UXCP \`selectedBiases\` state so the rest of the layout
(decision table, search, etc.) reacts to the choice.

- src/components/_uxcp/CountryBiasMap/: component tree
  (CountryBiasMap, CountryMap, CountryList, BiasPanel, FlagImage).
  Uses d3-geo for projection + topojson-client for mesh decoding.
- src/data/countryBias/: per-locale country→bias mapping (en, ru, hy)
  with type definitions and region colors.
- public/uxcore_/data/countries-110m.json: TopoJSON world map.
- src/styles/countryBias.scss: globals imported via _app.tsx.
- src/layouts/UXCPLayout/UXCPLayout.tsx: renders the map above
  MobileDisclimer; onUseBiases() maps selected country's bias
  numbers back to bias objects and calls setSelectedBiases.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When a user opens a bias modal (UXCore desktop or mobile), the
matching demo from src/components/_biases/BiasBody/demos/ now
renders below the body copy under a "Visual Example" heading
(locale-aware). Each demo is a self-contained React component
illustrating the cognitive bias in question.

- src/components/_biases/BiasBody/: BiasBody.tsx renderer + 107
  demo subdirs, demoRegistry.ts, _tokens.scss, DemoErrorBoundary
  (so a buggy demo can't take down the modal).
- src/data/biasDemos/: 80 single-file bias-demo definitions.
- src/data/biasList/{biases,hy,ru,index}.ts: canonical bundled bias
  text dataset per locale (~290KB total).
- src/data/modal/{en,hy,ru}.ts: visualExample i18n key.
- UXCoreModal.tsx + UXCoreModalMobile.tsx: imports BiasBody and
  renders {data.title && <BiasBody biasNumber={...} locale={...} />}
  beneath the existing usage section.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
When a search returns at least one result, all bias labels and
their connecting SVG lines that aren't in the result set get
opacity 0.5. Matching ones stay full-opacity (and keep their
existing .searched highlight). Inverse of the existing dim-on-hover
affordance — both are user-feedback layers on the bias map.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces the vertical "block + number" stack (color #28587b,
30px wide bars) with rounded 32×32 buttons that fill #5b9bd5
on hover. New palette aligns with the brand color #1e56a0.

Mobile rules rewritten so the 10 buttons share row width via
\`flex: 1\` instead of fixed \`(100% - 10px) / 10\` math; falls
back to a smaller font size at the narrower breakpoint.

ModalRaiting.tsx loses its inner \`.Block\` div — the number is
now the button label directly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Modal width 650 → 900px (more room for the inline BiasBody demo).
- Product/HR switcher gets a sliding pill highlight via a ::before
  pseudo-element + cubic-bezier transform (450ms). Replaces the
  hard border-color swap with a smoother active-tab indicator.
- Color refresh: switcher inactive #000000a6, active #1E56A0,
  pill #E8F0FB, hairline #E0E0E0.
- Side cleanup: drops a stray blank line in UXCoreModal.tsx.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The user-facing UX Core certificate showed "User id: <number>" in
the lower-right corner. Removed for privacy — exposing an internal
account identifier on a downloadable / shareable artifact serves no
purpose for the recipient and risks leaking it if the certificate
is screenshotted or posted publicly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces /assets/landingPage/landing-bg.png with the new
/assets/404-bg.webp (43KB, modern format).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
These files are verbatim copies of the same paths in the sister
repo (keepsimpleio/KeepSimpleOSS). The marker header makes future
edits explicit about needing to sync both repos.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Catches yarn.lock up with the deps added across the preceding
commits:

- Playwright + axe (feat(qa): scaffold playwright e2e suite)
- linkinator (chore(qa): add linkinator-based link checker)
- d3-geo + topojson-client + their @types (feat(uxcp): country
  bias map)

Splitting yarn.lock per-commit was avoided as too brittle for
a generated lockfile; this single update brings the lockfile in
line with package.json across the whole branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Demo titles inside BiasBody panels were rendered as <h3> (and a few
as <h2>), sitting at the same level as — or above — the panel labels
"Without Bias" / "With Bias" / "Why It Works", which are themselves
<h3>. The h2 cases were the worst offenders, jumping back up the
outline inside an h3 section.

Drop all demo title headings to <h4> so the page outline reads
cleanly: h1 (bias name) -> h3 (panel label) -> h4 (demo title).
No <h1> introduced. Class names untouched and no SCSS targets these
tags directly, so styling is unchanged.

Touches 54 demo files; 104 tags swapped.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add /QA_PLAN.md and /QA_RECON.md to .gitignore so the personal
QA scoping notes stay out of the public repo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The PLAYWRIGHT_STAGING_URL / PLAYWRIGHT_PRODUCTION_URL repo
variables have been configured, so the inline TODO block in the
workflow header is no longer needed. The "no PRs by design"
note above it stays — that's still load-bearing context.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- CountryBiasMap: pre-select the user's country on mount via IANA
  timezone (53-country lookup) with navigator.language fallback. No
  permission prompt, no network call. Selection only — biases are
  not auto-filled until the user clicks the action button.
- CountryBiasMap: drop the orphaned `tagline` field; restore the
  `subTagline` block in the header (types + en/ru/hy locales).
- BiasPanel: bump font sizes (BiasNumber 11→14, BiasName 14→16,
  BiasShort 12→14 with 8-line scroll cap, FooterMeta 12→14,
  Rationale 13→16, RegionTag/ConfidenceBadge 12→14); interpolate
  the country name into the "Use in Persona Builder" button label.
- CountryList: bump 14px elements to 16, sub-14 elements to 14.
- hy locale: replace "կողմնակալություն" with "հակում" everywhere
  (correct Armenian term for cognitive bias); all suffix forms
  remain grammatically valid via stem swap.
- UXCPLayout: auto-select the most relevant persona stage when
  bias relevancy data first becomes available; smooth-scroll to
  the persona section when biases are applied from the country
  panel.
- PersonaRelatedQuestions: default the priority filter to the
  dominant relevancy bucket for the active stage; user clicks
  override and persist for the rest of the session.
- ci(playwright): support HTTP Basic Auth for staging tests —
  read PLAYWRIGHT_HTTP_USERNAME/PASSWORD from env in
  playwright.config.ts and pass them through the scheduled
  workflow only when the target is not production.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
feat(uxcp): country auto-detect, persona smart defaults, ux polish
@MaryWylde MaryWylde merged commit 71dea0a into main May 5, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant