split-login

An agent skill that builds a polished split-screen login page as a pure-frontend Vite + React + TypeScript + Tailwind CSS + shadcn/ui app.

• Left column: brand statement (bold static headline, optional character-scramble) + shadcn/ui login form (username, password with visibility toggle, full-width button, helper note). Submit handler is a stub you wire to your auth.
• Right column: 4:5 rounded panel playing a silent looping HD video (single clip or multi-clip montage) matched to your industry, sourced from free-license stock footage (Pexels/Pixabay). Hidden below lg.

What's inside

SKILL.md                 the skill instructions
assets/ScrambleText.tsx  optional monospace glyph-scramble headline component

Install

Copy the folder into your agent's skills directory, e.g.:

mkdir -p ~/.agents/skills
git clone https://github.com/river-walras/split-login.git /tmp/split-login
cp -r /tmp/split-login ~/.agents/skills/split-login

Design decisions baked in

• shadcn official theme by default (neutral palette, near-black primary, --radius: .625rem, Geist) — brand-token research only happens on explicit "make it look like X" requests.
• Per-industry font table verified from production CSS of linear.app (Inter), stripe.com (sohne), shopify.com (Inter/Neue Haas), vogue.com (FB Didot + Garamond), tesla.com (Universal Sans + Fira Code), siemens.com (Siemens Sans) — with free fontsource stand-ins.
• Bot-block-proof video sourcing: Pexels /download/video/<id>/ redirect, video-files URL probing, and playwright-core + system Chrome for Cloudflare-blocked pages.
• ffmpeg montage recipe: HTTP-range trimming (-ss before -i), per-clip subject-aware 4:5 crops, concat, audio stripped, faststart.
• Headlines default to static sans — the scramble effect is opt-in (it reads as a rendering bug to most users).