|
| 1 | +# Task 142 - Create Flexbox Skill |
| 2 | + |
| 3 | +## Summary |
| 4 | + |
| 5 | +Author `skills/flexbox/SKILL.md` teaching AI agents how to use TimeWarp.Flexbox, |
| 6 | +following the sibling-repo convention (timewarp-terminal `skills/terminal/SKILL.md`, |
| 7 | +timewarp-nuru `skills/nuru/SKILL.md`, timewarp-amuru `skills/amuru/SKILL.md`): |
| 8 | +YAML frontmatter (`name`, `description` tuned for auto-triggering), repository and |
| 9 | +package links, a "When to Use What" table, then task-oriented guidance with |
| 10 | +compiling code examples. Target length in line with siblings (~350-500 lines). |
| 11 | + |
| 12 | +## Target Files |
| 13 | + |
| 14 | +| Type | Path | |
| 15 | +| ----- | --------------------------- | |
| 16 | +| Skill | `skills/flexbox/SKILL.md` | |
| 17 | + |
| 18 | +## Todo List |
| 19 | + |
| 20 | +- [x] Frontmatter: `name: flexbox`; description that triggers on "flexbox layout in |
| 21 | + C#", "compute layout without a UI framework", "Yoga layout for .NET", |
| 22 | + "position/size a tree of boxes", etc. |
| 23 | +- [x] Core model section: build a `Node` tree (`InsertChild`), set styles via |
| 24 | + `Node.Style`, run `CalculateLayout.Calculate(root, availW, availH, Direction)`, |
| 25 | + read results from `Node.Layout` (`GetPosition(PhysicalEdge)`, |
| 26 | + `GetDimension(Dimension)`); `float.NaN` = undefined/unconstrained |
| 27 | +- [x] CSS-to-C# mapping table: every CSS flexbox property to its C# call |
| 28 | + (`width: 100px` -> `SetDimension(Dimension.Width, StyleSizeLength.Points(100))`, |
| 29 | + `margin: 10px` -> `SetMargin(Edge.All, StyleLength.Points(10))`, |
| 30 | + `gap` -> `SetGap(Gutter.All, ...)`, enums for direction/justify/align/wrap/ |
| 31 | + position-type/overflow/display/box-sizing) |
| 32 | +- [x] Gotchas section (the things an agent will get wrong): |
| 33 | + - Defaults are Yoga's, not web CSS: `flex-direction: column`, `flex-shrink: 0`, |
| 34 | + `align-content: flex-start`; `Config.UseWebDefaults` for web behavior |
| 35 | + - `StyleLength` vs `StyleSizeLength` (edges/gaps vs dimensions/flex-basis) |
| 36 | + - Owner semantics: a child belongs to one parent; re-inserting an owned child |
| 37 | + throws (`YogaAssertException`) - `RemoveChild` first |
| 38 | + - Style mutations auto-dirty the tree; re-call `Calculate` to get fresh results |
| 39 | + - Positions are relative to the parent; accumulate for absolute coordinates |
| 40 | +- [x] Recipes: sidebar+content shell, wrapping card grid with gap, centered overlay |
| 41 | + via absolute insets, RTL, custom measured leaf (SetMeasureFunc with |
| 42 | + MeasureMode semantics), incremental re-layout loop |
| 43 | +- [x] Verify every code example compiles and produces the outputs shown (reuse the |
| 44 | + readme-example verification approach; `samples/layout-demo/layout-demo.cs` is |
| 45 | + a source of known-good snippets) |
| 46 | +- [x] Point to the visual demo and the Generated conformance tests as further |
| 47 | + reference material |
| 48 | +- [ ] (deferred to task 143) Publication to https://timewarp.software/ happens automatically once the repo |
| 49 | + qualifies for the site's catalog: the site aggregates `skills/*/SKILL.md` from |
| 50 | + family repos' default branches at build time. Repo qualification and the |
| 51 | + release-triggered rebuild are task 143's scope; verify the skill appears on the |
| 52 | + site's skills index after both land. |
| 53 | + |
| 54 | +## Notes |
| 55 | + |
| 56 | +- The audit scaffold already created `skills/` (currently only `.gitkeep`). |
| 57 | +- Keep the skill self-contained: agents may load it without repo access, so inline |
| 58 | + the essential API surface rather than deferring to source files. |
| 59 | +- The `description` frontmatter drives triggering accuracy - study the sibling |
| 60 | + descriptions (terminal, nuru, amuru) for phrasing that names both the library and |
| 61 | + the generic tasks it solves. |
| 62 | + |
| 63 | +## Results (2026-07-04) |
| 64 | + |
| 65 | +`skills/flexbox/SKILL.md` created (~270 lines), following the sibling |
| 66 | +convention (terminal/nuru/amuru): trigger-tuned frontmatter, When to Use What |
| 67 | +table, core five-step model, full CSS-to-C# mapping table (both length types), |
| 68 | +Yoga-vs-web defaults table with the UseWebDefaults escape hatch, reading |
| 69 | +results + AbsolutePosition helper, six recipes (app shell, wrap grid, absolute |
| 70 | +overlay, RTL, measure function with MeasureMode semantics, incremental |
| 71 | +re-layout), pitfalls (owner semantics, NaN, length types, one-config-per-tree), |
| 72 | +installation, and further-reference pointers. |
| 73 | + |
| 74 | +Every code snippet was compiled and executed against the library; all output |
| 75 | +comments in the skill are actual engine output (verified via a scratch console |
| 76 | +consumer). Site publication happens automatically once task 143 lands (the |
| 77 | +site aggregates skills/*/SKILL.md from qualifying repos at build time). |
0 commit comments