[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6P4A3PECPZMC044214SH6GV":3,"skill-same:01M6P4A3PECPZMC044214SH6GV":69},{"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":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M6P4A3PECPZMC044214SH6GV","fragiola-ui",null,"Build every user interface with Fragiola UI (shadcn-style registry on Base UI + Tailwind v4), following its examples and rules. Use before creating or changing any UI component.","maurodesouza\u002Fai-kanban-app-lab","maurodesouza","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F54520907?v=4","01M6P3VA3WVQC4XZ0RQWJCDKW6","Mauro de Souza","01M6P3VA7YK770SNWT12GBEGAF",1,"MIT","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-09\u002F.agents\u002Fskills\u002Ffragiola-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,40,41],"fragiola ui","ui","use","interface","with","style","base","build","ui component","tailwind v4","component","user","base ui","Rules","Tailwind","examples","shadcn","registry","2026-11-10 10:12:30",false,"---\nname: fragiola-ui\ndescription: Build every user interface with Fragiola UI (shadcn-style registry on Base UI + Tailwind v4), following its examples and rules. Use before creating or changing any UI component.\n---\n\n# User Input\n\n```text\n$ARGUMENTS\n```\n\n# Objective\n\nEvery interface is built with Fragiola UI and follows its patterns.\n\nDo not hand-roll a component that Fragiola provides. Do not mix in another component library.\n\n# 1. Reference\n\n* Source: `~\u002Forganizations\u002Ffragiola\u002Fui` (GitHub `fragiola\u002Fui`).\n* Docs: https:\u002F\u002Ffragiola.com\u002Fui\n* Before using any component, read in the reference:\n  * `AGENTS.md` - the non-negotiable rules.\n  * `docs\u002Farchitecture.md` - palettes, style families, composition.\n  * `examples\u002Freact\u002Fsrc\u002Fexamples\u002F\u003Ccomponent>.tsx` - the canonical usage. Imitate it.\n  * `site\u002Fdocs\u002F\u003Ccategory>\u002F\u003Ccomponent>.mdx` - the component documentation.\n  * `packages\u002Fregistry\u002Fregistry\u002Fui\u002F\u003Ccomponent>.tsx` - the component parts, when the example is not enough.\n\nIf the local reference does not exist, use the docs site.\n\n# 2. Installation\n\nFragiola has no npm package. Components are copied into the project with the shadcn CLI.\n\n1. Make sure `components.json` has the registry:\n\n```json\n{\n  \"registries\": {\n    \"@fragiola\": {\n      \"url\": \"https:\u002F\u002Ffragiola.com\u002Fr\u002F{name}.json\"\n    }\n  }\n}\n```\n\n2. Install each component the UI needs:\n\n```bash\nnpx shadcn@latest add @fragiola\u002F\u003Ccomponent>\n```\n\n3. Import `styles\u002Fglobal.css` and every installed palette once in the CSS entry, after Tailwind.\n\nVerify the shadcn CLI usage with `epic-current-documentation`.\n\nInstalled files are owned by the project, but prefer composition over editing them.\n\n## Fallback: shadcn + conversion\n\nUse the fallback when the Fragiola registry is unreachable or Fragiola has no equivalent component.\n\nDo not copy files manually from the reference and do not point `components.json` to a local server.\n\n1. Install the component from the default shadcn registry (`npx shadcn@latest add \u003Ccomponent>`), preferring its Base UI flavor when available (verify with `epic-current-documentation`).\n2. Never let the shadcn CLI overwrite a file already installed from Fragiola. If it asks, answer no.\n3. Convert the installed component to Fragiola (section 3), using these mappings (from `docs\u002Fport-report*.md` in the reference):\n\n| shadcn | Fragiola |\n| --- | --- |\n| `bg-background text-foreground` | `palette-surface bg-palette-base text-palette-contrast` |\n| `bg-popover text-popover-foreground`, `bg-card text-card-foreground` | `palette-raised bg-palette-base text-palette-contrast` |\n| `text-muted-foreground` | `text-palette-accent\u002F85` |\n| `bg-muted`, `bg-accent`, hover backgrounds | `bg-palette-soft` |\n| `text-accent-foreground` | `text-palette-accent` |\n| `border`, `border-input`, `bg-border`, `ring-foreground\u002F10 ring-1` | `border-palette-line` \u002F `bg-palette-line` \u002F `border border-palette-line` |\n| `bg-primary text-primary-foreground` | `bg-palette-base text-palette-contrast` inside the chosen palette (e.g. `palette-blue`) |\n| `data-[state=checked]:bg-primary` | `data-checked:bg-palette-base` |\n| `destructive` variant \u002F classes | `palette-danger` class, no variant |\n| `focus-visible:ring-*` | `field-focus:outline-2 field-focus:outline-palette-ring` |\n| `dark:*` blocks | removed; palettes handle both themes |\n| `asChild` | `render` |\n| `pl`\u002F`pr`, `ml`\u002F`mr`, `left`\u002F`right`, `border-l`\u002F`border-r` | `ps`\u002F`pe`, `ms`\u002F`me`, `start`\u002F`end`, `border-s`\u002F`border-e` |\n| input with its own border \u002F background \u002F height | body moved to the `Field` frame |\n| `!important` | removed; report the architectural problem |\n\n4. Reuse existing Fragiola families and atoms (`Clickable`, `Field`, `Text`, popup \u002F menu families) instead of keeping shadcn's duplicated styles.\n5. When nothing in the table fits, pick the role by meaning (section 3) or use another existing palette. Never add a new token or role.\n6. After converting, no shadcn token may remain: search the file for `primary`, `secondary`, `muted`, `accent-foreground`, `popover`, `card`, `destructive`, `foreground`, `background`, `input`, `ring-offset`, `dark:` and `asChild`.\n7. Report the converted component in the final output as `converted from shadcn`.\n\n# 3. Fragiola Rules\n\nFollow the rules from `AGENTS.md`:\n\n* Color comes from palettes (`palette-surface`, `palette-raised`, ...) and their 6 roles (`base`, `soft`, `line`, `contrast`, `accent`, `ring`), e.g. `bg-palette-base`, `border-palette-line`, `text-palette-contrast`. No ad-hoc colors.\n* Secondary text uses `text-palette-accent\u002F85`.\n* Use `render`, never `asChild`.\n* Compose parts (`Dialog.Root`, `Dialog.Content`, `Field.Root`, `Field.Label`, ...) exactly as the examples do.\n* Controls carry no body: border, background, height and focus ring live on the field frame (`Field`), not on the input.\n* Logical properties on the inline axis (`ps`\u002F`pe`, `ms`\u002F`me`, `border-s`\u002F`border-e`, `start`\u002F`end`).\n* No `!important`.\n* Use Tailwind scales; no arbitrary values when a scale value exists.\n\n# 4. Fragiola + Command Bus\n\nFragiola components are presentation. They follow `command-bus-architecture`:\n\n* Overlays (`Dialog`, `AlertDialog`, `Drawer`, `Popover`, ...) are **controlled**: `open` comes from a store `$\u003Cpart>UI`, and `onOpenChange` dispatches an action (e.g. `actions.board.cardDialog.change({ open })`). The Handle decides and updates the store.\n* Values, labels, texts, variants and disabled states come from `$\u003Cpart>UI`.\n* Clicks and submits dispatch actions through `actions`.\n* No logic inside the component.\n\n# 5. Verify by Compiling\n\nA Tailwind class that does not exist fails silently. After building the UI:\n\n* Run typecheck, lint and build.\n* Check that every class used exists in Fragiola's theme \u002F palettes or in Tailwind.\n\n# 6. Final Output\n\nReturn:\n\n* Fragiola components installed\n* Components converted from shadcn (fallback), with the reason\n* Components created or changed\n* Palettes used\n* Verification performed\n\nReturn this output to the calling skill and continue its flow. Do not end the run here unless this skill was invoked directly by the user.\n","# User Input\n\n```text\n$ARGUMENTS\n```\n\n# Objective\n\nEvery interface is built with Fragiola UI and follows its patterns.\n\nDo not hand-roll a component that Fragiola provides. Do not mix in another component library.\n\n# 1. Reference\n\n* Source: `~\u002Forganizations\u002Ffragiola\u002Fui` (GitHub `fragiola\u002Fui`).\n* Docs: https:\u002F\u002Ffragiola.com\u002Fui\n* Before using any component, read in the reference:\n  * `AGENTS.md` - the non-negotiable rules.\n  * `docs\u002Farchitecture.md` - palettes, style families, composition.\n  * `examples\u002Freact\u002Fsrc\u002Fexamples\u002F\u003Ccomponent>.tsx` - the canonical usage. Imitate it.\n  * `site\u002Fdocs\u002F\u003Ccategory>\u002F\u003Ccomponent>.mdx` - the component documentation.\n  * `packages\u002Fregistry\u002Fregistry\u002Fui\u002F\u003Ccomponent>.tsx` - the component parts, when the example is not enough.\n\nIf the local reference does not exist, use the docs site.\n\n# 2. Installation\n\nFragiola has no npm package. Components are copied into the project with the shadcn CLI.\n\n1. Make sure `components.json` has the registry:\n\n```json\n{\n  \"registries\": {\n    \"@fragiola\": {\n      \"url\": \"https:\u002F\u002Ffragiola.com\u002Fr\u002F{name}.json\"\n    }\n  }\n}\n```\n\n2. Install each component the UI needs:\n\n```bash\nnpx shadcn@latest add @fragiola\u002F\u003Ccomponent>\n```\n\n3. Import `styles\u002Fglobal.css` and every installed palette once in the CSS entry, after Tailwind.\n\nVerify the shadcn CLI usage with `epic-current-documentation`.\n\nInstalled files are owned by the project, but prefer composition over editing them.\n\n## Fallback: shadcn + conversion\n\nUse the fallback when the Fragiola registry is unreachable or Fragiola has no equivalent component.\n\nDo not copy files manually from the reference and do not point `components.json` to a local server.\n\n1. Install the component from the default shadcn registry (`npx shadcn@latest add \u003Ccomponent>`), preferring its Base UI flavor when available (verify with `epic-current-documentation`).\n2. Never let the shadcn CLI overwrite a file already installed from Fragiola. If it asks, answer no.\n3. Convert the installed component to Fragiola (section 3), using these mappings (from `docs\u002Fport-report*.md` in the reference):\n\n| shadcn | Fragiola |\n| --- | --- |\n| `bg-background text-foreground` | `palette-surface bg-palette-base text-palette-contrast` |\n| `bg-popover text-popover-foreground`, `bg-card text-card-foreground` | `palette-raised bg-palette-base text-palette-contrast` |\n| `text-muted-foreground` | `text-palette-accent\u002F85` |\n| `bg-muted`, `bg-accent`, hover backgrounds | `bg-palette-soft` |\n| `text-accent-foreground` | `text-palette-accent` |\n| `border`, `border-input`, `bg-border`, `ring-foreground\u002F10 ring-1` | `border-palette-line` \u002F `bg-palette-line` \u002F `border border-palette-line` |\n| `bg-primary text-primary-foreground` | `bg-palette-base text-palette-contrast` inside the chosen palette (e.g. `palette-blue`) |\n| `data-[state=checked]:bg-primary` | `data-checked:bg-palette-base` |\n| `destructive` variant \u002F classes | `palette-danger` class, no variant |\n| `focus-visible:ring-*` | `field-focus:outline-2 field-focus:outline-palette-ring` |\n| `dark:*` blocks | removed; palettes handle both themes |\n| `asChild` | `render` |\n| `pl`\u002F`pr`, `ml`\u002F`mr`, `left`\u002F`right`, `border-l`\u002F`border-r` | `ps`\u002F`pe`, `ms`\u002F`me`, `start`\u002F`end`, `border-s`\u002F`border-e` |\n| input with its own border \u002F background \u002F height | body moved to the `Field` frame |\n| `!important` | removed; report the architectural problem |\n\n4. Reuse existing Fragiola families and atoms (`Clickable`, `Field`, `Text`, popup \u002F menu families) instead of keeping shadcn's duplicated styles.\n5. When nothing in the table fits, pick the role by meaning (section 3) or use another existing palette. Never add a new token or role.\n6. After converting, no shadcn token may remain: search the file for `primary`, `secondary`, `muted`, `accent-foreground`, `popover`, `card`, `destructive`, `foreground`, `background`, `input`, `ring-offset`, `dark:` and `asChild`.\n7. Report the converted component in the final output as `converted from shadcn`.\n\n# 3. Fragiola Rules\n\nFollow the rules from `AGENTS.md`:\n\n* Color comes from palettes (`palette-surface`, `palette-raised`, ...) and their 6 roles (`base`, `soft`, `line`, `contrast`, `accent`, `ring`), e.g. `bg-palette-base`, `border-palette-line`, `text-palette-contrast`. No ad-hoc colors.\n* Secondary text uses `text-palette-accent\u002F85`.\n* Use `render`, never `asChild`.\n* Compose parts (`Dialog.Root`, `Dialog.Content`, `Field.Root`, `Field.Label`, ...) exactly as the examples do.\n* Controls carry no body: border, background, height and focus ring live on the field frame (`Field`), not on the input.\n* Logical properties on the inline axis (`ps`\u002F`pe`, `ms`\u002F`me`, `border-s`\u002F`border-e`, `start`\u002F`end`).\n* No `!important`.\n* Use Tailwind scales; no arbitrary values when a scale value exists.\n\n# 4. Fragiola + Command Bus\n\nFragiola components are presentation. They follow `command-bus-architecture`:\n\n* Overlays (`Dialog`, `AlertDialog`, `Drawer`, `Popover`, ...) are **controlled**: `open` comes from a store `$\u003Cpart>UI`, and `onOpenChange` dispatches an action (e.g. `actions.board.cardDialog.change({ open })`). The Handle decides and updates the store.\n* Values, labels, texts, variants and disabled states come from `$\u003Cpart>UI`.\n* Clicks and submits dispatch actions through `actions`.\n* No logic inside the component.\n\n# 5. Verify by Compiling\n\nA Tailwind class that does not exist fails silently. After building the UI:\n\n* Run typecheck, lint and build.\n* Check that every class used exists in Fragiola's theme \u002F palettes or in Tailwind.\n\n# 6. Final Output\n\nReturn:\n\n* Fragiola components installed\n* Components converted from shadcn (fallback), with the reason\n* Components created or changed\n* Palettes used\n* Verification performed\n\nReturn this output to the calling skill and continue its flow. Do not end the run here unless this skill was invoked directly by the user.\n",{"name":5,"description":7},"main","6f1867f215cf86d20099b6dfb1164c79abfb87ce","lab-09\u002F.agents\u002Fskills\u002Ffragiola-ui",0,"https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab","https:\u002F\u002Fgithub.com\u002Fmaurodesouza","Software Engineer","2026-10-28 02:01:00",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add maurodesouza\u002Fai-kanban-app-lab --skill fragiola-ui",{"tool":61,"command":62},"bunx","bunx skills add maurodesouza\u002Fai-kanban-app-lab --skill fragiola-ui",{"tool":64,"command":65},"pnpm","pnpm dlx skills add maurodesouza\u002Fai-kanban-app-lab --skill fragiola-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-09\u002F.agents\u002Fskills\u002Ffragiola-ui\u002FSKILL.md",true,[],[70,94,111,135,147,158],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":42},"01M6P519M13JTBZDK3ZJP48P2C","utils-implementation","Write and organize utils (pure helpers for formatting, mapping, filtering, math, parsing, ids, storage) as one namespace object per domain with clear, readable names. Use before creating or changing any util.","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-10\u002F.codex\u002Fskills\u002Futils-implementation\u002FSKILL.md",[],[77,78,79,80,81,82,83,84,85,86,87,88,28,26,89,90,91,92,93],"utils implementation","implementation","utils","parsing","for","object","storage","ids","clear","math","write","filtering","organize","domain","mapping","formatting","as",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":105,"publishedAt":42},"01M6P516BP8GPRJHPGVFWRF5T8","test-writer","Write tests for the current implementation","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-10\u002F.codex\u002Fskills\u002Ftest-writer\u002FSKILL.md",[100],{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[106,107,108,109,87,78,110,81],"test","test writer","writer","write tests","tests",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":42},"01M6P50M0Z2AQH32ZTV90D5V32","tech-lead","Analyze a project, turn the user's goal into an implementation-ready GitHub Epic and Issues (following project rules, the Command Bus architecture and Fragiola UI), then start epic-implementer automatically (use the no-implement flag to stop after planning).","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-10\u002F.codex\u002Fskills\u002Ftech-lead\u002FSKILL.md",[],[118,119,120,121,122,123,124,125,126,127,25,128,129,37,130,131,26,132,133,134],"tech","tech lead","ready","command bus architecture","implement","github","EPIC","architecture","planning","issues","start","analyze","command","implementer","goal","stop","project",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":42},"01M6P50GND99S9QQY6KWPP6NW9","tech-lead-publish","Publish a final Epic and its Issues to GitHub, linked and labeled, keeping dependency and execution information. Sub-skill of tech-lead.","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-10\u002F.codex\u002Fskills\u002Ftech-lead-publish\u002FSKILL.md",[],[142,119,118,143,123,127,144,145,124,146],"tech lead publish","publish","execution","dependency","information",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":153,"publishedAt":42},"01M6P50D4P2SQSYZM7TZMHZA0J","setup-command-system","Install the Command System architecture in the project","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-10\u002F.codex\u002Fskills\u002Fsetup-command-system\u002FSKILL.md",[],[154,130,155,156,125,157,134],"setup command system","system","setup","install",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":42},"01M6P50A032630X9JDDZYJMNV3","reviewer","Review code changes and provide feedback","https:\u002F\u002Fgithub.com\u002Fmaurodesouza\u002Fai-kanban-app-lab\u002Fblob\u002Fmain\u002Flab-10\u002F.codex\u002Fskills\u002Freviewer\u002FSKILL.md",[],[160,165,166,167,168,169],"code","review code","feedback","changes","review"]