Skip to content

ucca.online — Technical Excellence Brief

"Who the fuck built this."

Classification: Standards Compliance & Performance Audit

Author: UCCA Platform / Tim Rignold

Date: 2026-03-08

Target: ucca-surfaces / apps/marketing

OBJECTIVE

This brief is not about features. It is about the signal the codebase sends to the person who views source.

The target reader of ucca.online includes engineers, defence procurement technical advisors, and enterprise architects who will open devtools before they read the copy. This brief ensures that when they do, they find a codebase that is more rigorous than anything they have seen deployed in production.

Every item in this brief is intentional. Every standard is current. Several of these APIs have shipped in browsers within the last 18 months and are almost never seen correctly deployed in production.

The website is the first capability object. It must meet the same standard as the product it represents.

LAYER 1 — PERFORMANCE

"Lighthouse 100 across all four. Not 98. 100."

1.1 Core Web Vitals targets

Metric Target Current Notes
LCP < 1.2s TBD Largest Contentful Paint
CLS 0.00 TBD Cumulative Layout Shift
FID/INP < 50ms TBD Interaction to Next Paint
TTFB < 200ms TBD Cloudflare Pages edge
FCP < 0.8s TBD First Contentful Paint
TBT < 150ms TBD Total Blocking Time

Run Lighthouse against production and report current scores before starting any work. Baseline first.

1.2 Critical CSS inline

Extract all above-the-fold CSS and inline it in <head>. Everything else deferred.

<head>
  <!-- Critical CSS inline — no render block -->
  <style>
    /* nav, hero, first viewport only */
    /* generated by critical-css extraction */
  </style>

  <!-- Everything else deferred -->
  <link rel="preload" href="/css/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="/css/main.css">
  </noscript>
</head>

Tool: Use critical npm package or equivalent to extract. Critical CSS must be regenerated on every deploy.

1.3 Resource hints — every asset

<!-- DNS prefetch for nothing — zero third party requests -->
<!-- We don't need this. That's the point. -->

<!-- Preconnect to self only -->
<link rel="preconnect" href="https://ucca.online">

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/IBMPlexMono-Regular.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/IBMPlexSans-Regular.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/IBMPlexSans-Bold.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- Prefetch language CSS on hover over language toggle -->
<!-- Not on page load. On hover. Anticipatory. -->

1.4 Font loading — font-display: optional

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-display: optional;  /* NOT swap. optional. */
  /* optional = use if loaded in time,
     otherwise use fallback forever.
     Zero layout shift. Zero FOUT.
     The correct choice for a site
     where CLS must be zero. */
}

font-display: swap causes CLS. optional does not. Use optional on all IBM Plex declarations.

Size-adjust the fallback to match IBM Plex metrics exactly: 

@font-face {
  font-family: 'IBM Plex Mono Fallback';
  src: local('Courier New');
  size-adjust: 98.3%;
  ascent-override: 91%;
  descent-override: 24%;
  line-gap-override: 0%;
}

This eliminates the fallback→loaded font layout shift entirely.

1.5 Image optimisation

Every image on the page:

  • WebP with AVIF fallback using <picture>
  • Explicit width and height attributes (prevents CLS)
  • loading="lazy" on all below-fold images
  • fetchpriority="high" on the LCP image only
  • decoding="async" on all images
<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg"
       width="1200" height="630"
       fetchpriority="high"
       decoding="sync"
       alt="UCCA capability verification infrastructure">
</picture>

1.6 HTTP/3 + Early Hints

Cloudflare Pages supports both. Verify both are active.

Early Hints (103): 

HTTP/1.1 103 Early Hints
Link: </fonts/IBMPlexMono-Regular.woff2>; rel=preload; as=font
Link: </css/main.css>; rel=preload; as=style

Cloudflare Pages enables Early Hints in dashboard settings. Verify it is ON. It is OFF by default.

HTTP/3: Cloudflare enables automatically. Verify via: curl -I --http3 https://ucca.online

1.7 Brotli compression

Cloudflare compresses automatically but verify: curl -H "Accept-Encoding: br" -I https://ucca.online Response must include: content-encoding: br

For the static build output — ensure no already-compressed assets are being double-compressed.

1.8 content-visibility: auto

Apply to every major section that is below the fold. This skips rendering of off-screen content entirely until the user scrolls toward it.

.section-frontiers,
.section-security,
.section-primitives,
.section-manifesto,
.section-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px; /* estimated height */
}

This is one of the highest-impact performance properties available in CSS today. Correctly deployed it can cut rendering time by 50%+ on long pages. Almost never seen in production.

1.9 Speculation Rules API

Prefetch and prerender next likely navigations before the user clicks:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/privacy" },
      "eagerness": "moderate"
    },
    {
      "where": { "href_matches": "/terms" },
      "eagerness": "moderate"
    }
  ]
}
</script>

The Speculation Rules API is the successor to <link rel="prefetch">. Shipped Chrome 109+. Almost nobody uses it correctly in production yet.

LAYER 2 — STANDARDS

"Every API used as the spec intended."

2.1 Replace ALL setInterval / setTimeout animations

Every animation currently driven by setInterval or setTimeout must be replaced with the correct API.

Flip board / Solari cells: Use requestAnimationFrame with a timestamp delta, not setInterval.

let lastFlip = 0
const FLIP_INTERVAL = 4000 // ms

function tick(timestamp) {
  if (timestamp - lastFlip >= FLIP_INTERVAL) {
    lastFlip = timestamp
    triggerFlip()
  }
  requestAnimationFrame(tick)
}
requestAnimationFrame(tick)

Sprite timing (Susuwatari): Use scheduler.postTask() for the 5-minute trigger. This is the correct API for scheduling non-urgent work that should not block the main thread.

// scheduler.postTask() — shipped Chrome 94+
// Almost never seen in production
await scheduler.postTask(() => {
  triggerSusuwatari()
}, {
  delay: 300000,  // 5 minutes
  priority: 'background'
})

Fallback for browsers without scheduler: 

const scheduleTask = (fn, delay, priority = 'background') => {
  if ('scheduler' in window) {
    scheduler.postTask(fn, { delay, priority })
  } else {
    setTimeout(fn, delay)
  }
}

Clock updates: Use requestAnimationFrame synced to the second boundary, not setInterval(fn, 1000).

function syncToSecond() {
  const now = Date.now()
  const msUntilNextSecond = 1000 - (now % 1000)
  setTimeout(() => {
    updateClock()
    requestAnimationFrame(syncToSecond)
  }, msUntilNextSecond)
}
syncToSecond()

This keeps the clock pixel-perfect in sync with the system second boundary. setInterval drifts. This doesn't.

2.2 Replace ALL scroll listeners with IntersectionObserver

No window.addEventListener('scroll', ...) anywhere. Every scroll-triggered behaviour uses IntersectionObserver.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in-view')
      // Unobserve after first trigger if animation
      // should only play once
      observer.unobserve(entry.target)
    }
  })
}, {
  threshold: 0.15,  // 15% visible before triggering
  rootMargin: '0px 0px -50px 0px'
})

document.querySelectorAll('[data-animate]')
  .forEach(el => observer.observe(el))

The traveling compliance tab position: Use IntersectionObserver on the footer to know when to stop the tab traveling. Not a scroll listener.

2.3 Replace ALL resize listeners with ResizeObserver

No window.addEventListener('resize', ...) anywhere. Use ResizeObserver on the specific elements that need to respond to size changes.

const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width } = entry.contentRect
    // respond to this specific element's size change
    recalculateSolariCells(width)
  }
})
ro.observe(document.querySelector('.solari-board'))

2.4 prefers-reduced-motion — respected everywhere

Every animation on the page must check this. Not just the hero animation. Every animation.

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

And in JavaScript: 

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches

// Solari board — static if reduced motion
if (prefersReducedMotion) {
  showStaticBoard()
} else {
  startFlipAnimation()
}

// Susuwatari — never appears if reduced motion
if (!prefersReducedMotion) {
  scheduleTask(triggerSusuwatari, 300000, 'background')
}

Listen for runtime changes too (user can change this setting while the page is open): 

window.matchMedia('(prefers-reduced-motion: reduce)')
  .addEventListener('change', e => {
    if (e.matches) stopAllAnimations()
    else restartAnimations()
  })

2.5 Semantic HTML audit — zero div soup

Run a full semantic audit. Every element must be the correct semantic element.

<!-- WRONG -->
<div class="nav">
  <div class="nav-item">About</div>
</div>

<!-- RIGHT -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Required semantic elements audit:

  • <header> wraps site header
  • <nav> with aria-label for every navigation
  • <main> wraps primary content — ONE per page
  • <section> for each named section with aria-labelledby
  • <article> for self-contained content blocks
  • <aside> for the compliance slide-out panel
  • <footer> wraps site footer
  • <h1> through <h6> — correct hierarchy, no skips
  • <button> for every interactive element that isn't a link
  • <a> only for actual navigation (href present)
  • <time datetime="2026-03-08"> for the UTC clock

The terminal block: 

<figure role="img" aria-label="UCCA Engine status display">
  <pre aria-hidden="true">
    <!-- terminal content -->
  </pre>
</figure>

The Solari/flip board: 

<div role="region"
     aria-label="Language display board"
     aria-live="polite"
     aria-atomic="true">

2.6 ARIA — correct, not performative

ARIA only where native semantics are insufficient. First rule of ARIA: don't use ARIA if native HTML does the job.

Required ARIA audit:

<!-- Language toggle -->
<button
  aria-expanded="false"
  aria-haspopup="listbox"
  aria-label="Select language, currently English">
  English
</button>

<!-- Compliance slide-out -->
<aside
  id="compliance-panel"
  aria-label="Compliance register"
  aria-hidden="true"
  role="complementary">

<!-- Compliance tab trigger -->
<button
  aria-controls="compliance-panel"
  aria-expanded="false"
  aria-label="Open compliance register">
  COMPLIANCE
</button>

<!-- Status indicator -->
<span role="status" aria-live="polite">
  SYSTEM OPERATIONAL
</span>

<!-- UTC clock -->
<time
  datetime="2026-03-08T08:45:16Z"
  aria-live="off"
  aria-label="Current UTC time">
  08:45:16
</time>

Focus management:

  • When compliance panel opens: focus moves to panel
  • When compliance panel closes: focus returns to trigger button
  • Escape key closes panel
  • Tab trap inside open modal/panel

2.7 lang and dir — dynamic and correct

On every language change: 

document.documentElement.lang = locale
// e.g. 'ja', 'ar', 'de', 'fr', 'vi', 'ko', 'zh-TW'

document.documentElement.dir =
  locale === 'ar' ? 'rtl' : 'ltr'

This enables:

  • Browser-native hyphenation (hyphens: auto requires this)
  • Screen reader language switching
  • Correct quotation marks per locale
  • Search engine locale signals

Also set on the <html> element in the initial render for the default language (English): 

<html lang="en" dir="ltr">

2.8 Meta tags — complete and correct

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1,
                 viewport-fit=cover">
  <!-- viewport-fit=cover for iPhone notch/island -->

  <title>UCCA — Capability Verification Infrastructure</title>
  <meta name="description"
        content="The infrastructure layer that verifies what
                 people, agents, and machines can actually do.
                 Binary. Immutable. Auditable.">

  <!-- Canonical -->
  <link rel="canonical" href="https://ucca.online">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://ucca.online">
  <meta property="og:title"
        content="UCCA — Capability Verification Infrastructure">
  <meta property="og:description"
        content="Binary. Immutable. Auditable.">
  <meta property="og:image" content="https://ucca.online/og.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <!-- Twitter/X card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title"
        content="UCCA — Capability Verification Infrastructure">
  <meta name="twitter:description"
        content="Binary. Immutable. Auditable.">
  <meta name="twitter:image" content="https://ucca.online/og.png">

  <!-- Theme color — matches UCCA dark background -->
  <meta name="theme-color" content="#0a0a0a"
        media="(prefers-color-scheme: dark)">
  <meta name="theme-color" content="#0a0a0a"
        media="(prefers-color-scheme: light)">

  <!-- Apple specific -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style"
        content="black-translucent">

  <!-- Robots -->
  <meta name="robots" content="index, follow">

  <!-- No translation by browser — we handle this ourselves -->
  <meta name="google" content="notranslate">
</head>

OG image: Create a proper 1200x630 OG image. Dark background. UCCA mark. "Capability Verification Infrastructure." This is what appears when someone shares the link in Slack or iMessage. Currently missing or generic — fix it.

LAYER 3 — THE DETAILS NOBODY DOES

"I've never seen this deployed correctly in production."

3.1 View Transitions API — language toggle

When the user switches language, the page content transitions instead of snapping.

This is the correct modern approach. Not a fade with CSS. The View Transitions API — shipped Chrome 111+, Safari 18+. Almost never seen in production.

async function switchLanguage(locale) {
  if (!document.startViewTransition) {
    // Fallback for unsupported browsers
    applyLanguage(locale)
    return
  }

  await document.startViewTransition(() => {
    applyLanguage(locale)
  })
}

CSS for the transition: 

/* Custom transition — not the default cross-fade */
::view-transition-old(root) {
  animation: 120ms cubic-bezier(0.4, 0, 1, 1) both
             vt-fade-out;
}
::view-transition-new(root) {
  animation: 160ms cubic-bezier(0, 0, 0.2, 1) 80ms both
             vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

The terminal block should NOT transition — it's persistent: 

.terminal-block {
  view-transition-name: terminal;
}
::view-transition-old(terminal),
::view-transition-new(terminal) {
  animation: none; /* terminal persists across language change */
}

3.2 CSS Scroll-Driven Animations

Replace JavaScript scroll-triggered animations with pure CSS scroll-driven animations. Shipped Chrome 115+. The spec almost nobody has deployed correctly in production.

/* Section fade-in on scroll — zero JavaScript */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-frontiers,
.section-security,
.section-primitives {
  animation: fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* Progress indicator — if we add one */
.scroll-progress {
  animation: grow-width linear;
  animation-timeline: scroll(root);
  transform-origin: left;
}

@keyframes grow-width {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

Fallback: wrap in @supports: 

@supports (animation-timeline: scroll()) {
  /* scroll-driven animations */
}

For browsers that don't support it, the IntersectionObserver approach from Layer 2 remains as the fallback.

3.3 CSS @property — typed custom properties

Define all CSS custom properties with types. This enables animation of values that CSS cannot normally animate (colours, gradients) and catches type errors at parse time.

@property --ucca-green {
  syntax: '<color>';
  inherits: true;
  initial-value: #00ff88;
}

@property --terminal-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@property --flip-progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

This allows animating --ucca-green through a colour transition — something impossible with untyped custom properties.

3.4 Houdini Paint Worklet — terminal background

Replace the terminal background texture (if canvas-based) with a CSS Paint Worklet. Renders in the browser's paint thread — not the main thread. Zero jank.

// terminal-grain.js — Paint Worklet
registerPaint('terminal-grain', class {
  static get inputProperties() {
    return ['--grain-opacity', '--grain-size']
  }

  paint(ctx, size, props) {
    const opacity = props.get('--grain-opacity') || 0.03
    const grainSize = props.get('--grain-size') || 1

    for (let x = 0; x < size.width; x += grainSize) {
      for (let y = 0; y < size.height; y += grainSize) {
        if (Math.random() > 0.5) {
          ctx.fillStyle = `rgba(0, 255, 136, ${opacity})`
          ctx.fillRect(x, y, grainSize, grainSize)
        }
      }
    }
  }
})

/* Register worklet */
.terminal-block {
  background-image: paint(terminal-grain);
  --grain-opacity: 0.025;
  --grain-size: 1;
}

// Register in main thread
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('/worklets/terminal-grain.js')
}

Fallback: solid background colour for unsupported browsers.

3.5 scheduler.postTask() — priority-aware scheduling

Already mentioned for Susuwatari. Apply universally.

Three priority levels — use correctly: 

// user-blocking — for responses to user input
// must complete before next frame
scheduler.postTask(updateClock, { priority: 'user-blocking' })

// user-visible — for animations and visible updates
// important but not input-critical
scheduler.postTask(updateEventBoard, { priority: 'user-visible' })

// background — for non-urgent work
// Susuwatari, analytics, prefetching
scheduler.postTask(triggerSusuwatari, {
  priority: 'background',
  delay: 300000
})

3.6 document.fonts.ready — flash of unstyled text

Wait for fonts before running any text-based animations. IBM Plex Mono must be loaded before the terminal animation starts.

// Wait for critical fonts before starting terminal animation
await document.fonts.ready

// Now safe to start — no FOUT in animation
startTerminalAnimation()

For font-dependent layout measurements: 

await document.fonts.load('1rem IBM Plex Mono')
// Now measure text widths for Solari cell sizing
measureAndInitialiseSolariBoard()

3.7 Safe area insets — iPhone notch / Dynamic Island

/* The nav must not be obscured by the notch */
.site-nav {
  padding-top: max(1rem, env(safe-area-inset-top));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

/* Footer must not be obscured by home indicator */
.site-footer {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* The traveling compliance tab */
.compliance-tab {
  bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
}

Requires viewport-fit=cover in the viewport meta tag (see 2.8).

3.8 Pointer and hover capability detection

Don't assume touch = mobile or mouse = desktop. Detect actual input capabilities.

/* Hover effects only for devices that can hover */
@media (hover: hover) and (pointer: fine) {
  .compliance-tab:hover {
    /* hover state */
  }

  .cta-button:hover {
    /* hover state */
  }
}

/* Touch-optimised targets for coarse pointers */
@media (pointer: coarse) {
  .cta-button {
    min-height: 48px;  /* WCAG 2.5.5 target size */
    min-width: 48px;
  }

  .language-toggle {
    min-height: 44px;
  }
}

3.9 fetchpriority — complete audit

Every fetch on the page must have correct priority:

<!-- Hero font — high -->
<link rel="preload"
      href="/fonts/IBMPlexSans-Bold.woff2"
      as="font"
      fetchpriority="high">

<!-- LCP image — high -->
<img fetchpriority="high" src="/img/hero.webp" ...>

<!-- Below fold images — low -->
<img fetchpriority="low" loading="lazy" src="/img/...">

In JavaScript: 

// High priority API call (clock sync)
fetch('/api/time', { priority: 'high' })

// Low priority (prefetch language CSS)
fetch(`/css/lang/${locale}.css`, { priority: 'low' })

3.10 Structured data — JSON-LD

Add schema.org structured data. Not for SEO vanity — for correctness. The kind of thing that signals a team that thinks about the whole stack.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "U.C.C.A. Inc",
  "alternateName": "Universal Capability Certification Authority",
  "url": "https://ucca.online",
  "logo": "https://ucca.online/ucca-mark.svg",
  "foundingDate": "2017",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1207 Delaware Ave #1678",
    "addressLocality": "Wilmington",
    "addressRegion": "DE",
    "postalCode": "19806",
    "addressCountry": "US"
  },
  "sameAs": [],
  "description": "Capability verification infrastructure. Binary. Immutable. Auditable."
}
</script>

3.11 performance.mark() — instrumentation

Add performance marks at key moments. Visible in devtools Performance tab. When an engineer opens devtools they see named marks — intentional, documented instrumentation. Not an accident. A choice.

performance.mark('ucca:terminal-init-start')
await document.fonts.ready
performance.mark('ucca:fonts-ready')
startTerminalAnimation()
performance.mark('ucca:terminal-init-end')

performance.measure(
  'ucca:terminal-init',
  'ucca:terminal-init-start',
  'ucca:terminal-init-end'
)

// Visible in devtools as named spans
// The engineer sees: ucca:terminal-init — 12ms
// They think: these people instrument their code.

3.12 Error boundaries — nothing breaks silently

Every animation, every API call, every dynamic feature must have an error boundary.

class AnimationController {
  constructor() {
    this.fallbackMode = false
  }

  async init() {
    try {
      await this.startFlipAnimation()
    } catch (err) {
      // Log but never surface to user
      console.warn('[UCCA] Animation init failed,
                    using static fallback:', err)
      this.fallbackMode = true
      this.showStaticBoard()
    }
  }
}

The page must never show a broken state to any visitor. Static fallback for every dynamic feature. Silent degradation. Always.

AUDIT CHECKLIST

Alex must run and report results on every item before marking this brief complete.

Performance

  • Lighthouse Performance: 100
  • Lighthouse Accessibility: 100
  • Lighthouse Best Practices: 100
  • Lighthouse SEO: 100
  • LCP < 1.2s (mobile)
  • CLS = 0.00
  • INP < 50ms
  • HTTP/3 confirmed active
  • Early Hints 103 confirmed active
  • Brotli confirmed active
  • Zero third-party requests
  • Critical CSS inlined
  • All fonts: font-display: optional
  • content-visibility: auto on all below-fold sections

Standards

  • Zero setInterval / setTimeout driving animations
  • Zero window.scroll listeners
  • Zero window.resize listeners
  • prefers-reduced-motion respected — all animations
  • prefers-reduced-motion change event listener active
  • Semantic HTML audit passed — zero div soup
  • ARIA audit passed
  • Focus management correct on all modals/panels
  • lang attribute set dynamically on language change
  • dir attribute set dynamically on language change
  • All meta tags complete (see 2.8)
  • OG image created and live
  • viewport-fit=cover set

The Details Nobody Does

  • View Transitions API on language toggle
  • CSS Scroll-Driven Animations on sections
  • @property typed custom properties
  • scheduler.postTask() for all non-urgent work
  • document.fonts.ready awaited before animation
  • Safe area insets on nav, footer, compliance tab
  • Pointer/hover media queries on all interactive elements
  • fetchpriority audit complete
  • JSON-LD structured data live
  • performance.mark() instrumentation in place
  • Error boundaries on all dynamic features

SURFACE & DEPLOY

SURFACE: ucca.online (ucca-surfaces repo)
DO NOT touch ucca-engine, ops console,
time.ucca.online, or any other surface.

Work through each layer in order.
Run Lighthouse baseline FIRST —
report scores before starting.

Commit per layer:
perf: layer 1 — core web vitals and
      critical rendering path
standards: layer 2 — semantic HTML,
           ARIA, motion, observers
feat: layer 3 — modern APIs and
      the details nobody does

Full checklist must be complete and
reported before this brief is closed.

"If their website is built like this, what does their engine look like."

The answer is: the same. Because it's the same team. Same philosophy. Same standard.

Binary. Immutable. Auditable. Applies to the code.

Version History

Version Date Change Author
1.0 2026-03-08 Initial creation from engineering brief Tim Rignold