| English | 日本語 | 简体中文 |
This tutorial walks through the basic TAKT flow by improving one small project over three phases.
The example project is a mini expense memo UI. You will first build a small frontend, then make it more useful, then polish the layout and interaction details. The default workflow is the standard workflow and can be relatively heavy because it includes broader review and test-oriented steps, so this first tutorial uses frontend-mini.
Video tutorial: Follow the same tutorial in the hands-on walkthroughs: Chapter 1 and Chapter 2.
You will build a small browser-based expense memo.
Instead of asking TAKT to do everything at once, you queue one phase, inspect the result, and then instruct the next improvement.
First, make the target project a Git repository. Skip this if you are already inside an existing repository.
git init
git add .
git commit -m "initial commit"
TAKT works with branches and task workspaces during execution, so starting from a repository with at least one commit is the safer path.
If you have not installed TAKT yet, install it with npm install -g takt and make sure a provider CLI (such as Claude Code) or an API key is available.
Start TAKT.
takt
On first launch, TAKT asks which language to use for default agents and workflows, then which provider to use, before the workflow selection appears.
Choose frontend-mini as the workflow. The initial screen lists only categories; the exact order may vary by environment, but frontend-mini is under the Legacy category’s Frontend subcategory.
Select workflow:
📁 🚀 Quick Start/
📁 🛠️ Development/
📁 🔍 Review/
📁 🏗️ Infrastructure/
📁 🎵 TAKT Development/
❯ 📁 📦 Legacy/
Pressing b on a workflow bookmarks it; bookmarked workflows appear at the top of this screen as 🎼 {name} [*].
Open the category and select frontend-mini.
Select workflow in 📦 Legacy:
📁 ✨ Simple/
📁 ⚡ Mini/
❯ 📁 🎨 Frontend/
📁 ⚙️ Backend/
📁 🔧 Dual/
📁 🔍 Review/
🎼 cli
Select workflow in 🎨 Frontend:
🎼 simple-frontend
🎼 frontend
❯ 🎼 frontend-mini
🎼 frontend-maintenance
TAKT then asks for an interactive mode. Choose Assistant first.
Select interactive mode:
❯ Assistant
Grill Me
Persona
Describe the first task to TAKT.
> I want to build a mini expense memo UI that runs in the browser.
> For the first phase, it only needs fields for amount, category, and note, plus a list of added entries.
> Keep it simple with index.html, CSS, and JavaScript.
TAKT may ask clarifying questions or organize the task. When the scope is clear, use /go to create the task instruction.
> /go This is phase 1, so do not add persistence or summaries yet. Keep it to the smallest usable UI.
After the task instruction is generated, TAKT shows actions. Choose Save as Task.
What would you like to do?
Execute now
❯ Save as Task
Continue editing
Create Issue
Save as Task appends the generated instruction to .takt/tasks.yaml. Execute now runs the task immediately; it also asks Create worktree? (default Yes), so by default it runs in an isolated worktree as well. The normal tutorial flow is to queue the task and run it with takt run.
After choosing Save as Task, TAKT asks for worktree settings. Auto-create PR? defaults to Yes; answer n if you are proceeding without GitHub.
Run the queued task.
takt run
When execution finishes, inspect the result.
takt list
Select the completed task. TAKT shows actions for that task. Start with View diff, then use Try merge if the result looks worth trying locally.
Action for takt/20260201-015714-mini-expense-memo-ui:
❯ View diff
Instruct
Merge from root
Pull from remote
Try merge
Merge & cleanup
Delete
Try merge brings the task branch changes into your working tree without committing them. You can inspect the UI and diff locally, then commit manually if you are satisfied.
Action for takt/20260201-015714-mini-expense-memo-ui:
View diff
Instruct
Merge from root
Pull from remote
❯ Try merge
Merge & cleanup
Delete
After checking the phase 1 result, queue the next improvement. You can start a new task from takt, or use Instruct from takt list on the completed task.
To build on the previous result, run takt list, select the completed task, and choose Instruct.
Action for takt/20260201-015714-mini-expense-memo-ui:
View diff
❯ Instruct
Merge from root
Pull from remote
Try merge
Merge & cleanup
Delete
Instruct mode lets you discuss the next change with the previous diff and execution report in context.
> For phase 2, add total amount, category filtering, and row deletion.
> Save entries to LocalStorage so they are restored after reload.
When the instruction is ready, use /go.
> /go Add these features to the existing structure instead of rebuilding the UI from scratch.
Choose Save as Task again.
What would you like to do?
❯ Save as Task
Continue editing
Run and inspect the result.
takt run
takt list
At this stage, use the same loop: View diff, then Try merge when you want to inspect it locally, or Instruct when the result needs another pass.
Finally, polish the UI and interaction details. This is a good fit for Instruct, because TAKT can use the current result as context.
> For phase 3, make the UI work well on narrow mobile widths.
> Add a useful empty state, visible focus styles, and clearer category styling.
> Keep it as a practical everyday tool, not a marketing landing page.
Use /go to finalize the instruction.
> /go
Choose Save as Task.
What would you like to do?
❯ Save as Task
Continue editing
Run the task.
takt run
Use takt list to inspect the result. If you are satisfied, choose Merge & cleanup. If you want to inspect the changes in your working tree before deciding, choose Try merge.
Action for takt/20260201-015714-mini-expense-memo-ui:
View diff
Instruct
Merge from root
Pull from remote
Try merge
❯ Merge & cleanup
Delete
The basic loop is:
takt
-> choose frontend-mini
-> talk with assistant
-> /go
-> Save as Task
takt run
takt list
-> View diff
-> Try merge or Merge & cleanup
-> use Instruct when you want to queue the next phase
When you are working in a GitHub repository, you can ask TAKT to create a GitHub Issue from the conversation and then queue that Issue as a task.
Make sure GitHub CLI is authenticated.
gh auth status
Start TAKT and choose frontend-mini.
takt
Discuss the Issue content with TAKT.
> For phase 2 of the mini expense memo UI, I want to add total amount, category filtering, deletion, and LocalStorage persistence.
> Please organize this into a GitHub Issue with acceptance criteria.
When the content is ready, use /go.
> /go
Review the generated task instruction and choose Create Issue.
What would you like to do?
Execute now
Save as Task
Continue editing
❯ Create Issue
Create Issue creates the Issue and saves it as a task in one flow: after the Issue is created, the worktree settings prompts follow directly (it does not return to the menu). If you already know the Issue number, you can also use takt add.
takt add #1
Then continue with the same local flow.
takt run
takt list
Using GitHub Issues keeps requirements, discussion, and implementation tasks connected, which is especially useful for team development.
If you create a GitHub Issue while talking with Codex or another development assistant outside TAKT, you can still hand the Issue number to TAKT.
Assume Codex created Issue #1.
takt add #1
takt add #1 fetches the GitHub Issue title, body, and comments, then saves them as a pending TAKT task.
Run it.
takt run
Inspect the result.
takt list
This flow lets your usual AI or GitHub discussion handle Issue creation, while TAKT handles implementation, review, and fix loops.
takt add, takt run, and takt list