ftk-build-ui

Files (4)

• SKILL.md
• source-description.md · references/
• source-figma.md · references/
• source-image.md · references/

SKILL.md (first lines)

Build Flutter UI that matches its source design. Fidelity is verified by screenshot comparison, not by assumption.

Resolve the toolkit root from `toolkitPath` in `~/.config/flutter-tools-kit/ftk-settings.json`, then read `knowledge/ui-fidelity.md` from it. Follow it exactly — the value table and the verification loop are mandatory, not optional.

## 1. Identify the source

- Figma URL → read [source-figma.md](./references/source-figma.md).
- Image/screenshot path → read [source-image.md](./references/source-image.md).
- Text description only → read [source-description.md](./references/source-description.md).

## 2. Breakdown before code

Produce and show the widget tree breakdown and the value table from `knowledge/ui-fidelity.md` before writing any Dart. If any value cannot be determined (font family, exact color, a state design), ask — do not guess silently.

## 3. Implement

- Place the screen per the project structure (`lib/features/<feature>/presentation/`); reuse existing theme values from `core/theme/` when they already match the design, otherwise use exact literals first.
- Build custom widgets when Material defaults fight the design (ListTile, ElevatedButton min-sizes and paddings).
- Wire real providers only if they already exist; otherwise use static placeholder data clearly marked so the screen renders standalone.

## 4. Verification loop

Run the app or widget preview, take a screenshot, compare side by side with the source, list every difference, fix, repeat — as specified in `knowledge/ui-fidelity.md`. Report each iteration's difference list. Stop only at zero meaningful differences or when the user accepts the current state.

## 5. Finish

After fidelity is reached: extract repeated literals to `core/theme/` (colors, text styles, spacing) if the project has one, re-verify once after extraction, add a golden test locking the verified state (per `knowledge/testing.md`), and run `flutter analyze`.

From adiwirya/flutter-tools-kit, MIT.

More from adiwirya/flutter-tools-kit