post-kit: Instructions file for Kiro

Frontend — HTML, Tailwind CSS v4, Vanilla JS

Write frontend code like Stripe's dashboard, Linear's UI, or Cal.com: minimal, fast, readable. No cleverness.

Single Responsibility

• One JS file = one concern (chat.js handles chat, editor.js handles editing — never both)
• One HTML template = one page
• One component partial = one reusable piece
• One function = one action (fetch data OR render DOM — not both in the same function)

The test: Can you name the file/function in 2-3 words that fully describe it? If not, it does too much.

HTML — Semantic, Accessible, Clean

<!-- Good — semantic, readable -->
<main class="flex-1 p-6">
  <section data-page="library">
    <header class="mb-6">
      <h1 class="text-xl font-semibold text-primary">Library</h1>
    </header>
    <article class="post-card" data-post-id="{{ post.id }}">
      ...
    </article>
  </section>
</main>

<!-- Bad — div soup -->
<div class="main">
  <div class="section">
    <div class="header">
      <div class="title">Library</div>
    </div>
  </div>
</div>

Rules:

• Semantic elements: <nav>, <main>, <section>, <article>, <aside>, <header>, <footer>
• Every <img> has alt. Every <input> has <label>. Every button is keyboard-accessible.
• data-* attributes for JS hooks. Never select by styling classes.
• No inline styles. No inline scripts.

Tailwind CSS v4 — CSS-First, Token-Based

Configuration lives in CSS (not JavaScript)

/* app.css — the ONLY place design tokens are defined */
@import "tailwindcss";

@theme {
  /* Colors — OKLCH for perceptual uniformity */
  --color-surface: oklch(0.13 0.01 260);
  --color-surface-raised: oklch(0.18 0.01 260);
  --color-text-primary: oklch(0.93 0 0);
  --color-text-secondary: oklch(0.65 0 0);
  --color-accent: oklch(0.65 0.19 265);
  --color-border: oklch(0.28 0.01 260);
  --color-status-draft: oklch(0.75 0.15 85);
  --color-status-approved: oklch(0.65 0.15 250);
  --color-status-published: oklch(0.70 0.15 145);

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Shadows */
  --shadow-card: 0 2px 8px oklch(0 0 0 / 0.25);
}