CSSForge ToolPrivate · Browser-native

CSS Doctor

Paste a component, expose hidden reliability risks, selectively repair its CSS, force product states, and mutate content before users do. Everything runs locally in isolated browser frames.

Reliability score

32/100

Critical

6 findings

Source audit

Unbounded box model

medium

Add border-box sizing so padding and borders cannot silently expand components.

Keyboard focus is undefined

high

Provide a visible :focus-visible treatment for keyboard navigation.

Motion has no reduced-motion fallback

high · L9

Respect prefers-reduced-motion for people who disable non-essential animation.

Large fixed width can overflow

high · L1

Prefer inline-size with a max-inline-size: 100% safeguard.

Content may be clipped

high · L4

Hidden overflow can conceal scaled text, focus rings, or translated content.

Long tokens are unprotected

medium

Add overflow-wrap: anywhere to content-bearing elements.

Fix Diff

Selective repair

Accept only the safe changes you want. Context-dependent findings remain manual by design.

Projected score

32 → 88

Contain the box model

Apply border-box sizing inside the preview root.

.css-doctor-root,
.css-doctor-root *,
.css-doctor-root *::before,
.css-doctor-root *::after {
  box-sizing: border-box;
}

Add resilient keyboard focus

Create a visible focus ring with a forced-colors fallback.

.css-doctor-root :focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .css-doctor-root :focus-visible {
    outline-color: Highlight;
  }
}

Respect reduced motion

Suppress non-essential animation when the user requests it.

@media (prefers-reduced-motion: reduce) {
  .css-doctor-root *,
  .css-doctor-root *::before,
  .css-doctor-root *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Make fixed width fluid

Convert large pixel widths to a bounded logical size.

width: 420px;
/* becomes */
inline-size: min(420px, 100%);

Review intentional clipping

Overflow may be part of the design, so CSSForge will not override it automatically.

Manual review

/* Review overflow: hidden or clip manually. */

Protect against long tokens

Allow long words and URLs to wrap without widening the layout.

.css-doctor-root :where(p, h1, h2, h3, h4, h5, h6, a, button, code) {
  overflow-wrap: anywhere;
}

State Lab

Force interaction and product states without changing your source.

Default state

Normal resting state

Isolated live probe

Content Mutation Engine

Replace polite demo content with the data that breaks real interfaces.

Long token

Adds an unbroken identifier

Isolated live probe

Original vs. hardened

The repair layer adds resilient defaults without rewriting your source.

Original

Isolated live probe

Hardened

Isolated live probe

Chaos Matrix

Five hostile environments run against the hardened version in isolated browser frames.

Narrow viewport

240px content area

Isolated live probe

Scaled text

200% text size

Isolated live probe

Direction flip

English copy in RTL flow

Isolated live probe

Dark surface

Unexpected dark canvas

Isolated live probe

Reduced motion

Motion suppressed

Isolated live probe

Portable audit report

Copy a plain-text snapshot for pull requests, issue trackers, or handoff notes.

Workflow

How to use this tool

01Paste or edit the component HTML and CSS.
02Review the deterministic source audit and reliability score.
03Accept or reject each safe repair in Fix Diff, then apply accepted changes when ready.
04Use State Lab to force hover, focus, disabled, loading, error, and empty states.
05Run hostile content mutations such as long tokens, verbose copy, missing media, and repeated items.
06Compare the original component with the selectively hardened version.
07Inspect the Chaos Matrix for narrow, scaled-text, direction, dark-surface, and reduced-motion conditions.
08Copy the hardened CSS or a portable audit report.
09Save up to 12 projects locally in this browser for later work.

Details

Frequently asked questions

Does CSS Doctor upload my code?

No. Analysis, previews, project storage, and report generation all run locally in your browser.

Is the reliability score a replacement for accessibility testing?

No. It is a fast, deterministic early-warning score. Validate finished interfaces with real browsers, assistive technology, and representative content.