1. Static board UI

The board you finish this part with looks like the real thing. Three columns, cards inside them, a dark mode toggle that works. None of the buttons do anything yet, because there’s nowhere to put the data. Starting here means you see the template layer on its own, with no database or migration in the way.

What you’ll have

A Kanban board at / with three columns and a few cards
Styling in both light and dark mode, with a working toggle
Material icons on the header and buttons
Hot reload: CSS updates without a refresh, templates trigger one

Which parts of Feather this uses

Component macros

The icon macro, imported into the template and called like a function.

Dark mode

A cookie-backed toggle that’s already wired into the scaffolded base layout.

Step 1: Scaffold

feather new kanban

Press Enter at every prompt. The defaults are what you want: a simple app, no database, background jobs on the thread backend that this part never touches.

cd kanban
source venv/bin/activate
feather dev

Open http://localhost:5173 and you’ll get the welcome page.

Step 2: Run the prompt

Give this to your assistant from inside the kanban directory.

The prompt

I'm working through part 1 of the Feather Kanban tutorial series.

Read the tutorial first:
https://github.com/RolandFlyBoy/Feather/blob/main/tutorials/01-static-board-ui.md

I've already run `feather new kanban` and accepted the defaults: simple
app type, no database. The dev server runs and shows the welcome page.

Build the static board from Build Steps 2 through 4:

- Replace routes/pages/home.py with a board route that passes three
  hardcoded columns ("To Do", "In Progress", "Done") to the template,
  with a couple of cards in the first two and none in the last.
- Create templates/pages/board.html, extending base.html, importing the
  icon macro, and looping over the columns. Include an empty state for a
  column with no cards, an "Add Column" button in the header and an "Add
  Card" button per column. They don't need to do anything yet.
- Add the Kanban CSS classes to static/css/app.css.

Follow the conventions in CLAUDE.md. Specifically: no inline styles, no
inline script blocks, and write the styling as CSS classes with @apply
in static/css/app.css rather than utility classes in the markup. Every
colour class needs a dark: variant, and the dark mode toggle belongs in
the header.

When you're done, run `feather check` and fix anything it reports. Then
tell me what you changed and why, file by file.

Hover the block and hit the copy button in the corner rather than selecting the text.

Step 3: Test it

feather dev

At http://localhost:5173:

Three columns render, each with its cards, and the last one shows an empty state.
The dark mode toggle in the header switches themes, and nothing looks broken in either.
Icons render on the header and the buttons.
Change a colour in static/css/app.css and watch it update without a refresh.

Then:

feather check

It should pass clean. The buttons doing nothing is expected at this stage.

What the framework did

The route is three lines of real work. @page.get("/") registers it, and Feather discovers the module because it’s in routes/pages/. There’s no blueprint to register and no import to add. See Routes. The template extends a base it didn’t write. base.html came from the scaffold, and it already loads HTMX, the Vite client and the dark mode script. Extending it is what gets you a working toggle without any JavaScript of your own. The styling went into a stylesheet. Feather prefers CSS classes with @apply over utility classes in templates, so a restyle happens in one file. If your assistant reached for utilities in the markup, feather check flagged it as the inline-tailwind warning and it should have moved them. See Dark mode for the dark: conventions.

Next: make it persist

A database, and buttons that actually do something.

Get started

Tutorial: build a Kanban app

Building the UI

Backend

Features

Tooling

Testing

Deployment

1. Static board UI

What you’ll have

Which parts of Feather this uses

Component macros

Dark mode

Step 1: Scaffold

Step 2: Run the prompt

Step 3: Test it

What the framework did

Next: make it persist

​What you’ll have

​Which parts of Feather this uses

Component macros

Dark mode

​Step 1: Scaffold

​Step 2: Run the prompt

​Step 3: Test it

​What the framework did

Next: make it persist

What you’ll have

Which parts of Feather this uses

Step 1: Scaffold

Step 2: Run the prompt

Step 3: Test it

What the framework did