[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719507K6Q6Q2RWSCC82RZRT":3,"skill-same:01M719507K6Q6Q2RWSCC82RZRT":62},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":47,"install":48,"resources":61},"01M719507K6Q6Q2RWSCC82RZRT","flutter-building-layouts",null,"Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.","openplaybooks-dev\u002Fconverge","openplaybooks-dev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F270560357?v=4","01M7191G17AHW5SXN63HJ0BEZV","01M7191G29922BDNWN8CFVG4PD",3,"MIT","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fexamples\u002Fflutter-app\u002F.converge\u002Fskills\u002Fflutter-building-layouts\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34],"flutter building layouts","flutter","when","structure","widgets","layout","ui","system","use","ui structure","constraint","application","2026-11-10 10:12:30",false,"---\nname: flutter-building-layouts\ndescription: Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.\n---\n# Architecting Flutter Layouts\n\n## Contents\n- [Core Layout Principles](#core-layout-principles)\n- [Structural Widgets](#structural-widgets)\n- [Adaptive and Responsive Design](#adaptive-and-responsive-design)\n- [Workflow: Implementing a Complex Layout](#workflow-implementing-a-complex-layout)\n- [Examples](#examples)\n\n## Core Layout Principles\n\nMaster the fundamental Flutter layout rule: **Constraints go down. Sizes go up. Parent sets position.**\n\n* **Pass Constraints Down:** Always pass constraints (minimum\u002Fmaximum width and height) from the parent Widget to its children. A Widget cannot choose its own size independently of its parent's constraints.\n* **Pass Sizes Up:** Calculate the child Widget's desired size within the given constraints and pass this size back up to the parent.\n* **Set Position via Parent:** Define the `x` and `y` coordinates of a child Widget exclusively within the parent Widget. Children do not know their own position on the screen.\n* **Avoid Unbounded Constraints:** Never pass unbounded constraints (e.g., `double.infinity`) in the cross-axis of a flex box (`Row` or `Column`) or within scrollable regions (`ListView`). This causes render exceptions.\n\n## Structural Widgets\n\nSelect the appropriate structural Widget based on the required spatial arrangement.\n\n* **Use `Row` and `Column`:** Implement `Row` for horizontal linear layouts and `Column` for vertical linear layouts. Control child alignment using `mainAxisAlignment` and `crossAxisAlignment`.\n* **Use `Expanded` and `Flexible`:** Wrap children of `Row` or `Column` in `Expanded` to force them to fill available space, or `Flexible` to allow them to size themselves up to the available space.\n* **Use `Container`:** Wrap Widgets in a `Container` when you need to apply padding, margins, borders, or background colors.\n* **Use `Stack`:** Implement `Stack` when Widgets must overlap on the Z-axis. Use `Positioned` to anchor children to specific edges of the `Stack`.\n* **Use `SizedBox`:** Enforce strict, tight constraints on a child Widget by wrapping it in a `SizedBox` with explicit `width` and `height` values.\n\n## Adaptive and Responsive Design\n\nApply conditional logic to handle varying screen sizes and form factors.\n\n* **If fitting UI into available space (Responsive):** Use `LayoutBuilder`, `Expanded`, and `Flexible` to dynamically adjust the size and placement of elements based on the parent's constraints.\n* **If adjusting UI usability for a specific form factor (Adaptive):** Use conditional rendering to swap entire layout structures. For example, render a bottom navigation bar on mobile, but a side navigation rail on tablets\u002Fdesktop.\n\n## Workflow: Implementing a Complex Layout\n\n### Phase 1: Visual Deconstruction\n- [ ] Break down the target UI into a hierarchy of rows, columns, and grids.\n- [ ] Identify overlapping elements (requiring `Stack`).\n- [ ] Identify scrolling regions (requiring `ListView` or `SingleChildScrollView`).\n\n### Phase 2: Constraint Planning\n- [ ] Determine which Widgets require tight constraints (fixed size) vs. loose constraints (flexible size).\n- [ ] Identify potential unbounded constraint risks (e.g., a `ListView` inside a `Column`).\n\n### Phase 3: Implementation\n- [ ] Build the layout from the outside in, starting with the `Scaffold` and primary structural Widgets.\n- [ ] Extract deeply nested layout sections into separate, stateless Widgets to maintain readability.\n\n### Phase 4: Validation\n- [ ] Run the application on target devices\u002Fsimulators.\n- [ ] Check for yellow\u002Fblack striped overflow warnings.\n- [ ] If overflow occurs: Wrap the overflowing Widget in `Expanded` (if inside a flex box) or wrap the parent in a scrollable Widget.\n\n## Examples\n\n### Example: Resolving Unbounded Constraints in Flex Boxes\n\n```dart\n\u002F\u002F BAD: Throws unbounded height exception\nColumn(\n  children: [\n    Text('Header'),\n    ListView(\n      children: [\u002F* items *\u002F],\n    ),\n  ],\n)\n\n\u002F\u002F GOOD: ListView is constrained to remaining space\nColumn(\n  children: [\n    Text('Header'),\n    Expanded(\n      child: ListView(\n        children: [\u002F* items *\u002F],\n      ),\n    ),\n  ],\n)\n```\n\n### Example: Responsive Layout with LayoutBuilder\n\n```dart\nWidget buildAdaptiveLayout(BuildContext context) {\n  return LayoutBuilder(\n    builder: (context, constraints) {\n      if (constraints.maxWidth > 600) {\n        return Row(\n          children: [\n            SizedBox(width: 250, child: SidebarWidget()),\n            Expanded(child: MainContentWidget()),\n          ],\n        );\n      } else {\n        return Column(\n          children: [\n            Expanded(child: MainContentWidget()),\n            BottomNavigationBarWidget(),\n          ],\n        );\n      }\n    },\n  );\n}\n```\n","# Architecting Flutter Layouts\n\n## Contents\n- [Core Layout Principles](#core-layout-principles)\n- [Structural Widgets](#structural-widgets)\n- [Adaptive and Responsive Design](#adaptive-and-responsive-design)\n- [Workflow: Implementing a Complex Layout](#workflow-implementing-a-complex-layout)\n- [Examples](#examples)\n\n## Core Layout Principles\n\nMaster the fundamental Flutter layout rule: **Constraints go down. Sizes go up. Parent sets position.**\n\n* **Pass Constraints Down:** Always pass constraints (minimum\u002Fmaximum width and height) from the parent Widget to its children. A Widget cannot choose its own size independently of its parent's constraints.\n* **Pass Sizes Up:** Calculate the child Widget's desired size within the given constraints and pass this size back up to the parent.\n* **Set Position via Parent:** Define the `x` and `y` coordinates of a child Widget exclusively within the parent Widget. Children do not know their own position on the screen.\n* **Avoid Unbounded Constraints:** Never pass unbounded constraints (e.g., `double.infinity`) in the cross-axis of a flex box (`Row` or `Column`) or within scrollable regions (`ListView`). This causes render exceptions.\n\n## Structural Widgets\n\nSelect the appropriate structural Widget based on the required spatial arrangement.\n\n* **Use `Row` and `Column`:** Implement `Row` for horizontal linear layouts and `Column` for vertical linear layouts. Control child alignment using `mainAxisAlignment` and `crossAxisAlignment`.\n* **Use `Expanded` and `Flexible`:** Wrap children of `Row` or `Column` in `Expanded` to force them to fill available space, or `Flexible` to allow them to size themselves up to the available space.\n* **Use `Container`:** Wrap Widgets in a `Container` when you need to apply padding, margins, borders, or background colors.\n* **Use `Stack`:** Implement `Stack` when Widgets must overlap on the Z-axis. Use `Positioned` to anchor children to specific edges of the `Stack`.\n* **Use `SizedBox`:** Enforce strict, tight constraints on a child Widget by wrapping it in a `SizedBox` with explicit `width` and `height` values.\n\n## Adaptive and Responsive Design\n\nApply conditional logic to handle varying screen sizes and form factors.\n\n* **If fitting UI into available space (Responsive):** Use `LayoutBuilder`, `Expanded`, and `Flexible` to dynamically adjust the size and placement of elements based on the parent's constraints.\n* **If adjusting UI usability for a specific form factor (Adaptive):** Use conditional rendering to swap entire layout structures. For example, render a bottom navigation bar on mobile, but a side navigation rail on tablets\u002Fdesktop.\n\n## Workflow: Implementing a Complex Layout\n\n### Phase 1: Visual Deconstruction\n- [ ] Break down the target UI into a hierarchy of rows, columns, and grids.\n- [ ] Identify overlapping elements (requiring `Stack`).\n- [ ] Identify scrolling regions (requiring `ListView` or `SingleChildScrollView`).\n\n### Phase 2: Constraint Planning\n- [ ] Determine which Widgets require tight constraints (fixed size) vs. loose constraints (flexible size).\n- [ ] Identify potential unbounded constraint risks (e.g., a `ListView` inside a `Column`).\n\n### Phase 3: Implementation\n- [ ] Build the layout from the outside in, starting with the `Scaffold` and primary structural Widgets.\n- [ ] Extract deeply nested layout sections into separate, stateless Widgets to maintain readability.\n\n### Phase 4: Validation\n- [ ] Run the application on target devices\u002Fsimulators.\n- [ ] Check for yellow\u002Fblack striped overflow warnings.\n- [ ] If overflow occurs: Wrap the overflowing Widget in `Expanded` (if inside a flex box) or wrap the parent in a scrollable Widget.\n\n## Examples\n\n### Example: Resolving Unbounded Constraints in Flex Boxes\n\n```dart\n\u002F\u002F BAD: Throws unbounded height exception\nColumn(\n  children: [\n    Text('Header'),\n    ListView(\n      children: [\u002F* items *\u002F],\n    ),\n  ],\n)\n\n\u002F\u002F GOOD: ListView is constrained to remaining space\nColumn(\n  children: [\n    Text('Header'),\n    Expanded(\n      child: ListView(\n        children: [\u002F* items *\u002F],\n      ),\n    ),\n  ],\n)\n```\n\n### Example: Responsive Layout with LayoutBuilder\n\n```dart\nWidget buildAdaptiveLayout(BuildContext context) {\n  return LayoutBuilder(\n    builder: (context, constraints) {\n      if (constraints.maxWidth > 600) {\n        return Row(\n          children: [\n            SizedBox(width: 250, child: SidebarWidget()),\n            Expanded(child: MainContentWidget()),\n          ],\n        );\n      } else {\n        return Column(\n          children: [\n            Expanded(child: MainContentWidget()),\n            BottomNavigationBarWidget(),\n          ],\n        );\n      }\n    },\n  );\n}\n```\n",{"name":5,"description":7},"main","7d618d8bc059f1a0974706d1d15ec25f73cf1e1d","examples\u002Fflutter-app\u002F.converge\u002Fskills\u002Fflutter-building-layouts",1,"https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge","https:\u002F\u002Fplaybooks.to","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev","2026-06-13 10:11:21",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add openplaybooks-dev\u002Fconverge --skill flutter-building-layouts",{"tool":54,"command":55},"bunx","bunx skills add openplaybooks-dev\u002Fconverge --skill flutter-building-layouts",{"tool":57,"command":58},"pnpm","pnpm dlx skills add openplaybooks-dev\u002Fconverge --skill flutter-building-layouts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fexamples\u002Fflutter-app\u002F.converge\u002Fskills\u002Fflutter-building-layouts\u002FSKILL.md",true,[],[63,85,94,116,140,168],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":70,"publishedAt":35},"01M71989MQF3GPZ7P5TX6S93PD","hello-checker","Use this skill when asked to \"verify\", \"check\", or \"validate\" a file's existence and content. It provides a reliable workflow for confirming files meet their spec.","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Ftests\u002Ftest-codex-real\u002F.converge\u002Fskills\u002Fhello-checker\u002FSKILL.md",[69],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[71,72,73,74,31,75,76,77,78,79,80,81,25,82,83,84],"checker","hello checker","hello","it","content","validate","spec","verify","check","file","workflow","Meet","files","for",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":35},"01M7198823W79B3S15TPV97TCB","ask-skill","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Ftests\u002Ftest-ask-autonomous\u002F.converge\u002Fplaybooks\u002Fdefault\u002Fskills\u002Fask-skill\u002FSKILL.md",[90],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[92,93],"ask skill","ask",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":104,"publishedAt":35},"01M71986EJ6VCM8YKGEM2YEDQV","html-review-artifact","Framework-wide guidance for crafting polished human-review artifacts as markdown or HTML","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fskills\u002Fhtml-review-artifact\u002FSKILL.md",[100,103],{"categoryNo":101,"categoryName":102,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[105,106,107,108,109,84,110,111,112,113,114,115],"html","artifact","review","html review artifact","as","framework","wide","guidance","markdown","human","artifacts",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":123,"publishedAt":35},"01M719833M2XWXG1VPBW30GW7J","converge-planning","Design a Converge playbook end-to-end. Use when the user says \"plan a project\", \"design a playbook\", \"decompose into tasks\", \"scaffold a Converge workflow\", \"onboard to Converge\", or asks how to write TASK.md \u002F playbook.yml. Two entry points: plan a new playbook or update an existing one. Hand off to `\u002Fconverge-control` after producing the playbook structure.","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fskills\u002Fconverge-planning\u002FSKILL.md",[122],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[124,125,126,26,81,127,31,128,129,130,131,132,133,134,135,136,137,138,139,25],"converge","converge planning","planning","tasks","decompose","hand","write","plan","how","update","playbook","new","design","how to","end","project",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":152,"publishedAt":35},"01M7197XZT1T9GDYAJGVGX1J60","converge-control","Operate a Converge playbook end-to-end — start runs, monitor progress, narrow failures with `--select`, inspect runtime state, validate definitions, surgically reset subtrees, and stop stuck or orphaned runs. Use this skill whenever the user says \"run my playbook\", \"execute this\", \"monitor the run\", \"converge failed\", \"the run is stuck\", \"retry failures\", \"babysit this playbook\", \"what's the status?\", \"show me the gantt\", or asks how to use `converge run` \u002F `--select` \u002F `inspect` \u002F `doctor` \u002F `clean` \u002F `stop`. Also use it for `HTTP 401` \u002F `Invalid API key` failures on the first task — those are environment-not-playbook problems — and for any post-run cleanup work. Hand off to `converge-planning` if the user wants to design or restructure the playbook itself.","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fskills\u002Fconverge-control\u002FSKILL.md",[146,147],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":148,"categoryName":149,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[153,154,124,155,156,157,158,159,160,161,129,162,163,136,137,164,138,165,166,167],"converge control","control","operate","invalid","show","api","me","work","reset","show me","cleanup","clean","inspect","select","retry",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":175,"publishedAt":35},"01M7197SCVN0QTD3CM4M83WYJH","repair-taskts","Fix task.ts definition issues — Seed syntax, missing .build(), empty checks, import errors, TypeScript errors","https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fnavigator\u002Frepair\u002Fskill-templates\u002Frepair-taskts\u002FSKILL.md",[174],{"categoryNo":148,"categoryName":149,"taxonomyType":150,"taxonomyTypeDesc":151},[176,177,178,179,130,180,181,182,183,184,185,186,187,188,189,138,190,124,191,192],"repair taskts","repair","Bash","edit","read","line","at","spawn","code","analysis","number","errors","issues","fix","chain","definition","never"]