| 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)
- 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.
- Lock palette (4-6 colors) + font pair (display + body, loaded via Google Fonts
<link>). Write them as Tailwind v4 @theme tokens.
- 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.
- 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.
- Choreograph motion with references/motion.md — every section enters with
whileInView, staggered; text slides from alternating sides; hero gets the signature reveal.
- 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)
