Apply the uinaf brand identity to anything that ships under the uinaf name — web interfaces, blog posts, changelogs, documentation, READMEs, slides, OG / social images, email, terminal banners, app or product UI starting points. Covers voice, design tokens, components, motion, and brand assets, with a Tailwind v4 path for web work. Use when producing or restyling any uinaf-branded artefact. Skip for non-uinaf work; this is opinionated brand guidance, not a generic UI kit.
98
100%
Does it follow best practices?
Impact
97%
1.67xAverage score across 5 eval scenarios
Passed
No known issues
{
"context": "The agent is asked to build an interactive uinaf-branded page with entry animations and hover/press interactions. This scenario tests whether the agent uses the exact motion specification: specific easing function, duration values, stagger mechanics, sessionStorage replay gating, reduced-motion fallback, and the correct card/logo/link hover patterns.",
"type": "weighted_checklist",
"checklist": [
{
"name": "fade-up-in animation",
"description": "The entry animation moves elements from opacity 0 to 1 AND from translateY(10px) to translateY(0). Both opacity and Y-translation are part of the animation — opacity-only is insufficient.",
"max_score": 8
},
{
"name": "ease-snappy easing function",
"description": "The value cubic-bezier(0.22, 1, 0.36, 1) appears in CSS transitions or animation definitions — not ease, ease-in-out, or any other preset.",
"max_score": 10
},
{
"name": "160ms fast duration",
"description": "Hover and press transitions use a 160ms duration (either as a variable --duration-fast or inline). Not 150ms, 200ms, or a different value.",
"max_score": 8
},
{
"name": "220ms base duration",
"description": "Entry animations use a 220ms duration (either as --duration-base or inline). Not 200ms, 250ms, or a different value.",
"max_score": 8
},
{
"name": "45ms stagger via --stagger-index",
"description": "Animation delay is calculated using a --stagger-index custom property on each animated element (e.g. animation-delay: calc(var(--stagger-index, 0) * 45ms)). The 45ms step value is present.",
"max_score": 10
},
{
"name": "sessionStorage replay gate",
"description": "JavaScript reads and sets the sessionStorage key 'uinaf-entry-motion-seen'. When the key is already set, animations are skipped (elements set to final visible state immediately). The exact key name 'uinaf-entry-motion-seen' must be used.",
"max_score": 12
},
{
"name": "Reduced motion fallback",
"description": "A @media (prefers-reduced-motion: reduce) block removes all transform animations, leaving only an opacity fade. The translateY transform does NOT appear inside this block.",
"max_score": 10
},
{
"name": "Card hover lift and border shift",
"description": "Card hover state applies translateY(-2px) AND shifts border color from neutral-800 to neutral-500. Both effects must be present — lift alone or border-change alone is insufficient.",
"max_score": 8
},
{
"name": "Card ↗ arrow color shift",
"description": "The ↗ glyph inside a card element changes color on card hover (from a muted/dim color such as neutral-600 to a lighter value such as neutral-300). The transition is triggered by the parent card hover, not by hovering the arrow directly.",
"max_score": 8
},
{
"name": "Logo hover: lift + image scale",
"description": "The logo container lifts with translateY(-2px) on hover AND the inner <img> element scales to 1.015. Both effects must be present on the logo — lift alone is insufficient.",
"max_score": 8
},
{
"name": "Press scale(0.97) on :active",
"description": "Cards, links, and/or the logo apply transform: scale(0.97) on :active. At least cards and the logo must have this press state.",
"max_score": 6
},
{
"name": "No backdrop-filter or backdrop-blur",
"description": "The CSS does NOT contain backdrop-filter, -webkit-backdrop-filter, or backdrop-blur anywhere — not on cards, modals, nav, or any other element.",
"max_score": 4
}
]
}