[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71R6P8PMMZNCTKE9M2CAEPP":3,"skill-same:01M71R6P8PMMZNCTKE9M2CAEPP":71},{"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":51,"commitSha":52,"skillDirectory":53,"forksCount":13,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M71R6P8PMMZNCTKE9M2CAEPP","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\u002F.agents\u002Fskills\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\ntoken_budget: 2900\n---\n## Decision Tree\n1D→Flex | 2D→Grid | Child→Subgrid | Parent→:has() | Unknown→auto-fit,minmax(280px,1fr) | CQ(container-type:inline-size) | Page→MQ\n\n## Layout\n`@layer base,components,utilities,overrides;` Flex:1|1 1 250px|auto|shrink:0. Grid:span2|area:hd|center. Max3nest.\n\n## Animation\n4p: State·Feedback·Attention·Spatial; else cut. Only `transform`\u002F`opacity`; 120\u002F200\u002F300ms; ≤500ms; \u003C200ms\u002Felem.\n\n## Tokens\nPRIM→SEM→COMP: `--blue-500→--primary→--btn-bg`. OKLCH>HSL: perceptual, ≥4.5:1. `vw`=page, `cqi`=container.\n\n## A11y\n`color-scheme:light dark`→native controls. `:focus-visible{outline:2px solid var(--pri);outline-offset:2px}`. Never `outline:none`. Contrast≥4.5:1.\n\n## Output\n`UI-IMPL:\u003Ccomponent>—\u003Cdate> PATTERN:[flex|grid|cq|tokens]\u003Cused> VERIFY:[a11y|contrast|reduced-motion|CQ]→\u003Cpass\u002Ffail>`\n\n## Anti-Patterns\nFlex2D · Grid1D · !important vs @layer · flex:1 w\u002Fo min-inline-size:0 · MQ for components · >500ms · transition:all · HSL\u002FRGB · cqi outside container\n\n## Anti-Rationalization\n| Rationalization | Red Flag | Verification |\n|-----------------|----------|--------------|\n| \"Grid cuando Flexbox basta\" | 1D layout con Grid | Decision Tree: 1D→Flex 2D→Grid |\n| \"Animar layout properties\" | transition:all \u002F width\u002Fheight | Transform+opacity only + reduced-motion |\n| \"Tokens ad-hoc\" | hex\u002FHSL sin chain | PRIM→SEM→COMP OKLCH + ≥4.5:1 |\n\n## Red Flags\n- `transition: all` or width\u002Fheight animation merged → STOP, restrict to `transform`\u002F`opacity` + `prefers-reduced-motion`\n- `!important` overriding `@layer` order → BLOCKER, fix the cascade layers instead\n- `outline: none` with no `:focus-visible` replacement → reject, restore visible focus (contrast ≥4.5:1)\n- `cqi` units outside a `container-type` scope → STOP, declare the container first\n- Hex\u002FHSL tokens bypassing PRIM→SEM→COMP chain → escalate to a token audit before ship\n\n## Verification\n- Output matches ## Output contract + file:line citation; cross-ref-check.ps1 → SKILL.md OK\n- Frontmatter (name\u002Fdescription\u002Ftriggers\u002Ftoken_budget) stable; cross-refs exist; no anti-patterns\n- token_budget: total tokens within frontmatter token_budget\n- anti-patterns: none of the listed anti-patterns reintroduced\n\n→ docs\u002Fskills\u002Fui-engine\u002Freference.md · Cross-Refs: baseline-ui | accessibility | performance | web-quality-audit | seo | visual-testing | vision-analyze\n","## Decision Tree\n1D→Flex | 2D→Grid | Child→Subgrid | Parent→:has() | Unknown→auto-fit,minmax(280px,1fr) | CQ(container-type:inline-size) | Page→MQ\n\n## Layout\n`@layer base,components,utilities,overrides;` Flex:1|1 1 250px|auto|shrink:0. Grid:span2|area:hd|center. Max3nest.\n\n## Animation\n4p: State·Feedback·Attention·Spatial; else cut. Only `transform`\u002F`opacity`; 120\u002F200\u002F300ms; ≤500ms; \u003C200ms\u002Felem.\n\n## Tokens\nPRIM→SEM→COMP: `--blue-500→--primary→--btn-bg`. OKLCH>HSL: perceptual, ≥4.5:1. `vw`=page, `cqi`=container.\n\n## A11y\n`color-scheme:light dark`→native controls. `:focus-visible{outline:2px solid var(--pri);outline-offset:2px}`. Never `outline:none`. Contrast≥4.5:1.\n\n## Output\n`UI-IMPL:\u003Ccomponent>—\u003Cdate> PATTERN:[flex|grid|cq|tokens]\u003Cused> VERIFY:[a11y|contrast|reduced-motion|CQ]→\u003Cpass\u002Ffail>`\n\n## Anti-Patterns\nFlex2D · Grid1D · !important vs @layer · flex:1 w\u002Fo min-inline-size:0 · MQ for components · >500ms · transition:all · HSL\u002FRGB · cqi outside container\n\n## Anti-Rationalization\n| Rationalization | Red Flag | Verification |\n|-----------------|----------|--------------|\n| \"Grid cuando Flexbox basta\" | 1D layout con Grid | Decision Tree: 1D→Flex 2D→Grid |\n| \"Animar layout properties\" | transition:all \u002F width\u002Fheight | Transform+opacity only + reduced-motion |\n| \"Tokens ad-hoc\" | hex\u002FHSL sin chain | PRIM→SEM→COMP OKLCH + ≥4.5:1 |\n\n## Red Flags\n- `transition: all` or width\u002Fheight animation merged → STOP, restrict to `transform`\u002F`opacity` + `prefers-reduced-motion`\n- `!important` overriding `@layer` order → BLOCKER, fix the cascade layers instead\n- `outline: none` with no `:focus-visible` replacement → reject, restore visible focus (contrast ≥4.5:1)\n- `cqi` units outside a `container-type` scope → STOP, declare the container first\n- Hex\u002FHSL tokens bypassing PRIM→SEM→COMP chain → escalate to a token audit before ship\n\n## Verification\n- Output matches ## Output contract + file:line citation; cross-ref-check.ps1 → SKILL.md OK\n- Frontmatter (name\u002Fdescription\u002Ftriggers\u002Ftoken_budget) stable; cross-refs exist; no anti-patterns\n- token_budget: total tokens within frontmatter token_budget\n- anti-patterns: none of the listed anti-patterns reintroduced\n\n→ docs\u002Fskills\u002Fui-engine\u002Freference.md · Cross-Refs: baseline-ui | accessibility | performance | web-quality-audit | seo | visual-testing | vision-analyze\n",{"name":5,"triggers":48,"changelog":49,"description":7,"token_budget":50},"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",2900,"main","4af6946b30783e2c8f9182082324d530fc28f838",".agents\u002Fskills\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":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill ui-engine",{"tool":63,"command":64},"bunx","bunx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill ui-engine",{"tool":66,"command":67},"pnpm","pnpm dlx skills add LuisAlbertoMK\u002Fgentleman-agent-gh --skill ui-engine","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fui-engine\u002FSKILL.md",true,[],[72,106,112,132,157,183],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":90,"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",[78,83,86,87],{"categoryNo":79,"categoryName":80,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":84,"categoryName":85,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000035","市场营销",[91,92,93,94,95,42,96,32,97,24,98,99,36,100,101,102,103,104,105,38],"quality","quality audit","web quality audit","audit","web","design audit","website","responsive","seo","ui audit","Lighthouse","performance","review","optimize","a11y",{"skillNo":107,"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":108,"categories":109,"keywords":111,"publishedAt":43},"01M71R7H1RA7CQ568DHRK37PE2","https:\u002F\u002Fgithub.com\u002FLuisAlbertoMK\u002Fgentleman-agent-gh\u002Fblob\u002Fmain\u002Fdocs\u002Fciclos\u002Fc28-w1-backup\u002Fui-engine\u002FSKILL.md",[110],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[25,23,24,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":120,"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",[118,119],{"categoryNo":79,"categoryName":80,"taxonomyType":81,"taxonomyTypeDesc":82},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[121,122,24,42,123,124,125,126,36,127,33,32,128,129,130,100,131,30,27,103],"baseline ui","baseline","generic","slop","for","anti-slop","fix","interface","cleanup","design review","use",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":141,"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",[138],{"categoryNo":139,"categoryName":140,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000023","Skill与智能体开发",[142,143,144,145,146,147,148,149,150,151,152,153,154,155,156],"skill creator","creator","create","structure","register","2026","spec","new","ai skill","auto","define","ai agent","unknown","tasks","bootstrap",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":165,"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",[163,164],{"categoryNo":79,"categoryName":80,"taxonomyType":81,"taxonomyTypeDesc":82},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[166,167,168,169,170,171,172,32,173,174,147,175,176,177,37,178,179,180,181,182],"engineer","senior","senior engineer","system design","trade-offs","senior engineering","delegation","senior architect","analysis","debt","architect","tech","strategy","apply","trade","tech debt","engineering",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":193,"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",[189,192],{"categoryNo":190,"categoryName":191,"taxonomyType":81,"taxonomyTypeDesc":82},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":139,"categoryName":140,"taxonomyType":81,"taxonomyTypeDesc":82},[194,195,182,196,197,32,198,147,199,200,201,202,203,204,205,206,207,208,209,210],"prompt","prompt engineering","scope","improve","react","security","patterns","multi-agent","framework","agent patterns","assertions","examples","with","multi","principles","improve prompt","prompts"]