isekai

name	isekai
description	Agency-grade ($10,000+) website building. Use for ANY website, landing page, portfolio, marketing site, or web app UI — whenever the user asks to build, redesign, or improve a web page, even if they don't mention design. Kills the default AI-website look; motion-native (framer-motion scroll animations), image-rich (people don't read), typography-correct, 5th-grader-clear UX.

Motion Web — no more default AI websites

Every page must look like a $10,000+ agency build. "Acceptable" is failure.

Companion skills

This skill covers visual design and motion only. For interactive components (forms, dialogs, tables, dropdowns), compose them from the shadcn skill instead of hand-rolling markup — real accessible primitives, styled to match the locked palette/type from this skill's tokens. The moment a build needs accounts, a database, file uploads, or an actual deploy, switch to the isekai-backend skill — a gorgeous static page with no working signup form is not a $10k build, it's a mockup.

BANNED (the default AI look — never ship any of these)

• Centered hero + 3 feature cards in a grid + emoji icons
• bg-gradient-to-r from-purple-500 to-pink-500 and all purple/indigo-on-white defaults
• Same rounded-xl shadow-md card repeated for everything
• Walls of text; paragraphs longer than 2 sentences; feature lists nobody asked for
• Inter/system font as the only font; no display typeface
• Static pages — zero animation = zero budget look
• Gray placeholder boxes or broken images. Every image loads or doesn't exist.

Process (in order, before writing code)

1. Pick ONE art direction from references/directions.md — match the project's vibe, never the same direction twice in a row. The user's base template is the starting stack, not the look.
2. Lock palette (4-6 colors) + font pair (display + body, loaded via Google Fonts <link>). Write them as Tailwind v4 @theme tokens.
3. Write the copy first — ป.5 rule: a 10-year-old must get it. Headline ≤ 8 words. Subhead ≤ 20 words. One idea per section. Numbers > adjectives ("40,000 users" beats "many happy users"). If a sentence can be an image, make it an image.
4. Assign a visual to every section from references/assets.md — Unsplash curated IDs or Pollinations generated. No section is text-only unless it's deliberate whitespace.
5. Choreograph motion with references/motion.md — every section enters with whileInView, staggered; text slides from alternating sides; hero gets the signature reveal.
6. Verify like a client: run it, scroll it top to bottom, hover everything, resize to mobile. Broken image, jumpy animation, or unreadable contrast = not done.

Typography law (hierarchy must be instantly scannable)

Level	Spec
Display (hero)	display font, clamp(2.8rem, 7vw, 6rem), tracking-tight, leading-[0.95], often 2 lines max
H2 (section)	display font, clamp(1.8rem, 4vw, 3rem), one per section
Eyebrow	0.75rem, uppercase, tracking-[0.2em], accent color — above every H2
Body	body font, 1rem–1.125rem, max-w-prose, opacity ~80%, line-height 1.7
Big stat	display font, huge (4-6rem), number only + tiny label
Never center long text. Never justify. Left-align body, center only short heroes.

Motion law (framer-motion — install framer-motion)

• Signature ease: [0.16, 1, 0.3, 1], duration 0.5–0.8s. Springs for hover: { type: "spring", stiffness: 300, damping: 24 }.
• Every section: whileInView + viewport={{ once: true, margin: "-80px" }}; children stagger 0.06–0.12s.
• Text: headlines reveal word-by-word; paragraphs fade-up 24px; alternate sections slide from left / right.
• Images: parallax with useScroll + useTransform, or scale-in from 1.15 → 1.
• Hover: cards y: -4, scale: 1.02; buttons scale 1.05; links get underline sweep.
• Only animate transform + opacity (60fps). Respect prefers-reduced-motion (hook in motion.md).
• ลูกเล่น budget: pick 2-3 per page from — marquee strip, scroll progress bar, sticky text + scrolling images, horizontal scroll section, oversized text crossing sections, magnetic button, tilt card. All 7 at once = circus.

Layout — break the grid on purpose

Asymmetry beats symmetry: 7/5 splits, overlapping images, text overlapping image edges, full-bleed image bands between content sections, one deliberately huge element per screen. Bento grids only when content genuinely fits. Whitespace is a feature — sections breathe (py-24+).

The $10k checklist (before claiming done)

• Zero BANNED patterns present
• Distinct art direction — could NOT be mistaken for a default template
• Every section animates on scroll; hero has a signature moment
• Every image loads (real URLs, loading="lazy", object-cover, alt text)
• Type hierarchy readable at arm's length; a 10-year-old understands every headline
• Mobile: no horizontal overflow, hero fits, tap targets ≥ 44px
• Contrast ≥ AA; text on images has gradient/scrim overlay