<!doctype html>
<html lang="en" data-world="undertow" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>Skill: ensoul · SoulStack docs</title>
    <meta name="description" content="Build a product's design system and redesign its website (or any product UI) from scratch into a distinctive, alive, theme-aware site that is grounded in what the product really is. The agent first studies the codebase and the owner's way of talking to find the product's concept and vibe, then plans a design system of connected variants (palette, logos, screenshots) on one spacing scale, builds every page with parallel sub-agents, captures real product imagery, verifies by looking at screenshots at phone, laptop and ultra-wide widths in every theme and mode, and finishes by writing a design_system/ folder so the next agent can continue without context. Use when the user asks to redesign, rebuild or &quot;bring to life&quot; a product website, landing page or docs site, or asks for a design system handoff." />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="SoulStack" />
    <meta property="og:title" content="Skill: ensoul · SoulStack docs" />
    <meta property="og:description" content="Build a product's design system and redesign its website (or any product UI) from scratch into a distinctive, alive, theme-aware site that is grounded in what the product really is. The agent first studies the codebase and the owner's way of talking to find the product's concept and vibe, then plans a design system of connected variants (palette, logos, screenshots) on one spacing scale, builds every page with parallel sub-agents, captures real product imagery, verifies by looking at screenshots at phone, laptop and ultra-wide widths in every theme and mode, and finishes by writing a design_system/ folder so the next agent can continue without context. Use when the user asks to redesign, rebuild or &quot;bring to life&quot; a product website, landing page or docs site, or asks for a design system handoff." />
    <meta property="og:url" content="https://soulstack.proxysoul.com/docs/skills/ensoul" />
    <meta property="og:image" content="https://soulstack.proxysoul.com/og/docs.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="https://soulstack.proxysoul.com/og/docs.png" />
    <link rel="icon" href="/brand/logo-undertow.webp" />
    <link rel="alternate" type="text/markdown" href="/index.md" title="This page as Markdown" />
    <link rel="help" href="/llms.txt" title="Docs for agents" />
    <link rel="preload" href="/fonts/recursive-living.woff2" as="font" type="font/woff2" crossorigin />
    <script>
      (() => {
        const q = new URLSearchParams(location.search);
        const worlds = ["empryo", "soul", "coffee", "water", "crimson", "undertow"];
        let saved = null;
        try {
          saved = JSON.parse(localStorage.getItem("soulstack-world") || "null");
        } catch (err) {
          console.warn("soulstack: ignoring saved world", err);
        }
        const world = q.get("world") || saved?.world || worlds[Math.floor(Math.random() * worlds.length)];
        const mode = q.get("mode") || saved?.mode || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
        const r = document.documentElement;
        r.dataset.world = worlds.includes(world) ? world : "undertow";
        r.dataset.theme = mode === "light" ? "light" : "dark";
        r.dataset.motion = q.get("motion") === "still" || matchMedia("(prefers-reduced-motion: reduce)").matches ? "still" : "live";
        const icon = document.querySelector("link[rel=icon]");
        if (icon) icon.href = "/brand/" + ({ empryo: "logo-mark", soul: "logo-proxysoul" }[r.dataset.world] || "logo-" + r.dataset.world) + ".webp";
      })();
    </script>
    <script type="module" crossorigin src="/assets/index-jooLEQoa.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DgXdzYtk.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
