AI Slop Code Risk Monitor

chakra-ui/zag

SlopCodeMonitor badge for chakra-ui/zag Adjusted legacy signal; badge bands: 25 / 50 / 75 (different from dashboard bands).

Build your design system in React, Solid, Vue, Svelte or Vanilla. Powered by finite state machines

0.8 Low pattern signal View on GitHub

Open-Source Code Quality, Security and Technical Debt Review

This report summarizes scanner evidence for chakra-ui/zag, a TypeScript project with 5,246 GitHub stars. SynthScan examined 510,217 lines of code across 2936 source files, recording 358 pattern matches distributed across 5 syntactic categories. The legacy adjusted pattern signal is 0.8 (Low pattern signal); it is not an authorship estimate.

Use the findings to ask whether maintainers can explain intent, verify dependencies, simplify unnecessary scaffolding, and focus review effort. Risk Payload v1 adds ownership, supply-chain, over-engineering, and review-effort vectors when available. These are prompts for human verification, not probabilities, security findings, or measured maintenance costs.

0.8
Adjusted Signal
0.8
Raw Pattern Score
100%
Time Factor
2026-10-31
Last Push
5.2K
Stars
TypeScript
Language
510.2K
Lines of Code
2.9K
Files
358
Pattern Hits
2026-10-31
Scan Date
0.00
HC Hit Rate

Risk Review · Payload v1

Use each vector to guide manual verification of the underlying findings.

Payload schema: 1.0.0 · Engine: 2.0.0 · Scoring: heuristic-density-v1 · Scan date: 2026-10-31.

Cognitive Ownership Risk 0.5/100 · LOW

Can maintainers explain intent, assumptions, and trade-offs? 51 finding(s).

Hallucinated Dependency & Supply Chain Risk 3.3/100 · LOW

Are imports declared and package/API names verified? 299 finding(s).

Agent Over-Engineering Ratio 0.6/100 · LOW

Are wrappers, guards, and repeated structures necessary? 49 finding(s).

PR Review Velocity Impact 3.6/100 · LOW

Which changes need focused human review? 358 finding(s).

What These Metrics Mean

Adjusted Signal
Legacy pattern score normalized per 1,000 scanned lines and multiplied by the repository-level time factor. It is not an estimate of AI authorship.
Raw Pattern Score
Sum of severity- and context-weighted pattern findings before applying the time factor.
Time Factor
A coarse multiplier based on repository last-push metadata. It does not identify when individual code was written.
Pattern Hits
Count of configured pattern findings. Review each location and surrounding code before acting.
HC Hit Rate
High- and critical-severity findings per scanned file. Severity is a configured detector weight, not proof of a vulnerability or authorship.
Lines / Files
Scan coverage denominators used by the legacy normalized score.

Pattern-Signal History

This chart tracks the legacy adjusted pattern score across scan runs. Changes can reflect source changes, scan coverage, or detector/scoring versions; they do not measure AI adoption or prove that a team refactored code. Compare runs only when their scoring versions are compatible. The dashed line tracks the raw pattern-hit count.

Severity Breakdown

Groups findings by configured severity weight. Severity is not a confidence estimate, security rating, or proof that a package is missing. Verify imports against the project's manifests and inspect each finding in its local design context.

CRITICAL 0HIGH 0MEDIUM 8LOW 350

Directory Score Breakdown

This horizontal bar chart shows where configured pattern scores accumulate across directories. Treat the bars as locations to inspect, not as evidence of authorship or code quality. Use the file-level findings to decide whether a directory needs a focused ownership, dependency, complexity, or review check.

Pattern Findings

The scanner identified 358 distinct pattern matches across 5 syntactic categories. Each entry below represents a discrete location in the source code where the engine recorded a detector match to inspect in context. Expand any category row to inspect the individual file paths, line numbers, code snippets, and the lexical context (CODE, COMMENT, or STRING) in which each match was detected.

Reading the findings table: The Severity column indicates the configured finding weight (CRITICAL / HIGH / MEDIUM / LOW). The Context column identifies whether the match occurred inside executable code, an inline comment, or a string literal — legacy comment-context matches receive a ×1.5 score weight. The ⚡ bolt icon marks clustered matches: three or more patterns within a 10-line window, each receiving an additional ×1.5 density multiplier under the legacy scoring model.

Fake / Example Data299 hits · 339 pts
SeverityFileLineSnippetContext
LOW⚡starters/react/app/accordion/collapsible/page.tsx15 title: "Lorem Ipsum",CODE
LOW⚡starters/react/app/accordion/collapsible/page.tsx17 Lorem ipsum dolor sit amet, consectetur adipiscing elit.CODE
LOW⚡starters/react/app/accordion/collapsible/page.tsx17 Lorem ipsum dolor sit amet, consectetur adipiscing elit.CODE
LOWstarters/react/app/collapsible/controlled/page.tsx25 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWstarters/react/app/collapsible/controlled/page.tsx25 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWstarters/react/app/collapsible/uncontrolled/page.tsx12 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWstarters/react/app/collapsible/uncontrolled/page.tsx12 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWwebsite/demos/collapsible.tsx25 Lorem dfd dolor sit amet, consectetur adipiscing elit, sed do eiusmodCODE
LOWshared/src/data.ts362 name: "John Doe",CODE
LOWshared/src/data.ts368 street: "123 Main St",CODE
LOW…amples/svelte-ts/src/routes/toc/indicator/+page.svelte46 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore etCODE
LOW…amples/svelte-ts/src/routes/toc/indicator/+page.svelte46 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore etCODE
LOW…es/svelte-ts/src/routes/toc/long-sections/+page.svelte46 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore etCODE
LOW…es/svelte-ts/src/routes/toc/long-sections/+page.svelte46 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore etCODE
LOWexamples/svelte-ts/src/routes/toc/basic/+page.svelte45 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore etCODE
LOWexamples/svelte-ts/src/routes/toc/basic/+page.svelte45 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore etCODE
LOW…ples/svelte-ts/src/routes/accordion/basic/+page.svelte31 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOW…ples/svelte-ts/src/routes/accordion/basic/+page.svelte31 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte63 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte63 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte65 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,CODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte65 clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,CODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte68 takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sedCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte68 takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sedCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte70 accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsumCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte71 dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, velCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte73 luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuerCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte73 luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuerCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte79 eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sitCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte84 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolorCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte84 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolorCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte87 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, conseteturCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte87 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, conseteturCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte90 voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte90 voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte93 accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsumCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte94 dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte94 dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte96 dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. LoremCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte96 dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. LoremCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte97 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et doloreCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte99 kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte99 kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diamCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte101 accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsumCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte102 dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte102 dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte104 dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. LoremCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte104 dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. LoremCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte105 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et doloreCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte107 kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor inCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte107 kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor inCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte110 nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte110 nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismodCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte116 quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamCODE
LOW⚡…velte-ts/src/routes/dialog/scroll-outside/+page.svelte116 quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamCODE
LOWexamples/svelte-ts/src/routes/popover/perf/+page.svelte75 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWexamples/svelte-ts/src/routes/popover/perf/+page.svelte75 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et doloreCODE
LOW…es/svelte-ts/src/routes/collapsible/basic/+page.svelte33 Lorem dfd dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWexamples/svelte-ts/src/routes/tour/basic/+page.svelte36 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et doloreCODE
LOWexamples/svelte-ts/src/routes/tour/basic/+page.svelte36 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et doloreCODE
239 more matches not shown…
Hyper-Verbose Identifiers41 hits · 41 pts
SeverityFileLineSnippetContext
LOWwebsite/velite.config.ts13function transformTocToLegacyFormat(CODE
LOWwebsite/lib/component-llm.ts45export function getComponentsPerFramework(framework: string) {CODE
LOWexamples/next-ts/lib/emoji-loader.ts243export function getEmojibaseSkinToneVariations(CODE
LOW…amples/next-ts/pages/context-menu/multiple-trigger.tsx23export default function ContextMenuMultipleTrigger() {CODE
LOW…s/next-ts/pages/dialog/multiple-trigger-controlled.tsx23export default function DialogMultipleTriggerControlled() {CODE
LOWexamples/preact-ts/src/lib/emoji-loader.ts243export function getEmojibaseSkinToneVariations(CODE
LOW…/preact-ts/src/pages/context-menu/multiple-trigger.tsx23export default function ContextMenuMultipleTrigger() {CODE
LOW…ct-ts/src/pages/dialog/multiple-trigger-controlled.tsx23export default function DialogMultipleTriggerControlled() {CODE
LOW…d-ts/src/routes/dialog/multiple-trigger-controlled.tsx24export default function DialogMultipleTriggerControlled() {CODE
LOWscripts/css-vars.ts221function extractCSSVariablesFromConnect(filePath: string, project: Project): CSSVariable[] {CODE
LOWscripts/css-vars.ts282function extractCSSVariablesFromStyle(filePath: string, project: Project): CSSVariable[] {CODE
LOWscripts/css-vars.ts324function extractCSSVariablesFromUtility(filePath: string, project: Project): CSSVariable[] {CODE
LOWscripts/css-vars.ts431async function findComponentsUsingDependency(dependencyName: string): Promise<string[]> {CODE
LOWpackages/core/src/state.ts17function isExplicitAbsoluteStatePath(value: string) {CODE
LOWpackages/utilities/popper/src/middleware.ts28export function createTransformOriginMiddleware(CODE
LOWpackages/utilities/popper/src/get-placement.ts153function hideWhenDetachedMiddleware(opts: Options) {CODE
LOWpackages/utilities/popper/src/get-placement.ts271 function rebuildMiddlewareForFloating(floating: HTMLElement) {CODE
LOWpackages/utilities/dom-query/src/mutation-observer.ts35export function createSharedMutationObserver(options: MutationObserverInit): SharedMutationObserver {CODE
LOWpackages/utilities/dom-query/src/resize-observer.ts11function createSharedResizeObserver(options?: ResizeObserverOptions): SharedResizeObserver {CODE
LOWpackages/utilities/dom-query/src/form.ts69export function dispatchInputCheckedEvent(el: HTMLInputElement | null, options: CheckedEventOptions) {CODE
LOWpackages/utilities/dom-query/src/overflow.ts6export function getNearestOverflowAncestor(el: Node): HTMLElement {CODE
LOWpackages/utilities/dom-query/src/tabbable.ts68function collectElementsWithShadowDOM(CODE
LOWpackages/utilities/dom-query/src/controller.ts131export function isInteractiveContainerElement(element: Element): boolean {CODE
LOWpackages/utilities/dom-query/src/controller.ts154export function isControlledByExpandedController(element: Element): boolean {CODE
LOWpackages/utilities/dom-query/src/proxy-tab-focus.ts21function getNextTabbableAfterTrigger(CODE
LOW…ges/utilities/dismissable/src/pointer-event-outside.ts19function ensurePointerEventsObserver(node: HTMLElement) {CODE
LOW…ges/utilities/dismissable/src/pointer-event-outside.ts31export function assignPointerEventToLayers() {CODE
LOW…ges/utilities/dismissable/src/pointer-event-outside.ts47export function disablePointerEventsOutside(node: HTMLElement, persistentElements?: Array<() => Element | null>) {CODE
LOWpackages/utilities/dismissable/src/dismissable-layer.ts78function trackDismissableElementImpl(node: HTMLElement, options: DismissableElementOptions) {CODE
LOWpackages/machines/drawer/src/drawer.dom.ts58export function isPointerWithinContentOrSwipeArea(CODE
LOWpackages/machines/drawer/src/utils/drawer-session.ts501function isWithinDrawerInteractionSurface(CODE
LOWpackages/machines/drawer/src/utils/drawer-session.ts564function findClosestScrollableAncestorOnSwipeAxis(CODE
LOWpackages/machines/drawer/src/utils/drawer-session.ts678function isDragExemptFromComposedPath(CODE
LOWpackages/machines/drawer/src/utils/drawer-session.ts692export function shouldIgnorePointerDownForDrag(event: JSX.PointerEvent<HTMLElement>, axis?: GestureAxis): boolean {CODE
LOWpackages/machines/slider/src/slider.dom.ts57function getRelativePointWithInset(point: Point, element: HTMLElement, inset: number) {CODE
LOWpackages/machines/menu/src/menu.utils.ts41function isHighlightedItemSubmenuOpen(parent: MenuService): boolean {CODE
LOWpackages/machines/menu/src/menu.utils.ts53export function unlockParentAfterChildClose(parent: MenuService | null | undefined, childIsSubmenu: boolean) {CODE
LOWpackages/machines/menu/src/menu.utils.ts60export function unlockParentOnSubmenuClose(parent: MenuService | null | undefined) {CODE
LOWpackages/machines/tour/src/tour.machine.ts629function syncTargetAttrsFromContext(params: {CODE
LOW…chines/color-picker/src/utils/get-slider-background.ts3function getSliderBackgroundDirection(CODE
LOWpackages/machines/image-cropper/src/utils/transform.ts56export function getNaturalToViewportMatrix(params: Omit<CropExportParams, "crop">): Matrix {CODE
Decorative Section Separators8 hits · 24 pts
SeverityFileLineSnippetContext
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts45 // ─── Basic modifier chords ───────────────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts109 // ─── Single key shortcuts ───────────────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts154 // ─── Function keys ──────────────────────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts185 // ─── Key sequences ──────────────────────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts266 // ─── Multiple shortcuts coexisting ──────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts321 // ─── Arrow key combos ──────────────────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts348 // ─── Special symbols / punctuation ─────────────────────────COMMENT
MEDIUMpackages/utilities/hotkeys/tests/smoke.test.ts376 // ─── Negative cases (should NOT fire) ──────────────────────COMMENT
Structural Annotation Overuse5 hits · 8 pts
SeverityFileLineSnippetContext
LOW.claude/agents/component-docs-writer.md56### Step 1: Gather source truthCOMMENT
LOW.claude/agents/component-docs-writer.md68### Step 2: Find gaps and inaccuraciesCOMMENT
LOW.claude/agents/component-docs-writer.md78### Step 3: Rewrite with scenario-first structureCOMMENT
LOW.claude/agents/component-docs-writer.md94### Step 4: Enforce phrasing consistencyCOMMENT
LOW.claude/agents/component-docs-writer.md103### Step 5: Verify and formatCOMMENT
Over-Commented Block5 hits · 5 pts
SeverityFileLineSnippetContext
LOWexamples/svelte-ts/src/vite-env.d.ts1/// <reference types="svelte" />COMMENT
LOWpackages/utilities/hotkeys/README.md61// Parse simple hotkeyCOMMENT
LOWpackages/utilities/focus-trap/src/focus-trap.ts341 nextNode = tabbableNodes[mruTabIdx - 1]COMMENT
LOWe2e/date-picker.e2e.ts181 // await I.clickDayCell(5)COMMENT
LOWe2e/color-picker.e2e.ts101COMMENT