post-kit: Instructions file for Kiro

Jinja2 Templates — Clean, Composable, Logic-Free

Templates are views. They display data — they don't compute it, fetch it, or decide it.

Single Responsibility

• base.html — app shell only (sidebar, topbar, script/style includes)
• Page templates — one page each, extends base, fills blocks
• Components — one reusable piece each (post card, chat bubble, notification)

The rule: If a template has more than 2 levels of {% if %} nesting, the logic belongs in Python.

Template Hierarchy

base.html                        ← Shell
├── content.html                 ← {% extends "base.html" %}
├── library.html
├── calendar.html
├── images.html
├── analytics.html
├── brand.html
├── settings.html
└── onboarding.html              ← Standalone (full-page, no sidebar)

components/
├── sidebar.html                 ← {% include %}
├── post-card.html
├── chat-bubble.html
├── command-bar.html
└── notification.html

How to Write Templates (the boring, correct way)

Page template

{% extends "base.html" %}

{% block title %}Library{% endblock %}

{% block content %}
<section class="space-y-6">
  <header class="flex items-center justify-between">
    <h1 class="text-xl font-semibold text-primary">Library</h1>
    <input type="search" data-search="posts" placeholder="Search posts..." class="...">
  </header>

  <div data-post-list class="grid gap-4">
    {% for post in posts %}
      {% include "components/post-card.html" %}
    {% endfor %}

    {% if not posts %}
      <p class="text-secondary">No posts yet. Create your first one.</p>
    {% endif %}
  </div>
</section>
{% endblock %}

{% block scripts %}
<script type="module" src="/static/js/library.js"></script>
{% endblock %}

Component

{# components/post-card.html — receives `post` from context #}
<article class="rounded-lg border border-border bg-surface-raised p-4"
         data-post-id="{{ post.id }}">
  <div class="flex items-center justify-between mb-2">
    <span class="text-xs font-medium px-2 py-0.5 rounded bg-status-{{ post.status }} text-white">
      {{ post.status }}
    </span>
    <time class="text-xs text-secondary">{{ post.created_at }}</time>
  </div>
  <h3 class="font-medium text-primary truncate">{{ post.title }}</h3>
  {% if post.pillar %}
    <span class="text-xs text-secondary">{{ post.pillar }}</span>
  {% endif %}
</article>