[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71R7H1RA7CQ568DHRK37PE2":3,"skill-same:01M71R7H1RA7CQ568DHRK37PE2":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":13,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M71R7H1RA7CQ568DHRK37PE2","ui-engine",null,"UI system — Grid\u002FFlexbox\u002F@layer\u002F:has(), container queries, compositor-only animation, OKLCH tokens, component patterns","LuisAlbertoMK\u002Fgentleman-agent-gh","LuisAlbertoMK","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96153499?v=4","01M71QZX0CF9KKGQZ8ZN9BME63","01M71QZX11P5X6Z27HE1GQDF71",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fui-engine\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"engine","ui","ui engine","queries","grid","dark mode","components","query","only","design","container","hooks","mode","tokens","system","page","dark","css","compositor","Animation","2026-11-10 13:02:02",false,"---\nname: ui-engine\ndescription: \"UI system — Grid\u002FFlexbox\u002F@layer\u002F:has(), container queries, compositor-only animation, OKLCH tokens, component patterns\"\ntriggers: \"ui, layout, responsive, animation, design tokens, css, grid, flexbox, container query, dark mode, component layout, page layout, component patterns, hooks, compound components, state management\"\nchangelog: docs\u002Fciclos\u002Fcycle28-20260815.md\n---\n\n## When to Use\nUI system — Grid\u002FFlexbox\u002F@layer\u002F:has(), container queries, c\n\n## Decision Tree\n`1D→Flex|2D→Grid|Child→Subgrid|Parent→:has()|Unknown→auto-fit,minmax(280px,1fr)|CQ(container-type:inline-size)|Page→MQ`\n## Layout\n`.flex{display:flex;flex-wrap:wrap;gap:1rem}.flex>*,.fi{flex:1 1 250px;min-inline-size:0}`\n`.ga{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}`\n`.pg{display:grid;grid-template-areas:\"hd hd\"\"sd mn\"\"ft ft\";grid-template-columns:250px 1fr}`\n`@layer base,components,utilities,overrides;`\nFlex:`flex:1`|`1 1 250px`|`auto`push|`margin:auto`center|`shrink:0`. Grid:`span2`|`area:hd`|`place-items:center`. Max3nest.\n## Responsive\nMQ=page. CQ=components.\n`.card-wrapper{container-type:inline-size;container-name:card-cq}`\n`@container card-cq(min-width:400px){.card-inner{display:grid;grid-template-columns:240px 1fr}}`\n`auto-fit+minmax(280px,1fr)`|`inline-size`✅|`size`❌\n\n## Tokens\nPRIM→SEM→COMP:`--blue-500→--primary→--btn-bg`\n`--pri:oklch(55%.18 255);--sf:oklch(99%0 0);--tx:oklch(20%.02 260)`\n`--s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px`\n`--xs:clamp(.75rem,1.5vw,.8rem);--base:clamp(1rem,2.5vw,1.125rem);--xl:clamp(1.25rem,3.5vw,1.5rem)`\n`:root{color-scheme:light dark}[data-theme=\"dark\"]{--sf:oklch(15%.02 260);--tx:oklch(90%.02 260)}`\nOKLCH>HSL:perceptual,dark,wide-gamut,≥4.5:1. `vw`=page,`cqi`=container.\n\n## Animation\n4p:State·Feedback·Attention·Spatial. Else cut. Only `transform`\u002F`opacity`.\n`--eo:cubic-bezier(0,0,.2,1);--ei:cubic-bezier(.4,0,1,1)`\n`.card{transition:transform var(--df) var(--eo),opacity var(--df) var(--eo)}`\n`@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}`\n120ms hover|200ms dropdown|300ms modal|≤500ms. \u003C200ms\u002Felement.\n\n## Components\nHOC→Render Props→Hooks→Headless. Use hooks, render props for DnD\u002Fanim.\n`\u003CTab.Group>\u003CTab.List>...\u003C\u002FTab.List>\u003CTab.Panels>...\u003C\u002FTab.Panels>\u003C\u002FTab.Group>`\nState:URL→SC→TanStack Query→useState→Zustand(default)→Redux(rare). RSC:no useState\u002FuseEffect. `'use client'` leaves.\n\n## Anti-Patterns\nFlex2D·Grid1D·!important vs @layer·flex:1 w\u002Fo min-inline-size:0·container-type:size w\u002Fo block-size·grid-auto-flow:dense·MQ for components·Decorative·>500ms·transition:all·HSL\u002FRGB·Fixed font·cqi outside container·Prop drill>3L·DerivedStateInUseEffect·Context high-freq·HOCs new·Redux default\n## Loading: ui-engine→baseline-ui→accessibility→performance\n","## When to Use\nUI system — Grid\u002FFlexbox\u002F@layer\u002F:has(), container queries, c\n\n## Decision Tree\n`1D→Flex|2D→Grid|Child→Subgrid|Parent→:has()|Unknown→auto-fit,minmax(280px,1fr)|CQ(container-type:inline-size)|Page→MQ`\n## Layout\n`.flex{display:flex;flex-wrap:wrap;gap:1rem}.flex>*,.fi{flex:1 1 250px;min-inline-size:0}`\n`.ga{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}`\n`.pg{display:grid;grid-template-areas:\"hd hd\"\"sd mn\"\"ft ft\";grid-template-columns:250px 1fr}`\n`@layer base,components,utilities,overrides;`\nFlex:`flex:1`|`1 1 250px`|`auto`push|`margin:auto`center|`shrink:0`. Grid:`span2`|`area:hd`|`place-items:center`. Max3nest.\n## Responsive\nMQ=page. CQ=components.\n`.card-wrapper{container-type:inline-size;container-name:card-cq}`\n`@container card-cq(min-width:400px){.card-inner{display:grid;grid-template-columns:240px 1fr}}`\n`auto-fit+minmax(280px,1fr)`|`inline-size`✅|`size`❌\n\n## Tokens\nPRIM→SEM→COMP:`--blue-500→--primary→--btn-bg`\n`--pri:oklch(55%.18 255);--sf:oklch(99%0 0);--tx:oklch(20%.02 260)`\n`--s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px`\n`--xs:clamp(.75rem,1.5vw,.8rem);--base:clamp(1rem,2.5vw,1.125rem);--xl:clamp(1.25rem,3.5vw,1.5rem)`\n`:root{color-scheme:light dark}[data-theme=\"dark\"]{--sf:oklch(15%.02 260);--tx:oklch(90%.02 260)}`\nOKLCH>HSL:perceptual,dark,wide-gamut,≥4.5:1. `vw`=page,`cqi`=container.\n\n## Animation\n4p:State·Feedback·Attention·Spatial. Else cut. Only `transform`\u002F`opacity`.\n`--eo:cubic-bezier(0,0,.2,1);--ei:cubic-bezier(.4,0,1,1)`\n`.card{transition:transform var(--df) var(--eo),opacity var(--df) var(--eo)}`\n`@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}`\n120ms hover|200ms dropdown|300ms modal|≤500ms. \u003C200ms\u002Felement.\n\n## Components\nHOC→Render Props→Hooks→Headless. Use hooks, render props for DnD\u002Fanim.\n`\u003CTab.Group>\u003CTab.List>...\u003C\u002FTab.List>\u003CTab.Panels>...\u003C\u002FTab.Panels>\u003C\u002FTab.Group>`\nState:URL→SC→TanStack Query→useState→Zustand(default)→Redux(rare). RSC:no useState\u002FuseEffect. `'use client'` leaves.\n\n## Anti-Patterns\nFlex2D·Grid1D·!important vs @layer·flex:1 w\u002Fo min-inline-size:0·container-type:size w\u002Fo block-size·grid-auto-flow:dense·MQ for components·Decorative·>500ms·transition:all·HSL\u002FRGB·Fixed font·cqi outside container·Prop drill>3L·DerivedStateInUseEffect·Context high-freq·HOCs new·Redux default\n## Loading: ui-engine→baseline-ui→accessibility→performance\n",{"name":5,"triggers":48,"changelog":49,"description":7},"ui, layout, responsive, animation, design tokens, css, grid, flexbox, container query, dark mode, component layout, page layout, component patterns, hooks, compound components, state management","docs\u002Fciclos\u002Fcycle28-20260815.md","main","4af6946b30783e2c8f9182082324d530fc28f838","docs\u002Fciclos\u002Fc28-w1-backup\u002Fui-engine","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK","2026-11-10 18:34:27",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill ui-engine",{"tool":62,"command":63},"bunx","bunx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill ui-engine",{"tool":65,"command":66},"pnpm","pnpm dlx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill ui-engine","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fui-engine\u002FSKILL.md",true,[],[71,105,125,150,176,204],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":89,"publishedAt":43},"01M71R7K35P668DYEPYGDQP2QA","web-quality-audit","Comprehensive web audit: performance, a11y, SEO, responsive, animation, design tokens.","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fweb-quality-audit\u002FSKILL.md",[77,82,85,86],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":87,"categoryName":88,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000035","市场营销",[90,91,92,93,94,32,95,96,97,24,98,42,99,38,100,101,102,36,103,104],"web","audit","web quality audit","quality","quality audit","review","performance","website","seo","Lighthouse","ui audit","optimize","responsive","design audit","a11y",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":113,"publishedAt":43},"01M71R7EPMZFKB833WE4B3GTHC","baseline-ui","Anti-slop UI — layout, typography, responsive, animation, tokens. Use for cleanup or polish.","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fbaseline-ui\u002FSKILL.md",[111,112],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[24,114,115,32,95,116,117,42,118,119,33,120,100,30,36,121,27,122,123,124],"baseline","baseline ui","design review","cleanup","fix","use","anti-slop","interface","for","slop","generic",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":134,"publishedAt":43},"01M71R7CWK3FBW77Z8WD9GXQFE","skill-creator","Create new AI agent skills following Agent Skills spec -- auto-bootstrap unknown tasks, define structure, register in AGENTS.md","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fskill-creator\u002FSKILL.md",[131],{"categoryNo":132,"categoryName":133,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000023","Skill与智能体开发",[135,136,137,138,139,140,141,142,143,144,145,146,147,148,149],"skill creator","creator","spec","ai agent","bootstrap","tasks","create","auto","structure","define","register","ai skill","unknown","2026","new",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":158,"publishedAt":43},"01M71R78DZM1GA16F1KN8ND926","senior-engineer","Apply senior engineering competencies — system design, trade-off analysis, delegation, mentoring, and tech debt strategy","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fsenior-engineer\u002FSKILL.md",[156,157],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[159,160,161,32,162,163,164,165,166,37,167,168,169,170,171,172,173,174,175,148],"engineer","senior","senior engineer","delegation","engineering","senior architect","analysis","architect","strategy","tech debt","system design","trade","tech","senior engineering","trade-offs","apply","debt",{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":186,"publishedAt":43},"01M71R74WQTXZMG3219RND96CE","prompt-engineering","Design effective prompts using SPEARS framework — scope, principles, examples, assertions, refinements, with ReAct and multi-agent patterns","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fprompt-engineering\u002FSKILL.md",[182,185],{"categoryNo":183,"categoryName":184,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":132,"categoryName":133,"taxonomyType":80,"taxonomyTypeDesc":81},[187,163,188,32,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,148],"prompt engineering","prompt","security","react","framework","examples","improve","multi-agent","improve prompt","prompts","patterns","agent patterns","scope","multi","principles","with","assertions",{"skillNo":205,"name":206,"nameZh":6,"description":207,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":208,"categories":209,"keywords":218,"publishedAt":43},"01M71R7355SPXASHS08FPAQJMS","cognitive-doc-design","Design docs that reduce cognitive load. Trigger: writing guides, READMEs, RFCs, onboarding, architecture, or review-facing docs.","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.archive\u002Fskills\u002Fcognitive-doc-design\u002FSKILL.md",[210,211,214,215],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},{"categoryNo":212,"categoryName":213,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":216,"categoryName":217,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000036","内容创作者",[32,219,220,221,95,222,223,224,225,226,227,228,229,230,231,232,148],"doc","cognitive doc design","writing","docs","architecture","documentation","onboarding","RFC","README","trigger","design docs","guides","load","reduce"]