[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7195PXEGVG3NEH4CCNX95SH":3,"skill-same:01M7195PXEGVG3NEH4CCNX95SH":60},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":14,"categories":15,"keywords":29,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":36,"frontMatter":37,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":41,"repositoryHtmlUrl":42,"repositoryHomepageUrl":43,"ownerHtmlUrl":44,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":45,"install":46,"resources":59},"01M7195PXEGVG3NEH4CCNX95SH","flutter-widget-design",null,"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-widget-design\u002FSKILL.md",[16,21,24],{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":25,"categoryName":26,"taxonomyType":27,"taxonomyTypeDesc":28},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[30,31,32,33],"design","flutter","widget","flutter widget design","2026-11-10 10:12:30",false,"# Flutter Widget Design Skill\n\nGenerate screen specifications and design metadata for Flutter mobile widget creation. Every screen is designed as a native mobile experience — Scaffold-based, gesture-aware, optimized for one-handed use.\n\n## Purpose\n\nThis skill bridges the design system and HTML references with the actual Flutter widget implementation. It creates detailed specifications that guide the `stitch-flutter` conversion skill.\n\n## Phases\n\n### Phase 1: Plan (SPEC.md + META.md)\n\nRead the design system, UX spec, and screen definitions. Produce:\n\n**SPEC.md** — Detailed mobile screen specification:\n1. **Screen Title** and widget class name (e.g., `HomeFeedScreen`)\n2. **Purpose** — User intent and key actions\n3. **Route** — GoRouter path (e.g., `\u002F`, `\u002Fnovel\u002F:id`)\n4. **Scaffold Config**:\n   - AppBar: title, leading widget, action buttons, collapsing behavior\n   - BottomNavigationBar: visible? which tab active?\n   - FloatingActionButton: icon, position, action\n5. **Body Layout** — Scroll type and structure:\n   - `SingleChildScrollView` + `Column` for simple screens\n   - `CustomScrollView` + `SliverAppBar` + `SliverList` for collapsing headers\n   - `ListView.builder` for long dynamic lists\n   - `PageView` for swipeable pages\n   - `NestedScrollView` + `TabBarView` for tabbed content\n6. **Sections** — Each visual block:\n   - Widget type (`ListView`, `GridView`, `Column`, `SliverList`, `Wrap`)\n   - Child widgets and their props\n   - Data binding points (provider → widget)\n   - Interactive elements (tap, swipe, long-press)\n7. **Data** — Entities and fields displayed, which Riverpod providers supply them\n8. **States** — Loading (shimmer), empty (illustration + CTA), error (retry), populated\n9. **Gestures & Motion**:\n   - Pull-to-refresh\n   - Swipe-to-dismiss (Dismissible)\n   - Hero tag assignments for shared-element transitions\n   - Entry animations (staggered fade-in, slide-up)\n   - Scroll-driven effects (SliverAppBar parallax, opacity changes)\n10. **Accessibility** — Semantics labels, focus traversal order, excluded decorative elements\n\n**META.md** — Example selection:\n- Score each reference example (1-5) on 6 dimensions\n- Pick the best match for this screen's mobile pattern\n\n### Phase 2: Generate (design.html)\n\nUsing the spec and matched example, generate an HTML design mockup following the `stitch-generate` skill.\n\n## Flutter Mobile Widget Vocabulary\n\n### Screen Patterns → Widget Trees\n\n| Mobile Pattern | Flutter Widget Tree |\n|---|---|\n| Feed\u002Flist screen | `Scaffold` → `CustomScrollView` → `SliverAppBar` + `SliverList` |\n| Detail screen | `Scaffold` → `CustomScrollView` → `SliverAppBar(expandedHeight)` + `SliverToBoxAdapter` |\n| Tabbed screen | `Scaffold` → `DefaultTabController` → `NestedScrollView` → `TabBar` + `TabBarView` |\n| Form screen | `Scaffold` → `SingleChildScrollView` → `Column` → `TextFormField`s |\n| Settings screen | `Scaffold` → `ListView` → `ListTile`\u002F`SwitchListTile`\u002F`ExpansionTile` |\n| Grid browser | `Scaffold` → `CustomScrollView` → `SliverAppBar` + `SliverGrid` |\n\n### Content Elements → Widgets\n\n| Content | Flutter Widget |\n|---|---|\n| Tappable card | `InkWell` → `Card` → `Padding` → `Row`\u002F`Column` |\n| Image thumbnail | `ClipRRect` → `CachedNetworkImage(fit: BoxFit.cover)` |\n| Section header | `Padding` → `Row` → `Text` + `TextButton(\"See All\")` |\n| Horizontal carousel | `SizedBox(height)` → `ListView(scrollDirection: Axis.horizontal)` |\n| Filter chips | `SingleChildScrollView(horizontal)` → `Wrap\u002FRow` → `FilterChip`s |\n| Progress bar | `ClipRRect` → `LinearProgressIndicator` |\n| Rating stars | `Row` → `Icon(Icons.star)` + `Text` |\n| Avatar | `CircleAvatar(backgroundImage: CachedNetworkImageProvider(...))` |\n| Empty state | `Center` → `Column` → `Icon` + `Text` + `ElevatedButton` |\n| Sticky bottom bar | `Scaffold.bottomNavigationBar` or `Scaffold.persistentFooterButtons` |\n\n### Navigation → GoRouter\n\n| Action | Flutter Code |\n|---|---|\n| Push to detail | `context.push('\u002Fnovel\u002F\\${novel.id}')` |\n| Switch tab | `context.go('\u002Fbrowse')` (via ShellRoute) |\n| Pop back | `context.pop()` |\n| Present bottom sheet | `showModalBottomSheet(context: context, ...)` |\n| Show dialog | `showDialog(context: context, ...)` |\n",{},"main","7d618d8bc059f1a0974706d1d15ec25f73cf1e1d","examples\u002Fflutter-app\u002F.converge\u002Fskills\u002Fflutter-widget-design",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":7,"skillName":5,"commands":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add openplaybooks-dev\u002Fconverge --skill flutter-widget-design",{"tool":52,"command":53},"bunx","bunx skills add openplaybooks-dev\u002Fconverge --skill flutter-widget-design",{"tool":55,"command":56},"pnpm","pnpm dlx skills add openplaybooks-dev\u002Fconverge --skill flutter-widget-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fopenplaybooks-dev\u002Fconverge\u002Fblob\u002Fmain\u002Fexamples\u002Fflutter-app\u002F.converge\u002Fskills\u002Fflutter-widget-design\u002FSKILL.md",true,[],[61,85,94,116,140,166],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":68,"publishedAt":34},"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",[67],{"categoryNo":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},[69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84],"checker","hello checker","hello","it","use","content","validate","spec","verify","check","file","workflow","when","Meet","files","for",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":34},"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":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},[92,93],"ask skill","ask",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":104,"publishedAt":34},"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":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},[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":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":123,"publishedAt":34},"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":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},[124,125,126,127,80,128,73,129,130,131,132,133,134,135,136,30,137,138,139,81],"converge","converge planning","planning","structure","tasks","decompose","hand","write","plan","how","update","playbook","new","how to","end","project",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":150,"publishedAt":34},"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":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},{"categoryNo":148,"categoryName":149,"taxonomyType":27,"taxonomyTypeDesc":28},"01JBSEEDCAT000000000000030","开发工程师",[151,152,124,153,154,155,156,157,158,159,130,160,161,30,137,162,138,163,164,165],"converge control","control","operate","invalid","show","api","me","work","reset","show me","cleanup","clean","inspect","select","retry",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":8,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":173,"publishedAt":34},"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",[172],{"categoryNo":148,"categoryName":149,"taxonomyType":27,"taxonomyTypeDesc":28},[174,175,176,177,131,178,179,180,181,182,183,184,185,186,187,138,188,124,189,190],"repair taskts","repair","Bash","edit","read","line","at","spawn","code","analysis","number","errors","issues","fix","chain","definition","never"]