Plain HTML and Claude artifacts

The same tokens and class names work without React. For mockups, static pages and Claude artifacts, a single HTML file is enough.

One file

html

<!doctype html>
<html lang="en" data-enma="paper" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Reading list</title>
    <link rel="stylesheet" href="node_modules/@enma/css/dist/enma.css" />
    <link rel="stylesheet" href="node_modules/@enma/css/dist/fonts/paper.css" />
  </head>
  <body class="e-canvas">
    <main
      style="max-width:640px;margin:0 auto;padding:var(--space-8) var(--space-4);display:grid;gap:var(--space-4)"
    >
      <p class="e-eyebrow">This week</p>
      <h1 class="e-display">Designing for focus</h1>
      <div class="e-card e-sq e-card--hero e-card--pad-lg">
        <div class="e-stat e-stat--hero">
          <div class="e-stat__label">Pages read</div>
          <div class="e-stat__row"><span class="e-stat__value">248</span></div>
        </div>
      </div>
      <button type="button" class="e-btn e-sq e-btn--primary e-btn--lg">Continue reading</button>
    </main>
  </body>
</html>

enma.css includes the tokens, so one stylesheet plus the theme's font file is everything.
For a file that must stand alone (an artifact, an email to a client), paste the contents of enma.css into a <style> tag instead of linking it. Fonts then fall back to system faces unless you link them.
The html starter is exactly this, ready to copy.

Class recipes

The markup the React components render, for every component. Each component page shows its recipe under Code, and enma.md has all of them in one place.

html

<button type="button" class="e-btn e-sq e-btn--primary e-btn--md">Start workout</button>

<ul class="e-list e-sq">
  <li>
    <div class="e-list__row">
      <span class="e-list__text"><span>Bench press</span></span
      ><span class="e-list__meta">4 × 8 · 80 kg</span>
    </div>
  </li>
</ul>

<div class="e-field">
  <label class="e-field__label" for="ws">Workspace name</label>
  <div class="e-field__control e-sq"><input class="e-field__input" id="ws" placeholder="Acme Labs" /></div>
</div>

Type helpers: e-display-xl, e-display, e-title, e-heading, e-body, e-label, e-caption, e-eyebrow, e-num, e-meta.
e-visually-hidden hides text visually but keeps it for screen readers (full numbers, chart summaries, table captions).
Motion without React: add is-in to .e-bars after load to make the bars grow.

Asking Claude for an artifact in Enma

Claude can read Enma from a URL. Name the theme, point it at llms.txt, and describe the screen:

Build an HTML artifact in Enma, theme paper, light mode. Read https://enma.manishmandal.com/llms.txt and enma.md first and use only the class recipes and --e-* variables. Screen: a reading dashboard with one hero number (pages read this week), a list of three books with progress, and one primary button.

Claude picks the components, follows one hero, one accent and one primary per view, and uses the recipes rather than inventing colors or fonts.
For React artifacts, ask for the same screen "with the class recipes in JSX" (the packages are private, so an artifact can't install them).
In Claude Code or any agent with skills, install the Enma skills instead; they carry the same rules.

Vue, Svelte, Astro and others

Load the same CSS and set the same root attributes. Port components with the props from the API contract and the same class names, so the CSS needs no changes. Motion (count-up, bar growth) is a small script per component that adds is-in or animates the number once on first view. See Other platforms.