[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71GWSZWYW1S4ZRGDY2KD853":3,"skill-same:01M71GWSZWYW1S4ZRGDY2KD853":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":18,"publishedAt":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":45,"commitSha":46,"skillDirectory":5,"forksCount":14,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":49,"ownerDescription":50,"updatedAt":51,"install":52,"resources":65},"01M71GWSZWYW1S4ZRGDY2KD853","morphing-icons",null,"Build icon components where any icon morphs into any other through SVG line transformation. Use when asked to \"create morphing icons\", \"build icon transitions\", \"animate between icons\", or \"transform icons\".","agency-black\u002FSkills","agency-black","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F234862658?v=4","01M6HWVFPNGNR5N2CX9ECSAD57","agencia.black","01M719WF77BF3HN0N9FK1APEFY",0,"MIT","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fmorphing-icons\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"morphing icons","icons","content","mdx","index","transform","line","build","transitions","create","components","when","icon","use","animate","SVG","transformation","2026-11-10 10:12:30",false,"---\nname: morphing-icons\ndescription: Build icon components where any icon morphs into any other through SVG line transformation. Use when asked to \"create morphing icons\", \"build icon transitions\", \"animate between icons\", or \"transform icons\".\nlicense: MIT\nmetadata:\n  author: raphael-salaja\n  version: \"1.0.0\"\n  source: \u002Fcontent\u002Fmorphing-icons\u002Findex.mdx\n---\n\n# Morphing Icons\n\nBuild icons that transform through actual shape transformation, not crossfades. Any icon can morph into any other because they share the same underlying 3-line structure.\n\n## Core Concept\n\nEvery icon is composed of exactly **three SVG lines**. Icons that need fewer lines collapse the extras to invisible center points. This constraint enables seamless morphing between any two icons.\n\n## Architecture\n\n### 1. Line Definition\n\nEach line has coordinates and optional opacity:\n\n```ts\ninterface IconLine {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  opacity?: number;\n}\n```\n\n### 2. Collapsed Lines\n\nIcons needing fewer than 3 lines use collapsed lines—zero-length lines at the center:\n\n```ts\nconst CENTER = 7; \u002F\u002F Center of 14x14 viewbox\n\nconst collapsed: IconLine = {\n  x1: CENTER,\n  y1: CENTER,\n  x2: CENTER,\n  y2: CENTER,\n  opacity: 0,\n};\n```\n\n### 3. Icon Definition\n\nEach icon has exactly 3 lines, optional rotation, and optional group:\n\n```ts\ninterface IconDefinition {\n  lines: [IconLine, IconLine, IconLine];\n  rotation?: number;\n  group?: string;\n}\n```\n\n### 4. Rotation Groups\n\nIcons sharing a `group` animate rotation when transitioning between them. Icons without matching groups jump to the new rotation instantly:\n\n```ts\n\u002F\u002F These rotate smoothly between each other\n{ lines: plusLines, rotation: 0, group: \"plus-cross\" }   \u002F\u002F plus\n{ lines: plusLines, rotation: 45, group: \"plus-cross\" }  \u002F\u002F cross\n\n\u002F\u002F These rotate smoothly between each other\n{ lines: arrowLines, rotation: 0, group: \"arrow\" }       \u002F\u002F arrow-right\n{ lines: arrowLines, rotation: 90, group: \"arrow\" }      \u002F\u002F arrow-down\n{ lines: arrowLines, rotation: 180, group: \"arrow\" }     \u002F\u002F arrow-left\n{ lines: arrowLines, rotation: -90, group: \"arrow\" }     \u002F\u002F arrow-up\n```\n\n## Implementation Rules\n\n### `morphing-three-lines`\nEvery icon MUST use exactly 3 lines. No more, no fewer.\n\n**Fail:**\n```ts\nconst checkIcon = {\n  lines: [\n    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },\n    { x1: 5.5, y1: 11, x2: 12, y2: 3 },\n  ], \u002F\u002F Only 2 lines\n};\n```\n\n**Pass:**\n```ts\nconst checkIcon = {\n  lines: [\n    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },\n    { x1: 5.5, y1: 11, x2: 12, y2: 3 },\n    collapsed, \u002F\u002F Third line collapsed\n  ],\n};\n```\n\n### `morphing-use-collapsed`\nUnused lines must use the collapsed constant, not omission or null.\n\n**Fail:**\n```ts\nconst minusIcon = {\n  lines: [\n    { x1: 2, y1: 7, x2: 12, y2: 7 },\n    null,\n    null,\n  ],\n};\n```\n\n**Pass:**\n```ts\nconst minusIcon = {\n  lines: [\n    { x1: 2, y1: 7, x2: 12, y2: 7 },\n    collapsed,\n    collapsed,\n  ],\n};\n```\n\n### `morphing-consistent-viewbox`\nAll icons must use the same viewBox (14x14 recommended).\n\n**Fail:**\n```ts\n\u002F\u002F Mixing viewbox scales\nconst icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; \u002F\u002F 14x14\nconst icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; \u002F\u002F 28x28\n```\n\n**Pass:**\n```ts\nconst VIEWBOX_SIZE = 14;\nconst CENTER = 7;\n\u002F\u002F All coordinates within 0-14 range\n```\n\n### `morphing-group-variants`\nIcons that are rotational variants MUST share the same group and base lines.\n\n**Fail:**\n```ts\n\u002F\u002F Different line definitions for arrows\nconst arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };\nconst arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] }; \u002F\u002F Different!\n```\n\n**Pass:**\n```ts\nconst arrowLines: [IconLine, IconLine, IconLine] = [\n  { x1: 2, y1: 7, x2: 12, y2: 7 },\n  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },\n  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },\n];\n\nconst icons = {\n  \"arrow-right\": { lines: arrowLines, rotation: 0, group: \"arrow\" },\n  \"arrow-down\": { lines: arrowLines, rotation: 90, group: \"arrow\" },\n  \"arrow-left\": { lines: arrowLines, rotation: 180, group: \"arrow\" },\n  \"arrow-up\": { lines: arrowLines, rotation: -90, group: \"arrow\" },\n};\n```\n\n### `morphing-spring-rotation`\nRotation between grouped icons should use spring physics for natural motion.\n\n**Fail:**\n```tsx\n\u003Cmotion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} \u002F>\n```\n\n**Pass:**\n```tsx\nconst rotation = useSpring(definition.rotation ?? 0, activeTransition);\n\n\u003Cmotion.g style={{ rotate: rotation, transformOrigin: \"center\" }} \u002F>\n```\n\n### `morphing-reduced-motion`\nRespect `prefers-reduced-motion` by disabling animations.\n\n**Fail:**\n```tsx\nfunction MorphingIcon({ icon }: Props) {\n  return \u003Cmotion.line animate={...} transition={{ duration: 0.4 }} \u002F>;\n}\n```\n\n**Pass:**\n```tsx\nfunction MorphingIcon({ icon }: Props) {\n  const reducedMotion = useReducedMotion() ?? false;\n  const activeTransition = reducedMotion ? { duration: 0 } : transition;\n  \n  return \u003Cmotion.line animate={...} transition={activeTransition} \u002F>;\n}\n```\n\n### `morphing-jump-non-grouped`\nWhen transitioning between icons NOT in the same group, rotation should jump instantly.\n\n**Fail:**\n```tsx\n\u002F\u002F Always animating rotation regardless of group\nuseEffect(() => {\n  rotation.set(definition.rotation ?? 0);\n}, [definition]);\n```\n\n**Pass:**\n```tsx\nuseEffect(() => {\n  if (shouldRotate) {\n    rotation.set(definition.rotation ?? 0); \u002F\u002F Animate\n  } else {\n    rotation.jump(definition.rotation ?? 0); \u002F\u002F Instant\n  }\n}, [definition, shouldRotate]);\n```\n\n### `morphing-strokelinecap-round`\nLines should use `strokeLinecap=\"round\"` for polished endpoints.\n\n**Fail:**\n```tsx\n\u003Cmotion.line strokeLinecap=\"butt\" \u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.line strokeLinecap=\"round\" \u002F>\n```\n\n### `morphing-aria-hidden`\nIcon SVGs should be `aria-hidden` since they're decorative.\n\n**Fail:**\n```tsx\n\u003Csvg width={size} height={size}>...\u003C\u002Fsvg>\n```\n\n**Pass:**\n```tsx\n\u003Csvg width={size} height={size} aria-hidden=\"true\">...\u003C\u002Fsvg>\n```\n\n## Common Icon Patterns\n\n### Two-Line Icons (check, minus, equals, chevron)\nUse one or two collapsed lines:\n\n```ts\nconst check = {\n  lines: [\n    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },\n    { x1: 5.5, y1: 11, x2: 12, y2: 3 },\n    collapsed,\n  ],\n};\n```\n\n### Three-Line Icons (menu, asterisk, play)\nUse all three lines:\n\n```ts\nconst menu = {\n  lines: [\n    { x1: 2, y1: 3.5, x2: 12, y2: 3.5 },\n    { x1: 2, y1: 7, x2: 12, y2: 7 },\n    { x1: 2, y1: 10.5, x2: 12, y2: 10.5 },\n  ],\n};\n```\n\n### Point Icons (more, grip)\nUse zero-length lines as dots:\n\n```ts\nconst more = {\n  lines: [\n    { x1: 3, y1: 7, x2: 3, y2: 7 },\n    { x1: 7, y1: 7, x2: 7, y2: 7 },\n    { x1: 11, y1: 7, x2: 11, y2: 7 },\n  ],\n};\n```\n\n## Recommended Transition\n\nUse exponential ease-out for smooth morphing:\n\n```ts\nconst defaultTransition: Transition = {\n  ease: [0.19, 1, 0.22, 1],\n  duration: 0.4,\n};\n```\n\n## Output Format\n\nWhen auditing morphing icon implementations, output findings as:\n\n```\nfile:line - [rule-id] description of issue\n\nExample:\ncomponents\u002Ficon\u002Findex.tsx:45 - [morphing-three-lines] Icon \"check\" has only 2 lines, needs collapsed third\ncomponents\u002Ficon\u002Findex.tsx:78 - [morphing-group-variants] arrow-down uses different line definitions than arrow-right\n```\n\n## Summary Table\n\nAfter findings, output a summary:\n\n| Rule | Count | Severity |\n|------|-------|----------|\n| `morphing-three-lines` | 2 | HIGH |\n| `morphing-group-variants` | 1 | HIGH |\n| `morphing-reduced-motion` | 1 | MEDIUM |\n\n## References\n\n- [Benji's experiments with Claude](https:\u002F\u002Fbenji.org\u002Fmorphing-icons-with-claude)\n- [Motion useSpring](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Freact-use-spring)\n- [SVG Line Element](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSVG\u002FElement\u002Fline)\n","# Morphing Icons\n\nBuild icons that transform through actual shape transformation, not crossfades. Any icon can morph into any other because they share the same underlying 3-line structure.\n\n## Core Concept\n\nEvery icon is composed of exactly **three SVG lines**. Icons that need fewer lines collapse the extras to invisible center points. This constraint enables seamless morphing between any two icons.\n\n## Architecture\n\n### 1. Line Definition\n\nEach line has coordinates and optional opacity:\n\n```ts\ninterface IconLine {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  opacity?: number;\n}\n```\n\n### 2. Collapsed Lines\n\nIcons needing fewer than 3 lines use collapsed lines—zero-length lines at the center:\n\n```ts\nconst CENTER = 7; \u002F\u002F Center of 14x14 viewbox\n\nconst collapsed: IconLine = {\n  x1: CENTER,\n  y1: CENTER,\n  x2: CENTER,\n  y2: CENTER,\n  opacity: 0,\n};\n```\n\n### 3. Icon Definition\n\nEach icon has exactly 3 lines, optional rotation, and optional group:\n\n```ts\ninterface IconDefinition {\n  lines: [IconLine, IconLine, IconLine];\n  rotation?: number;\n  group?: string;\n}\n```\n\n### 4. Rotation Groups\n\nIcons sharing a `group` animate rotation when transitioning between them. Icons without matching groups jump to the new rotation instantly:\n\n```ts\n\u002F\u002F These rotate smoothly between each other\n{ lines: plusLines, rotation: 0, group: \"plus-cross\" }   \u002F\u002F plus\n{ lines: plusLines, rotation: 45, group: \"plus-cross\" }  \u002F\u002F cross\n\n\u002F\u002F These rotate smoothly between each other\n{ lines: arrowLines, rotation: 0, group: \"arrow\" }       \u002F\u002F arrow-right\n{ lines: arrowLines, rotation: 90, group: \"arrow\" }      \u002F\u002F arrow-down\n{ lines: arrowLines, rotation: 180, group: \"arrow\" }     \u002F\u002F arrow-left\n{ lines: arrowLines, rotation: -90, group: \"arrow\" }     \u002F\u002F arrow-up\n```\n\n## Implementation Rules\n\n### `morphing-three-lines`\nEvery icon MUST use exactly 3 lines. No more, no fewer.\n\n**Fail:**\n```ts\nconst checkIcon = {\n  lines: [\n    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },\n    { x1: 5.5, y1: 11, x2: 12, y2: 3 },\n  ], \u002F\u002F Only 2 lines\n};\n```\n\n**Pass:**\n```ts\nconst checkIcon = {\n  lines: [\n    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },\n    { x1: 5.5, y1: 11, x2: 12, y2: 3 },\n    collapsed, \u002F\u002F Third line collapsed\n  ],\n};\n```\n\n### `morphing-use-collapsed`\nUnused lines must use the collapsed constant, not omission or null.\n\n**Fail:**\n```ts\nconst minusIcon = {\n  lines: [\n    { x1: 2, y1: 7, x2: 12, y2: 7 },\n    null,\n    null,\n  ],\n};\n```\n\n**Pass:**\n```ts\nconst minusIcon = {\n  lines: [\n    { x1: 2, y1: 7, x2: 12, y2: 7 },\n    collapsed,\n    collapsed,\n  ],\n};\n```\n\n### `morphing-consistent-viewbox`\nAll icons must use the same viewBox (14x14 recommended).\n\n**Fail:**\n```ts\n\u002F\u002F Mixing viewbox scales\nconst icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; \u002F\u002F 14x14\nconst icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; \u002F\u002F 28x28\n```\n\n**Pass:**\n```ts\nconst VIEWBOX_SIZE = 14;\nconst CENTER = 7;\n\u002F\u002F All coordinates within 0-14 range\n```\n\n### `morphing-group-variants`\nIcons that are rotational variants MUST share the same group and base lines.\n\n**Fail:**\n```ts\n\u002F\u002F Different line definitions for arrows\nconst arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };\nconst arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] }; \u002F\u002F Different!\n```\n\n**Pass:**\n```ts\nconst arrowLines: [IconLine, IconLine, IconLine] = [\n  { x1: 2, y1: 7, x2: 12, y2: 7 },\n  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },\n  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },\n];\n\nconst icons = {\n  \"arrow-right\": { lines: arrowLines, rotation: 0, group: \"arrow\" },\n  \"arrow-down\": { lines: arrowLines, rotation: 90, group: \"arrow\" },\n  \"arrow-left\": { lines: arrowLines, rotation: 180, group: \"arrow\" },\n  \"arrow-up\": { lines: arrowLines, rotation: -90, group: \"arrow\" },\n};\n```\n\n### `morphing-spring-rotation`\nRotation between grouped icons should use spring physics for natural motion.\n\n**Fail:**\n```tsx\n\u003Cmotion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} \u002F>\n```\n\n**Pass:**\n```tsx\nconst rotation = useSpring(definition.rotation ?? 0, activeTransition);\n\n\u003Cmotion.g style={{ rotate: rotation, transformOrigin: \"center\" }} \u002F>\n```\n\n### `morphing-reduced-motion`\nRespect `prefers-reduced-motion` by disabling animations.\n\n**Fail:**\n```tsx\nfunction MorphingIcon({ icon }: Props) {\n  return \u003Cmotion.line animate={...} transition={{ duration: 0.4 }} \u002F>;\n}\n```\n\n**Pass:**\n```tsx\nfunction MorphingIcon({ icon }: Props) {\n  const reducedMotion = useReducedMotion() ?? false;\n  const activeTransition = reducedMotion ? { duration: 0 } : transition;\n  \n  return \u003Cmotion.line animate={...} transition={activeTransition} \u002F>;\n}\n```\n\n### `morphing-jump-non-grouped`\nWhen transitioning between icons NOT in the same group, rotation should jump instantly.\n\n**Fail:**\n```tsx\n\u002F\u002F Always animating rotation regardless of group\nuseEffect(() => {\n  rotation.set(definition.rotation ?? 0);\n}, [definition]);\n```\n\n**Pass:**\n```tsx\nuseEffect(() => {\n  if (shouldRotate) {\n    rotation.set(definition.rotation ?? 0); \u002F\u002F Animate\n  } else {\n    rotation.jump(definition.rotation ?? 0); \u002F\u002F Instant\n  }\n}, [definition, shouldRotate]);\n```\n\n### `morphing-strokelinecap-round`\nLines should use `strokeLinecap=\"round\"` for polished endpoints.\n\n**Fail:**\n```tsx\n\u003Cmotion.line strokeLinecap=\"butt\" \u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.line strokeLinecap=\"round\" \u002F>\n```\n\n### `morphing-aria-hidden`\nIcon SVGs should be `aria-hidden` since they're decorative.\n\n**Fail:**\n```tsx\n\u003Csvg width={size} height={size}>...\u003C\u002Fsvg>\n```\n\n**Pass:**\n```tsx\n\u003Csvg width={size} height={size} aria-hidden=\"true\">...\u003C\u002Fsvg>\n```\n\n## Common Icon Patterns\n\n### Two-Line Icons (check, minus, equals, chevron)\nUse one or two collapsed lines:\n\n```ts\nconst check = {\n  lines: [\n    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },\n    { x1: 5.5, y1: 11, x2: 12, y2: 3 },\n    collapsed,\n  ],\n};\n```\n\n### Three-Line Icons (menu, asterisk, play)\nUse all three lines:\n\n```ts\nconst menu = {\n  lines: [\n    { x1: 2, y1: 3.5, x2: 12, y2: 3.5 },\n    { x1: 2, y1: 7, x2: 12, y2: 7 },\n    { x1: 2, y1: 10.5, x2: 12, y2: 10.5 },\n  ],\n};\n```\n\n### Point Icons (more, grip)\nUse zero-length lines as dots:\n\n```ts\nconst more = {\n  lines: [\n    { x1: 3, y1: 7, x2: 3, y2: 7 },\n    { x1: 7, y1: 7, x2: 7, y2: 7 },\n    { x1: 11, y1: 7, x2: 11, y2: 7 },\n  ],\n};\n```\n\n## Recommended Transition\n\nUse exponential ease-out for smooth morphing:\n\n```ts\nconst defaultTransition: Transition = {\n  ease: [0.19, 1, 0.22, 1],\n  duration: 0.4,\n};\n```\n\n## Output Format\n\nWhen auditing morphing icon implementations, output findings as:\n\n```\nfile:line - [rule-id] description of issue\n\nExample:\ncomponents\u002Ficon\u002Findex.tsx:45 - [morphing-three-lines] Icon \"check\" has only 2 lines, needs collapsed third\ncomponents\u002Ficon\u002Findex.tsx:78 - [morphing-group-variants] arrow-down uses different line definitions than arrow-right\n```\n\n## Summary Table\n\nAfter findings, output a summary:\n\n| Rule | Count | Severity |\n|------|-------|----------|\n| `morphing-three-lines` | 2 | HIGH |\n| `morphing-group-variants` | 1 | HIGH |\n| `morphing-reduced-motion` | 1 | MEDIUM |\n\n## References\n\n- [Benji's experiments with Claude](https:\u002F\u002Fbenji.org\u002Fmorphing-icons-with-claude)\n- [Motion useSpring](https:\u002F\u002Fmotion.dev\u002Fdocs\u002Freact-use-spring)\n- [SVG Line Element](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSVG\u002FElement\u002Fline)\n",{"name":5,"license":15,"metadata":41,"description":7},{"author":42,"source":43,"version":44},"raphael-salaja","\u002Fcontent\u002Fmorphing-icons\u002Findex.mdx","1.0.0","main","681496e0662f4c45c4758fae9d4510ae87311bf2","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills","https:\u002F\u002Fgithub.com\u002Fagency-black","http:\u002F\u002Fwww.dogma.black","Las grandes ideas merecen una ejecución impecable. Construimos plataformas web, aplicaciones y ecosistemas digitales completos. Esta Trinidad es nuestro dogma.","2026-05-29 16:13:55",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add agency-black\u002FSkills --skill morphing-icons",{"tool":58,"command":59},"bunx","bunx skills add agency-black\u002FSkills --skill morphing-icons",{"tool":61,"command":62},"pnpm","pnpm dlx skills add agency-black\u002FSkills --skill morphing-icons","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fmorphing-icons\u002FSKILL.md",true,[],[67,93,124,154,178,200],{"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":36},"01M71JZVZ0TVW7Z5DQBRWSBG8A","zarr-python","Chunked N-D arrays for cloud storage (Zarr-Python 3). Compressed arrays, parallel I\u002FO, S3\u002FGCS via fsspec, NumPy\u002FDask\u002FXarray compatible, for large-scale scientific computing pipelines.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fzarr-python\u002FSKILL.md",[],[74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,32,89,90,91,92],"zarr python","python","zarr","arrays","Cloud Storage","remote","workflows","scientific","read","write","edit","parallel","dask","for","s3fs","numpy","s3","scientific computing","scale",{"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":97,"sourceHtmlUrl":98,"categories":99,"keywords":105,"publishedAt":36},"01M71JYXC5VAEJT8KXN5GRK32S","xvary-stock-research","Thesis-driven equity analysis from public SEC EDGAR and market data; \u002Fanalyze, \u002Fscore, \u002Fcompare workflows with bundled Python tools (Claude Code, Cursor, Codex).","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fxvary-stock-research\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fxvary-stock-research\u002FSKILL.md",[100],{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[106,107,108,109,110,111,112,75,113,80,114,115,116,117,118,119,120,121,122,123],"xvary","stock","research","xvary stock research","sec edgar","community","equity","thesis","analysis","code","Market","compare","market data","analyze","with","codex","cursor","2026",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":128,"licenseFileUrl":129,"sourceHtmlUrl":130,"categories":131,"keywords":138,"publishedAt":36},"01M71JVSDPDQ5040YBN6J1ASKY","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FSKILL.md",[132,135],{"categoryNo":133,"categoryName":134,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":136,"categoryName":137,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000009","前端开发",[139,140,141,87,142,143,144,145,146,147,148,120,149,150,151,152,153],"webapp","testing","webapp testing","applications","local","frontend","debugging","toolkit","logs","browser","playwright","web","behavior","ui","screenshots",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":128,"licenseFileUrl":158,"sourceHtmlUrl":159,"categories":160,"keywords":162,"publishedAt":36},"01M71JV64CW7R6FYYK9JWWGW0X","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FSKILL.md",[161],{"categoryNo":136,"categoryName":137,"taxonomyType":103,"taxonomyTypeDesc":104},[163,164,165,150,166,167,168,87,169,170,144,171,32,172,29,173,174,175,176,177],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","file","react","multi","state","routing","state management",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":185,"publishedAt":36},"01M71JS4X2FRY41DE84DEP06MN","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fvercel-react-view-transitions\u002FSKILL.md",[184],{"categoryNo":136,"categoryName":137,"taxonomyType":103,"taxonomyTypeDesc":104},[173,186,187,188,189,27,190,191,192,168,193,194,195,196,30,29,197,198,28,199],"vercel react view transitions","view","react view transitions","vercel","shared","back","Animation","types","states","element","implementing","api","route","libraries",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":207,"publishedAt":36},"01M71JS1WZ1J4F9YVC2203JBJW","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fvercel-react-native-skills\u002FSKILL.md",[206],{"categoryNo":136,"categoryName":137,"taxonomyType":103,"taxonomyTypeDesc":104},[189,208,173,209,210,211,212,213,214,87,215,196,216,32,217,218,30,219,220,29],"vercel react native skills","react native","native","react native skills","modules","platform","animations","performance","triggers","react native components","apps","best practices","tasks"]