A theme should fit your work, not the other way around.

Get the theme files

Open the theme catalogue to preview the current collection. Sign in with Google to download Aura, Horizon, or Ember from your dashboard; all three current themes are free. If a future theme is marked as access-controlled, request it from the dashboard and redeem its one-time code when approved.

1. Choose a theme. Open its live preview and look through the component examples.
2. For a free theme: open your dashboard and download its ZIP.
3. For an access-controlled theme: share a short project purpose and website, then redeem the one-time code shown after approval.
4. Download the ZIP. The package includes a sample page, CSS, optional JavaScript, assets, manifest, README, and agent guide.

Give the theme a home in your project

Unzip the package and place its folder beside your site files. Keep the package structure intact so its stylesheet can find its scripts and images.

my-site/
├── index.html
└── themes/
    └── aura/
        ├── sample.html
        ├── README.md
        ├── AGENT.md
        ├── manifest.json
        ├── css/aura.css
        ├── js/aura.js
        └── img/

Copy the parts of sample.html that suit your page, or use it as your starting point. Load the stylesheet in the document head and the optional script just before the closing body tag.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="themes/aura/css/aura.css">
  <title>A page of your own</title>
</head>
<body data-sk-theme="aura">
  <main>Your page content</main>
  <script src="themes/aura/js/aura.js" defer></script>
</body>
</html>

Use paths relative to the HTML file. If the page is nested deeper, adjust the path with ../. The CSS provides the visual system; JavaScript is only needed for small interactions such as the sample component tabs and light/dark control.

One set of names. Three distinct looks.

These component classes mean the same thing in Aura, Horizon, and Ember. Keep the class names when changing themes. Use semantic HTML around them and omit optional parts when your content does not need them.

A compact page starter

<nav class="nav" aria-label="Main navigation">
  <a class="brand" href="/">Studio name</a>
  <div class="nav-links">
    <a href="#work">Work</a>
    <a href="#about">About</a>
  </div>
  <div class="nav-actions">
    <a class="btn primary" href="#contact">Get in touch</a>
  </div>
</nav>
<main>
  <section class="hero">
    <div class="hero-inner">
      <span class="hero-badge">Independent studio</span>
      <h1 class="hero-title">Make room for good work.</h1>
      <p class="hero-sub">A short, specific introduction.</p>
      <div class="hero-cta">
        <a class="btn primary" href="#work">See the work</a>
      </div>
    </div>
  </section>
  <article class="card">
    <div class="card-body">
      <span class="card-eyebrow">Selected work</span>
      <h2 class="card-title">A thoughtful project</h2>
      <p class="card-desc">What made it matter.</p>
    </div>
  </article>
</main>

Swap the skin, keep your markup

Only load one theme stylesheet on a page. Change the body marker and stylesheet path to move between themes. The component classes stay in place.

<head>
  <link rel="stylesheet" href="themes/horizon/css/horizon.css">
</head>
<body data-sk-theme="horizon">
  <!-- your unchanged page markup -->
  <script src="themes/horizon/js/horizon.js" defer></script>
</body>

A theme stylesheet is scoped under its own body[data-sk-theme="…"] marker. SkinKit's catalogue, dashboard, and guide use body[data-sk-site] instead. Do not combine the product stylesheet with a theme stylesheet on the same page.

The current Aura, Horizon, and Ember themes include a small light/dark control. Your page can set data-sk-mode="light" or data-sk-mode="dark" on the body to choose a starting mode.

Let the included agent guide do the explaining

Every theme ZIP contains an AGENT.md. It describes the theme's file layout, body marker, stylesheet and script paths, shared classes, isolation rules, and the checks an AI coding agent should follow when editing your site.

1. Extract the theme ZIP into your project.
2. Open the project folder with your coding agent.
3. Ask it to read the theme's AGENT.md before making changes.
4. Describe the page or component you want. Ask it to preserve the shared class names and keep the theme paths intact.

The README.md is the human setup and component guide; AGENT.md gives an agent the project-specific implementation constraints.

Add another theme without changing the component language

1. Create a lowercase folder such as studio/.
2. Add index.html, sample.html, README.md, AGENT.md, and manifest.json.
3. Build css/studio.css around the shared class names and scope selectors under body[data-sk-theme="studio"].
4. Add optional interactions in js/studio.js. Keep the page usable when the script is absent.
5. List every downloadable file in the manifest and make paths relative to the theme folder.
6. Add one entry to themes.json, including the theme ID, name, mood, description, preview path, manifest path, and optional featured flag.

The catalogue and dashboard read from themes.json; the download builder reads each theme's manifest. Keeping those two files accurate makes a new entry available throughout the library.

Make the page comfortable to use

• Use landmarks, one clear page heading, and a logical heading order.
• Keep keyboard focus visible and make controls operable without a pointer.
• Label every form control; describe informative images and mark decorative images with empty alt text.
• Use motion sparingly and respect prefers-reduced-motion. Theme layout and color do not depend on JavaScript.
• Check the sample at a narrow screen width and verify all local file paths after moving the folder.