chore(webkit): adopt the design-system toolkit and report adoption on every PR - #2335
Merged
isaque-bock-azion merged 2 commits intoSep 10, 2026
Merged
Conversation
Run `npx @aziontech/webkit init` and keep the parts that fit an Astro repo
which already consumes webkit 4.4.0.
Kept:
- `.stylelintrc.json` — stylelint was installed with no config at all. Adds
`**/*.astro` to the postcss-html override, so the 41 Astro files are covered
too (verified: it catches a hex inside an Astro `<style>` block).
- `.mcp.json` — registers the webkit MCP, so an agent working here can resolve
components against the installed catalog instead of guessing.
- `CLAUDE.md` + `.claude/{rules,skills,agents}` — the shared guidance bundle.
- `.gitignore` — `.claude/*` with negations for the three bundle folders, so the
bundle is versioned for the team while local settings, launch configs and
worktrees stay ignored as before.
- `eslint.config.mjs` — a block applying the AST-based webkit rules to
`**/*.astro`. The preset's own FILES list does not include `.astro`, so those
41 files were outside every webkit rule; this closes it until the preset does.
`no-style-override` is deliberately absent — it needs vue-eslint-parser's
template visitor, which astro-eslint-parser does not provide.
Dropped, with reasons:
- The dependency additions. `tailwindcss` would land in devDependencies at
`^4.0.0` while `dependencies` already pins `^4.3.3` (init only checks the
target field), and `@tailwindcss/postcss` does not apply — this repo runs
Tailwind through `@tailwindcss/vite`.
- `scripts.prepare: "husky"` and `.husky/pre-commit`. The generated hook runs
`eslint .` on every commit; with 72 known violations that blocks all work.
Local hooks come after the first cleanup pass, not before it.
- `src/webkit.css`. This repo already registers webkit in
`src/styles/main.css`; a second entry would load Tailwind and the theme twice.
`webkit init` left `eslint.config.mjs` and `postcss.config.js` untouched, as
designed, and printed the merge snippets instead.
Two findings for the design system, filed separately: `webkit doctor` reports
`webkit.css @source` as FAIL because the check hardcodes `src/webkit.css`, and
its source scan omits `.astro` — both give a false reading on any Astro project.
The webkit ESLint rules were already configured in this repo and nothing ran them, so the distance between this codebase and the design system was invisible. This makes it a number in the run Summary on every PR. - `scripts/webkit-adoption-report.mjs` reads the ESLint JSON and aggregates only `webkit/*` results: totals, a table per rule with what each one catches, the 15 worst files, and an adoption score (share of `.vue`/`.astro` files with no violation — the same "clean files" shape the console-kit architecture report uses). Markdown on stdout, progress on stderr, so it redirects cleanly. - It states what it did *not* look at. `no-style-override` cannot run on `.astro`, and raw HTML where a webkit component exists is caught by no rule at all — a report that hides its own blind spots is worse than no report. It also checks the catalog resolves: without it the plugin silently disables 8 of its 12 rules, and "clean" would be indistinguishable from "blind". - `pnpm lint:webkit` / `pnpm report:webkit-adoption`, plus `lint:style` for the stylelint config that now exists. - The CI step is `if: always()` + `continue-on-error: true`: it runs even when a step above fails and never turns the check red. `pnpm --silent` matters — without it pnpm's own "Already up to date" lands in the Summary. - `pr-checks.yml` also now runs on PRs to `release/new-azion-docs`. That branch is where the new-docs work lands today and it had no CI at all — not build, not frontmatter, not title. Baseline on this branch: 72 `webkit/*` violations in 30 files, 65% of UI files clean. The largest group is 26 `no-style-override` spread over 17 different components, and only `frame-box` declares a `styleSeam` in the catalog — so most of that number is a design-system backlog, not a docs one. One `valid-import-path` hit is a false positive from our own local patch, which adds `./use-mounted` to the package exports without it existing in the catalog. This script is a stopgap. The design system is building a `webkit report` command that will own this measurement for every consumer; when it lands, the CI step calls that and this file goes away.
isaque-bock-azion
requested review from
a team,
bruno-andrade-azion,
marcus-souza-azion and
pedro-ribeiro-azion
as code owners
September 10, 2026 13:11
bruno-andrade-azion
pushed a commit
that referenced
this pull request
Sep 10, 2026
* release/new-azion-docs: Potential fix for pull request finding 'CodeQL / Incomplete string escaping or encoding' chore(webkit): adopt the design-system toolkit and report adoption on every PR (#2335)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The webkit ESLint rules have been configured in this repo since the plugin landed in
eslint.config.mjs— and nothing has ever run them.lint:eslintexists and no workflow calls it. So the distance between this codebase and the design system was invisible: not measured, not tracked, only ever noticed in review.Two commits: wire the toolkit that was missing, then make the adoption a number on every PR.
Baseline this produces
Measured on this branch against
@aziontech/webkit@4.4.0:webkit/*violationsno-style-overrideauthoring-standardsno-hardcoded-colorno-hardcoded-motionprefer-tree-shakeable-rootvalid-import-pathMost of that number is a design-system backlog, not a docs one. The 26
no-style-overridehits spread across 17 different components (Table.Cell,IconButton,NavigationMenu,Button,Kbd,GlobalHeader,Accordion.Content,Sidebar,HeroTitle,DocProse, …) and onlyframe-boxdeclares astyleSeamin the catalog. Some of those are legitimate layout needs the design system should expose; some are overrides that should be composition. Triage is a follow-up, with this report as the input.The single
valid-import-pathhit is a false positive from our own patch:patches/@aziontech__webkit@4.4.0.patchadds./use-mountedto the package exports, butuse-mountedis not incatalog.json, so the rule correctly says it is not a published export. The fix is upstream (publish the composable), not a suppression — the rule takes no allow-list.What changed
Toolkit wiring (
webkit init, keeping what fits an Astro repo).stylelintrc.json—stylelintwas installed with no config at all. Added**/*.astroto the postcss-html override; verified it catches a hex inside an Astro<style>block. The repo's real CSS passes clean..mcp.json— registers the webkit MCP so an agent working here resolves components against the installed catalog instead of guessing.CLAUDE.md+.claude/{rules,skills,agents}— the shared guidance bundle (20 rules, 18 skills, 5 agents)..gitignore—.claude/*with negations for those three folders. The bundle is versioned for the team; local settings, launch configs and worktrees stay ignored exactly as before.eslint.config.mjs— a block applying the AST-based webkit rules to**/*.astro. The preset's ownFILESlist does not include.astro, so 41 files here were outside every webkit rule. Verified with a canary plus a.vuecontrol: identical content reported 3 violations as.vueand zero as.astro. That block found 3 real hardcoded colours that were hidden.no-style-overrideis deliberately excluded — it needs vue-eslint-parser's template visitor, which astro-eslint-parser does not provide.Adoption report
scripts/webkit-adoption-report.mjs— aggregates the ESLint JSON into the tables above. Markdown to stdout, progress to stderr, so it redirects cleanly into the Summary. Same "clean files" score shape the console-kit architecture report uses.no-style-overrideon.astro; raw HTML where a webkit component exists is caught by no rule at all) and checks the catalog resolves — without that check, the plugin silently disables 8 of its 12 rules and "clean" would be indistinguishable from "blind".pnpm lint:webkit,pnpm report:webkit-adoption,pnpm lint:style.if: always()+continue-on-error: true— runs even if a step above fails, never turns the check red.CI trigger
pr-checks.ymlnow also runs on PRs torelease/new-azion-docs. That branch is where the new-docs work lands today and it had no CI at all — not build, not frontmatter, not title. This PR is the first one to get it.What was deliberately dropped from
webkit inittailwindcsswould land indevDependenciesat^4.0.0whiledependenciesalready pins^4.3.3—initonly checks the target field.@tailwindcss/postcssdoes not apply: this repo runs Tailwind through@tailwindcss/vite.scripts.prepare: "husky"+.husky/pre-commiteslint .on every commit; with 72 known violations that blocks all work. Local hooks come after the first cleanup pass. It also breakspnpm install --frozen-lockfileuntil the lockfile is regenerated.src/webkit.csssrc/styles/main.css:3. A second entry would load Tailwind and the theme twice.webkit initlefteslint.config.mjsandpostcss.config.jsuntouched, as designed, and printed the merge snippets instead. The lockfile and every@aziontech/*version are unchanged — deliberately, sincepnpm-workspace.yamlpins the patch to@aziontech/webkit@4.4.0in two places.Two findings for the design system
Both give a false reading on any Astro project, and neither is fixed here:
webkit doctorreportswebkit.css @sourceas FAIL because the check hardcodessrc/webkit.css. This repo registers webkit correctly insrc/styles/main.css. After a plaininitthe check would go green while the generatedsrc/webkit.csssits unused — so it is wrong in both directions.doctor's source scan omits.astro, the same gap as the ESLint preset'sFILES.Verification
pnpm build:local— green, 1628 pages, frontmatter test passespnpm lint:navcheck— green (39 pre-existing warnings)pnpm lint:style— clean; canary confirms the rules fire, including inside.astropnpm lint:webkit && pnpm report:webkit-adoption— reproduces the numbers abovewebkit doctor— 3 fail / 2 warn / 4 ok → 1 fail / 2 warn / 6 ok (the remaining fail is finding 1 above; the warns are the intentionally skipped husky)git diff pnpm-lock.yaml— emptyNot in scope
Making this gate blocking. The flip is a ratchet on changed files — legacy frozen in a baseline, CI failing only when a PR introduces new UI outside the design system. That needs the baseline first, and this PR is what produces it.