CtrlK
BlogDocsLog inGet started
Tessl Logo

uinaf/uinaf-design-system

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

1.67x
Quality

100%

Does it follow best practices?

Impact

97%

1.67x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-1/

{
  "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
    }
  ]
}

evals

scenario-1

criteria.json

task.md

SKILL.md

tile.json