# Isekai

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-starchybomb-isekai-isekai`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [StarchyBomb](https://agentstack.voostack.com/s/starchybomb)
- **Installs:** 0
- **Category:** [Databases](https://agentstack.voostack.com/c/databases)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [StarchyBomb](https://github.com/StarchyBomb)
- **Source:** https://github.com/StarchyBomb/isekai/tree/main/skills/isekai

## Install

```sh
agentstack add skill-starchybomb-isekai-isekai
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](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 ``). 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](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](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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [StarchyBomb](https://github.com/StarchyBomb)
- **Source:** [StarchyBomb/isekai](https://github.com/StarchyBomb/isekai)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-starchybomb-isekai-isekai
- Seller: https://agentstack.voostack.com/s/starchybomb
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.