BranchesTags

Repository files navigation

Interface Proof

NodeLicense: MITLocal UI QA

A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.

Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.

Interface Proof report mockup

Problem

AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.

Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.

Features

  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.

Quick Start

npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md

Generate the standalone checklist:

node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md

Example Workflow

  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.

Use With Codex

Tell Codex:

Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:

  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs

Commands Codex should run:

npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md

Expected outputs:

  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.

Codex should not:

  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.

Example Prompts

Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure

interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration

The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:

node src/cli.mjs audit examples/sample-app --threshold 85

Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.

Output Example

review-ready: 88/100 (2 findings)

Markdown reports include:

  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.

Roadmap

  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.

License

MIT. See LICENSE.

About

Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.

Topics

accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Interface Proof
NodeLicense: MITLocal UI QA
A local UI quality gate that helps AI coding agents catch frontend polish, accessibility, and responsive issues before review.
Interface Proof is for developers, indie hackers, AI app builders, and Codex users who generate or refactor frontend code and need a fast sanity gate before asking a human to review screenshots.
Interface Proof report mockup
Problem
AI-generated frontends often look plausible in a single preview but fail in the details: missing labels, icon buttons without names, desktop-only layout, weak focus states, generic card styling, one-note palettes, placeholder copy, and text that breaks on mobile.
Interface Proof gives agents a deterministic pre-review gate so the obvious issues are fixed before visual review.
Features
  • Static audit for HTML, CSS, JSX, TSX, JS, and TS files.
  • Checks accessibility basics: language, alt text, input labels, button names, heading order.
  • Checks responsive readiness: viewport metadata, fluid layout signals, fixed-width traps.
  • Checks polish signals: focus states, negative letter spacing, extreme radii, placeholder copy, one-hue palettes.
  • Generates Markdown or JSON reports with Codex remediation prompts.
  • Includes screenshot review checklist and realistic mockups.
  • No API key, no browser, no runtime dependencies.
Quick Start
npm install
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Generate the standalone checklist:
node src/cli.mjs checklist --out docs/VISUAL_CHECKLIST.md
Example Workflow
  1. Ask Codex to implement or polish a frontend change.
  2. Run Interface Proof against the app or component folder.
  3. Fix the highest-severity findings.
  4. Capture desktop, small-laptop, and mobile screenshots.
  5. Include the report and screenshot notes in the PR or delivery packet.
Use With Codex
Tell Codex:
Read AGENTS.md, docs/USAGE.md, and docs/VISUAL_CHECKLIST.md. Run Interface Proof against the frontend folder, fix the highest-severity findings, then describe which screenshots still need human review.

Files Codex should read first:
  • AGENTS.md
  • docs/USAGE.md
  • docs/VISUAL_CHECKLIST.md
  • docs/PREMIUM_UI_PRINCIPLES.md
  • src/core.mjs
Commands Codex should run:
npm test
node src/cli.mjs audit examples/sample-app --out validation/sample-app-report.md
Expected outputs:
  • UI quality score.
  • Findings with file evidence.
  • Markdown report with remediation prompt.
  • Screenshot checklist for human review.
Codex should not:
  • Replace the design system to satisfy a small finding.
  • Claim visual approval without screenshots.
  • Make broad rewrites when targeted fixes are enough.
Example Prompts
Use Interface Proof to audit this frontend change and fix only the findings that affect accessibility, responsiveness, or obvious polish.

Run the UI quality gate, generate the report, and prepare a screenshot checklist for desktop and mobile review.

Review this AI-generated landing page for generic UI patterns, missing labels, fixed-width layout, and keyboard focus issues.

Folder Structure
interface-proof/
src/ CLI and audit engine
tests/ Node test suite
docs/ Setup, usage, architecture, checklist, roadmap
examples/ Sample app and before/after review notes
validation/ Generated audit reports
screenshots/ Report mockup
mockups/ Example UI mock screenshots

Configuration
The MVP is convention-driven and does not require a config file. Use --threshold to choose the minimum passing score:
node src/cli.mjs audit examples/sample-app --threshold 85
Future versions may support interface-proof.config.json for project-specific design tokens, ignored paths, and scoring weights.
Output Example
review-ready: 88/100 (2 findings)

Markdown reports include:
  • Score and grade.
  • Findings grouped by category.
  • Screenshot review checklist.
  • Codex remediation prompt.
Roadmap
  • Playwright screenshot capture and viewport automation.
  • Optional Lighthouse/axe integration.
  • Design-token config for Tailwind and CSS variables.
  • GitHub Action annotation output.
  • Before/after report comparison.
License
MIT. See LICENSE.
About
Local UI quality gate for AI-coded frontends, accessibility basics, responsive readiness, and visual polish.
Topics
accessibilityai-frontendcodexfrontend-toolslocal-firstui-qualityvisual-qa
Resources
Readme
MIT license
Contributing
Contributing
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages