[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JGVTN9TYQJY56ES3XZJ3TR":3,"skill-same:01M6JGVTN9TYQJY56ES3XZJ3TR":66},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M6JGVTN9TYQJY56ES3XZJ3TR","platform-ui",null,"Choose the platform element, the layout, the color scheme, and the first paint when building a web UI. Use when adding or changing a control, a layout, a theme, or the first screen of a page.","muratovv\u002Fai-hats","muratovv","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F7502801?v=4","01M6JGCBN4KEJX012GPJVSH04T","Fedor Muratov","01M6JGCBSNMN7CW3RGTPPE0MN2",3,"MIT","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fusage\u002Fskills\u002Fplatform-ui\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"ui","platform","platform ui","web","first","page","choose","use","layout","control","element","screen","color","theme","web ui","scheme","2026-11-10 10:12:30",false,"---\nname: platform-ui\ndescription: >-\n  Choose the platform element, the layout, the color scheme, and the\n  first paint when building a web UI. Use when adding or changing a\n  control, a layout, a theme, or the first screen of a page.\nlicense: MIT\n---\n\n# Platform UI\n\nBuild the control, the layout, the scheme, and the first screen with the platform.\n\n## When to Use\n\n- Quality of the result is `ui-ux-review`. The scenario gate is `webapp-testing`.\n- Naming the schemes on a prototype is `design-direction`. This skill declares the schemes that prototype already named.\n- Skip for backend work, scripts, and a change with no HTML, CSS, or first-paint surface.\n- A mark is `logo-design`. This skill does not draw one.\n\n## Procedure\n\n1. **Element.** Use the platform element that already does the job. A custom widget covers only the gap that element does not.\n   - A modal (it blocks the page) is a `dialog` opened with `showModal`. The page behind is inert, focus stays inside, `Esc` closes it, and focus returns to the opener. Light dismiss, when the design asks for it, is `closedby=\"any\"`.\n   - A non-modal overlay is a `popover`.\n   - A disclosure is `details` and `summary`.\n   - Data collection is a `form`. A change uses `method=\"POST\"`. Every control has a `name`. Related controls sit in a `fieldset` with a `legend`. The submit button names the action.\n2. **Layout.** Size the component from its container with `@container`, and the type from the user's font size with `rem`. When the browser chrome changes the visible height, use `dvh`. Give media an `aspect-ratio` so loading does not move the page.\n3. **Scheme.** Put the schemes the design named on the root before first paint: a `\u003Cmeta name=\"color-scheme\">` in the document head and `color-scheme` on `html`. A piece with one scheme declares that one.\n4. **First paint.** The first screen's image and font are in the initial HTML. The image is not `loading=\"lazy\"`; it carries `fetchpriority=\"high\"`. A web font uses `font-display: swap`. A script that is not needed for that first paint uses `defer` or `async`. A long list paints the visible rows.\n5. **Field error.** `aria-invalid` and the visible error arrive together, when the field matches `:user-invalid`. They wait until the user has left the field.\n\n## Completion\n\n- The element, the layout, the scheme, and the first paint each follow the step that applies. A step that the change does not touch is left as it was.\n- `ui-ux-review` still judges the result. `webapp-testing` still gates it.\n\n**Validation scenario (RED).** Asked for a confirm-delete on a chat, the agent builds a `div` overlay, sets the body font in `px`, lazy-loads the first image, and sets `aria-invalid` when an empty required field receives focus. GREEN: a `dialog` opened with `showModal`, type in `rem`, `color-scheme` on `html` before paint, the first image present in the HTML with `fetchpriority=\"high\"`, and `aria-invalid` only once the field matches `:user-invalid`.\n\n## Anti-Patterns\n\n- A custom overlay, menu, or disclosure where `dialog`, `popover`, or `details` already does the job.\n- A second color scheme the design did not name.\n- A passing `webapp-testing` run treated as the element choice.\n- An external guide pasted into the answer. The steps above are the procedure.\n\n## Attribution\n\nProcedure written for this catalog. The element, layout, scheme, and first-paint choices are distilled from `GoogleChrome\u002Fmodern-web-guidance` (Apache-2.0) at `4f2b13e25c5815b3f080ca0d983e828d96561a0f`, and the first-paint fixes from `ChromeDevTools\u002Fchrome-devtools-mcp` `skills\u002Fdebug-optimize-lcp` (Apache-2.0) at `af2834411a564d366f9cab63efb046d9084f4dba`. Their text is not copied.\n","# Platform UI\n\nBuild the control, the layout, the scheme, and the first screen with the platform.\n\n## When to Use\n\n- Quality of the result is `ui-ux-review`. The scenario gate is `webapp-testing`.\n- Naming the schemes on a prototype is `design-direction`. This skill declares the schemes that prototype already named.\n- Skip for backend work, scripts, and a change with no HTML, CSS, or first-paint surface.\n- A mark is `logo-design`. This skill does not draw one.\n\n## Procedure\n\n1. **Element.** Use the platform element that already does the job. A custom widget covers only the gap that element does not.\n   - A modal (it blocks the page) is a `dialog` opened with `showModal`. The page behind is inert, focus stays inside, `Esc` closes it, and focus returns to the opener. Light dismiss, when the design asks for it, is `closedby=\"any\"`.\n   - A non-modal overlay is a `popover`.\n   - A disclosure is `details` and `summary`.\n   - Data collection is a `form`. A change uses `method=\"POST\"`. Every control has a `name`. Related controls sit in a `fieldset` with a `legend`. The submit button names the action.\n2. **Layout.** Size the component from its container with `@container`, and the type from the user's font size with `rem`. When the browser chrome changes the visible height, use `dvh`. Give media an `aspect-ratio` so loading does not move the page.\n3. **Scheme.** Put the schemes the design named on the root before first paint: a `\u003Cmeta name=\"color-scheme\">` in the document head and `color-scheme` on `html`. A piece with one scheme declares that one.\n4. **First paint.** The first screen's image and font are in the initial HTML. The image is not `loading=\"lazy\"`; it carries `fetchpriority=\"high\"`. A web font uses `font-display: swap`. A script that is not needed for that first paint uses `defer` or `async`. A long list paints the visible rows.\n5. **Field error.** `aria-invalid` and the visible error arrive together, when the field matches `:user-invalid`. They wait until the user has left the field.\n\n## Completion\n\n- The element, the layout, the scheme, and the first paint each follow the step that applies. A step that the change does not touch is left as it was.\n- `ui-ux-review` still judges the result. `webapp-testing` still gates it.\n\n**Validation scenario (RED).** Asked for a confirm-delete on a chat, the agent builds a `div` overlay, sets the body font in `px`, lazy-loads the first image, and sets `aria-invalid` when an empty required field receives focus. GREEN: a `dialog` opened with `showModal`, type in `rem`, `color-scheme` on `html` before paint, the first image present in the HTML with `fetchpriority=\"high\"`, and `aria-invalid` only once the field matches `:user-invalid`.\n\n## Anti-Patterns\n\n- A custom overlay, menu, or disclosure where `dialog`, `popover`, or `details` already does the job.\n- A second color scheme the design did not name.\n- A passing `webapp-testing` run treated as the element choice.\n- An external guide pasted into the answer. The steps above are the procedure.\n\n## Attribution\n\nProcedure written for this catalog. The element, layout, scheme, and first-paint choices are distilled from `GoogleChrome\u002Fmodern-web-guidance` (Apache-2.0) at `4f2b13e25c5815b3f080ca0d983e828d96561a0f`, and the first-paint fixes from `ChromeDevTools\u002Fchrome-devtools-mcp` `skills\u002Fdebug-optimize-lcp` (Apache-2.0) at `af2834411a564d366f9cab63efb046d9084f4dba`. Their text is not copied.\n",{"name":5,"license":15,"description":7},"master","b4819add93efbaf4d80627118ec34680406b309b","packages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fusage\u002Fskills\u002Fplatform-ui",1,"https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats","https:\u002F\u002Fgithub.com\u002Fmuratovv","2026-11-05 20:59:10",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add muratovv\u002Fai-hats --skill platform-ui",{"tool":58,"command":59},"bunx","bunx skills add muratovv\u002Fai-hats --skill platform-ui",{"tool":61,"command":62},"pnpm","pnpm dlx skills add muratovv\u002Fai-hats --skill platform-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fusage\u002Fskills\u002Fplatform-ui\u002FSKILL.md",true,[],[67,93,118,141,165,179],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":40},"01M6PVFB1SM738R2SRSRSF7CY6","tool-evaluation-protocol","Time-bounded protocol for evaluating new tools, libraries, or methodologies before adoption. Use when evaluating a candidate dependency for the project, researching a methodology (e.g. ML\u002FLLM frameworks, testing approaches), or following up on a hype-driven recommendation.","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fexperimental\u002Fusage\u002Fskills\u002Ftool-evaluation-protocol\u002FSKILL.md",[],[74,75,76,77,78,79,80,81,82,83,31,84,85,86,87,88,89,90,91,92],"protocol","Evaluation","tool","tool evaluation protocol","testing","ml","libraries","adoption","methodology","Tools","dependency","up","frameworks","time","project","recommendation","for","bounded","candidate",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":40},"01M6PVF7HATBEX1G7N50E2QT57","systematic-debugging","4-phase bug-fix protocol (evidence, pattern, hypothesis, verify). Use when investigating any error, failure, or unexpected behavior, handling bug reports from users or monitoring, or diagnosing test failures with non-obvious causes.","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fexperimental\u002Fusage\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[],[100,101,102,103,74,104,105,106,107,108,31,109,110,111,112,113,114,115,116,117],"systematic debugging","debugging","systematic","test","monitoring","hypothesis","verify","behavior","fix","evidence","bug","reports","pattern","users","error","with","bug-fix","phase",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":129,"publishedAt":40},"01M6PVF3MTQN3RPF73AN34856J","skill-template","Canonical template and validation guide for ai-hats skills. Use when creating a new skill, reviewing an existing one for structural compliance, or deciding which pattern fits a new behavior.","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fexperimental\u002Fusage\u002Fskills\u002Fskill-template\u002FSKILL.md",[124],{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[130,131,132,133,134,107,135,31,136,112,137,138,139,90,140],"template","skill template","validation","compliance","hats","guide","new skill","structural","canonical","which","Existing",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":148,"publishedAt":40},"01M6PVF06SCV28QARM5MQPANC9","skill-optimization","Audit and refactor library components to eliminate redundancy and staleness. Use during periodic library maintenance, after adding multiple new skills or rules, when a role's token budget is too high, or after retrospectives identify component issues.","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fexperimental\u002Fusage\u002Fskills\u002Fskill-optimization\u002FSKILL.md",[147],{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},[149,150,151,152,153,154,155,156,157,158,31,159,160,161,162,163,164],"Optimization","skill optimization","components","component","issues","library","audit","refactor","Budget","Rules","periodic","maintenance","token","token budget","role","high",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":171,"publishedAt":40},"01M6PVEXM9717016T9MW82HDCT","silent-fallback-gate","PreToolUse hook — refuses an Edit or Write that adds an inert broad except. Use when a Python edit was blocked for a silent fallback.","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fexperimental\u002Fusage\u002Fskills\u002Fsilent-fallback-gate\u002FSKILL.md",[],[172,173,174,175,176,177,31,178,90],"gate","fallback","silent fallback gate","python","write","edit","hook",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":186,"publishedAt":40},"01M6PVESM49C5NT7SB7N3F76VS","retro-to-framework","Convert an observation about agent behavior — from a retrospective or from a single incident — into a framework-level change (hook, rule, skill, skill update). Use after a retrospective identifies problems that are not project-specific, after an incident where an agent misapplied a component it had read, when CLAUDE.md band-aids accumulate (more than 3 per-project rules that could be generic), or when the same problem recurs across multiple projects.","https:\u002F\u002Fgithub.com\u002Fmuratovv\u002Fai-hats\u002Fblob\u002Fmaster\u002Fpackages\u002Fai-hats-library\u002Fsrc\u002Fai_hats_library\u002Fexperimental\u002Fusage\u002Fskills\u002Fretro-to-framework\u002FSKILL.md",[185],{"categoryNo":125,"categoryName":126,"taxonomyType":127,"taxonomyTypeDesc":128},[187,188,189,190,152,191,192,193,158,107,31,194,195,88,196,197,198,199,200,201],"framework","retro","retro to framework","change","retrospective","projects","convert","incident","across","problem","about","more","skill update","single","generic"]