[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71JJFNB0H3MC6RKV1ER5XS8":3,"skill-same:01M71JJFNB0H3MC6RKV1ER5XS8":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":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":48,"commitSha":49,"skillDirectory":5,"forksCount":14,"repositoryHtmlUrl":50,"repositoryHomepageUrl":6,"ownerHtmlUrl":51,"ownerBlogUrl":52,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M71JJFNB0H3MC6RKV1ER5XS8","to-spring-or-not-to-spring",null,"Audit animation code for correct timing function selection. Use when reviewing motion implementations, debugging animations that feel wrong, or choosing between springs and easing. Outputs file:line findings.","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\u002Fto-spring-or-not-to-spring\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"spring","to spring or not to spring","Wrong","index","file","use","motion","outputs","correct","timing","for","animations","line","audit","springs","code","when","debugging","selection","Animation","2026-11-10 10:12:30",false,"---\nname: to-spring-or-not-to-spring\ndescription: Audit animation code for correct timing function selection. Use when reviewing motion implementations, debugging animations that feel wrong, or choosing between springs and easing. Outputs file:line findings.\nlicense: MIT\nmetadata:\n  author: raphael-salaja\n  version: \"2.0.0\"\n  source: \u002Fcontent\u002Fto-spring-or-not-to-spring\u002Findex.mdx\n---\n\n# To Spring or Not To Spring\n\nReview animation code for correct timing function selection based on interaction type.\n\n## How It Works\n\n1. Read the specified files (or prompt user for files\u002Fpattern)\n2. Check against all rules below\n3. Output findings in `file:line` format\n\n## Rule Categories\n\n| Priority | Category | Prefix |\n|----------|----------|--------|\n| 1 | Spring Selection | `spring-` |\n| 2 | Easing Selection | `easing-` |\n| 3 | Duration | `duration-` |\n| 4 | No Animation | `none-` |\n\n## Decision Framework\n\nAsk: **Is this motion reacting to the user, or is the system speaking?**\n\n| Motion Type | Best Choice | Why |\n|-------------|-------------|-----|\n| User-driven (drag, flick, gesture) | Spring | Survives interruption, preserves velocity |\n| System-driven (state change, feedback) | Easing | Clear start\u002Fend, predictable timing |\n| Time representation (progress, loading) | Linear | 1:1 relationship between time and progress |\n| High-frequency (typing, fast toggles) | None | Animation adds noise, feels slower |\n\n## Rules\n\n### Spring Selection Rules\n\n#### `spring-for-gestures`\nGesture-driven motion (drag, flick, swipe) must use springs.\n\n**Fail:**\n```tsx\n\u003Cmotion.div\n  drag=\"x\"\n  transition={{ duration: 0.3, ease: \"easeOut\" }}\n\u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div\n  drag=\"x\"\n  transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n\u002F>\n```\n\n#### `spring-for-interruptible`\nMotion that can be interrupted must use springs.\n\n**Fail:**\n```tsx\n\u002F\u002F User can click again mid-animation\n\u003Cmotion.div\n  animate={{ x: isOpen ? 200 : 0 }}\n  transition={{ duration: 0.3 }}\n\u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div\n  animate={{ x: isOpen ? 200 : 0 }}\n  transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n\u002F>\n```\n\n#### `spring-preserves-velocity`\nWhen velocity matters, use springs to preserve input energy.\n\n**Fail:**\n```tsx\n\u002F\u002F Fast flick and slow flick animate identically\nonDragEnd={(e, info) => {\n  animate(target, { x: 0 }, { duration: 0.3 });\n}}\n```\n\n**Pass:**\n```tsx\n\u002F\u002F Fast flick moves faster than slow flick\nonDragEnd={(e, info) => {\n  animate(target, { x: 0 }, {\n    type: \"spring\",\n    velocity: info.velocity.x,\n  });\n}}\n```\n\n#### `spring-params-balanced`\nSpring parameters must be balanced; avoid excessive oscillation.\n\n**Fail:**\n```tsx\ntransition={{\n  type: \"spring\",\n  stiffness: 1000,\n  damping: 5, \u002F\u002F Too low - excessive bounce\n}}\n```\n\n**Pass:**\n```tsx\ntransition={{\n  type: \"spring\",\n  stiffness: 500,\n  damping: 30, \u002F\u002F Balanced - settles quickly\n}}\n```\n\n### Easing Selection Rules\n\n#### `easing-for-state-change`\nSystem-initiated state changes should use easing curves.\n\n**Fail:**\n```tsx\n\u002F\u002F Toast notification using spring\n\u003Cmotion.div\n  animate={{ y: 0 }}\n  transition={{ type: \"spring\" }}\n\u002F>\n\u002F\u002F Feels restless for a simple announcement\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div\n  animate={{ y: 0 }}\n  transition={{ duration: 0.2, ease: \"easeOut\" }}\n\u002F>\n```\n\n#### `easing-entrance-ease-out`\nEntrances must use ease-out (arrive fast, settle gently).\n\n**Fail:**\n```css\n.modal-enter {\n  animation-timing-function: ease-in;\n}\n```\n\n**Pass:**\n```css\n.modal-enter {\n  animation-timing-function: ease-out;\n}\n```\n\n#### `easing-exit-ease-in`\nExits must use ease-in (build momentum before departure).\n\n**Fail:**\n```css\n.modal-exit {\n  animation-timing-function: ease-out;\n}\n```\n\n**Pass:**\n```css\n.modal-exit {\n  animation-timing-function: ease-in;\n}\n```\n\n#### `easing-transition-ease-in-out`\nView\u002Fmode transitions use ease-in-out for neutral attention.\n\n**Pass:**\n```css\n.page-transition {\n  animation-timing-function: ease-in-out;\n}\n```\n\n#### `easing-linear-only-progress`\nLinear easing only for progress bars and time representation.\n\n**Fail:**\n```css\n.card-slide {\n  transition: transform 200ms linear; \u002F* Mechanical feel *\u002F\n}\n```\n\n**Pass:**\n```css\n.progress-bar {\n  transition: width 100ms linear; \u002F* Honest time representation *\u002F\n}\n```\n\n### Duration Rules\n\n#### `duration-press-hover`\nPress and hover interactions: 120-180ms.\n\n**Fail:**\n```css\n.button:hover {\n  transition: background-color 400ms;\n}\n```\n\n**Pass:**\n```css\n.button:hover {\n  transition: background-color 150ms;\n}\n```\n\n#### `duration-small-state`\nSmall state changes: 180-260ms.\n\n**Pass:**\n```css\n.toggle {\n  transition: transform 200ms ease;\n}\n```\n\n#### `duration-max-300ms`\nUser-initiated animations must not exceed 300ms.\n\n**Fail:**\n```tsx\n\u003Cmotion.div transition={{ duration: 0.5 }} \u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div transition={{ duration: 0.25 }} \u002F>\n```\n\n#### `duration-shorten-before-curve`\nIf animation feels slow, shorten duration before adjusting curve.\n\n**Fail (common mistake):**\n```css\n\u002F* Trying to fix slowness with sharper curve *\u002F\n.element {\n  transition: 400ms cubic-bezier(0, 0.9, 0.1, 1);\n}\n```\n\n**Pass:**\n```css\n\u002F* Fix slowness with shorter duration *\u002F\n.element {\n  transition: 200ms ease-out;\n}\n```\n\n### No Animation Rules\n\n#### `none-high-frequency`\nHigh-frequency interactions should have no animation.\n\n**Fail:**\n```tsx\n\u002F\u002F Animated on every keystroke\nfunction SearchInput() {\n  return (\n    \u003Cmotion.div animate={{ scale: [1, 1.02, 1] }}>\n      \u003Cinput onChange={handleSearch} \u002F>\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n**Pass:**\n```tsx\nfunction SearchInput() {\n  return \u003Cinput onChange={handleSearch} \u002F>;\n}\n```\n\n#### `none-keyboard-navigation`\nKeyboard navigation should be instant, no animation.\n\n**Fail:**\n```tsx\nfunction Menu() {\n  return items.map(item => (\n    \u003Cmotion.li\n      whileFocus={{ scale: 1.05 }}\n      transition={{ duration: 0.2 }}\n    \u002F>\n  ));\n}\n```\n\n**Pass:**\n```tsx\nfunction Menu() {\n  return items.map(item => (\n    \u003Cli className={styles.menuItem} \u002F> \u002F\u002F CSS :focus-visible only\n  ));\n}\n```\n\n#### `none-context-menu-entrance`\nContext menus should not animate on entrance (exit only).\n\n**Fail:**\n```tsx\n\u003Cmotion.div\n  initial={{ opacity: 0, scale: 0.95 }}\n  animate={{ opacity: 1, scale: 1 }}\n  exit={{ opacity: 0 }}\n\u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div exit={{ opacity: 0, scale: 0.95 }} \u002F>\n```\n\n## Output Format\n\nWhen reviewing files, output findings as:\n\n```\nfile:line - [rule-id] description of issue\n\nExample:\ncomponents\u002Fdrawer\u002Findex.tsx:45 - [spring-for-gestures] Drag interaction using easing instead of spring\ncomponents\u002Fmodal\u002Fstyles.module.css:23 - [easing-entrance-ease-out] Modal entrance using ease-in\n```\n\n## Summary Table\n\nAfter findings, output a summary:\n\n| Rule | Count | Severity |\n|------|-------|----------|\n| `spring-for-gestures` | 2 | HIGH |\n| `easing-entrance-ease-out` | 1 | MEDIUM |\n| `duration-max-300ms` | 3 | MEDIUM |\n\n## Quick Reference\n\n| Interaction | Timing | Type |\n|-------------|--------|------|\n| Drag release | Spring | `stiffness: 500, damping: 30` |\n| Button press | 150ms | `ease` |\n| Modal enter | 200ms | `ease-out` |\n| Modal exit | 150ms | `ease-in` |\n| Page transition | 250ms | `ease-in-out` |\n| Progress bar | varies | `linear` |\n| Typing feedback | 0ms | none |\n\n## References\n\n- [Apple WWDC23: Animate with Springs](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2023\u002F10158\u002F)\n- [The Beauty of Bézier Curves - Freya Holmér](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=aVwxzDHniEw)\n- [Motion library](https:\u002F\u002Fmotion.dev\u002F)\n","# To Spring or Not To Spring\n\nReview animation code for correct timing function selection based on interaction type.\n\n## How It Works\n\n1. Read the specified files (or prompt user for files\u002Fpattern)\n2. Check against all rules below\n3. Output findings in `file:line` format\n\n## Rule Categories\n\n| Priority | Category | Prefix |\n|----------|----------|--------|\n| 1 | Spring Selection | `spring-` |\n| 2 | Easing Selection | `easing-` |\n| 3 | Duration | `duration-` |\n| 4 | No Animation | `none-` |\n\n## Decision Framework\n\nAsk: **Is this motion reacting to the user, or is the system speaking?**\n\n| Motion Type | Best Choice | Why |\n|-------------|-------------|-----|\n| User-driven (drag, flick, gesture) | Spring | Survives interruption, preserves velocity |\n| System-driven (state change, feedback) | Easing | Clear start\u002Fend, predictable timing |\n| Time representation (progress, loading) | Linear | 1:1 relationship between time and progress |\n| High-frequency (typing, fast toggles) | None | Animation adds noise, feels slower |\n\n## Rules\n\n### Spring Selection Rules\n\n#### `spring-for-gestures`\nGesture-driven motion (drag, flick, swipe) must use springs.\n\n**Fail:**\n```tsx\n\u003Cmotion.div\n  drag=\"x\"\n  transition={{ duration: 0.3, ease: \"easeOut\" }}\n\u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div\n  drag=\"x\"\n  transition={{ type: \"spring\", stiffness: 500, damping: 30 }}\n\u002F>\n```\n\n#### `spring-for-interruptible`\nMotion that can be interrupted must use springs.\n\n**Fail:**\n```tsx\n\u002F\u002F User can click again mid-animation\n\u003Cmotion.div\n  animate={{ x: isOpen ? 200 : 0 }}\n  transition={{ duration: 0.3 }}\n\u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div\n  animate={{ x: isOpen ? 200 : 0 }}\n  transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n\u002F>\n```\n\n#### `spring-preserves-velocity`\nWhen velocity matters, use springs to preserve input energy.\n\n**Fail:**\n```tsx\n\u002F\u002F Fast flick and slow flick animate identically\nonDragEnd={(e, info) => {\n  animate(target, { x: 0 }, { duration: 0.3 });\n}}\n```\n\n**Pass:**\n```tsx\n\u002F\u002F Fast flick moves faster than slow flick\nonDragEnd={(e, info) => {\n  animate(target, { x: 0 }, {\n    type: \"spring\",\n    velocity: info.velocity.x,\n  });\n}}\n```\n\n#### `spring-params-balanced`\nSpring parameters must be balanced; avoid excessive oscillation.\n\n**Fail:**\n```tsx\ntransition={{\n  type: \"spring\",\n  stiffness: 1000,\n  damping: 5, \u002F\u002F Too low - excessive bounce\n}}\n```\n\n**Pass:**\n```tsx\ntransition={{\n  type: \"spring\",\n  stiffness: 500,\n  damping: 30, \u002F\u002F Balanced - settles quickly\n}}\n```\n\n### Easing Selection Rules\n\n#### `easing-for-state-change`\nSystem-initiated state changes should use easing curves.\n\n**Fail:**\n```tsx\n\u002F\u002F Toast notification using spring\n\u003Cmotion.div\n  animate={{ y: 0 }}\n  transition={{ type: \"spring\" }}\n\u002F>\n\u002F\u002F Feels restless for a simple announcement\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div\n  animate={{ y: 0 }}\n  transition={{ duration: 0.2, ease: \"easeOut\" }}\n\u002F>\n```\n\n#### `easing-entrance-ease-out`\nEntrances must use ease-out (arrive fast, settle gently).\n\n**Fail:**\n```css\n.modal-enter {\n  animation-timing-function: ease-in;\n}\n```\n\n**Pass:**\n```css\n.modal-enter {\n  animation-timing-function: ease-out;\n}\n```\n\n#### `easing-exit-ease-in`\nExits must use ease-in (build momentum before departure).\n\n**Fail:**\n```css\n.modal-exit {\n  animation-timing-function: ease-out;\n}\n```\n\n**Pass:**\n```css\n.modal-exit {\n  animation-timing-function: ease-in;\n}\n```\n\n#### `easing-transition-ease-in-out`\nView\u002Fmode transitions use ease-in-out for neutral attention.\n\n**Pass:**\n```css\n.page-transition {\n  animation-timing-function: ease-in-out;\n}\n```\n\n#### `easing-linear-only-progress`\nLinear easing only for progress bars and time representation.\n\n**Fail:**\n```css\n.card-slide {\n  transition: transform 200ms linear; \u002F* Mechanical feel *\u002F\n}\n```\n\n**Pass:**\n```css\n.progress-bar {\n  transition: width 100ms linear; \u002F* Honest time representation *\u002F\n}\n```\n\n### Duration Rules\n\n#### `duration-press-hover`\nPress and hover interactions: 120-180ms.\n\n**Fail:**\n```css\n.button:hover {\n  transition: background-color 400ms;\n}\n```\n\n**Pass:**\n```css\n.button:hover {\n  transition: background-color 150ms;\n}\n```\n\n#### `duration-small-state`\nSmall state changes: 180-260ms.\n\n**Pass:**\n```css\n.toggle {\n  transition: transform 200ms ease;\n}\n```\n\n#### `duration-max-300ms`\nUser-initiated animations must not exceed 300ms.\n\n**Fail:**\n```tsx\n\u003Cmotion.div transition={{ duration: 0.5 }} \u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div transition={{ duration: 0.25 }} \u002F>\n```\n\n#### `duration-shorten-before-curve`\nIf animation feels slow, shorten duration before adjusting curve.\n\n**Fail (common mistake):**\n```css\n\u002F* Trying to fix slowness with sharper curve *\u002F\n.element {\n  transition: 400ms cubic-bezier(0, 0.9, 0.1, 1);\n}\n```\n\n**Pass:**\n```css\n\u002F* Fix slowness with shorter duration *\u002F\n.element {\n  transition: 200ms ease-out;\n}\n```\n\n### No Animation Rules\n\n#### `none-high-frequency`\nHigh-frequency interactions should have no animation.\n\n**Fail:**\n```tsx\n\u002F\u002F Animated on every keystroke\nfunction SearchInput() {\n  return (\n    \u003Cmotion.div animate={{ scale: [1, 1.02, 1] }}>\n      \u003Cinput onChange={handleSearch} \u002F>\n    \u003C\u002Fmotion.div>\n  );\n}\n```\n\n**Pass:**\n```tsx\nfunction SearchInput() {\n  return \u003Cinput onChange={handleSearch} \u002F>;\n}\n```\n\n#### `none-keyboard-navigation`\nKeyboard navigation should be instant, no animation.\n\n**Fail:**\n```tsx\nfunction Menu() {\n  return items.map(item => (\n    \u003Cmotion.li\n      whileFocus={{ scale: 1.05 }}\n      transition={{ duration: 0.2 }}\n    \u002F>\n  ));\n}\n```\n\n**Pass:**\n```tsx\nfunction Menu() {\n  return items.map(item => (\n    \u003Cli className={styles.menuItem} \u002F> \u002F\u002F CSS :focus-visible only\n  ));\n}\n```\n\n#### `none-context-menu-entrance`\nContext menus should not animate on entrance (exit only).\n\n**Fail:**\n```tsx\n\u003Cmotion.div\n  initial={{ opacity: 0, scale: 0.95 }}\n  animate={{ opacity: 1, scale: 1 }}\n  exit={{ opacity: 0 }}\n\u002F>\n```\n\n**Pass:**\n```tsx\n\u003Cmotion.div exit={{ opacity: 0, scale: 0.95 }} \u002F>\n```\n\n## Output Format\n\nWhen reviewing files, output findings as:\n\n```\nfile:line - [rule-id] description of issue\n\nExample:\ncomponents\u002Fdrawer\u002Findex.tsx:45 - [spring-for-gestures] Drag interaction using easing instead of spring\ncomponents\u002Fmodal\u002Fstyles.module.css:23 - [easing-entrance-ease-out] Modal entrance using ease-in\n```\n\n## Summary Table\n\nAfter findings, output a summary:\n\n| Rule | Count | Severity |\n|------|-------|----------|\n| `spring-for-gestures` | 2 | HIGH |\n| `easing-entrance-ease-out` | 1 | MEDIUM |\n| `duration-max-300ms` | 3 | MEDIUM |\n\n## Quick Reference\n\n| Interaction | Timing | Type |\n|-------------|--------|------|\n| Drag release | Spring | `stiffness: 500, damping: 30` |\n| Button press | 150ms | `ease` |\n| Modal enter | 200ms | `ease-out` |\n| Modal exit | 150ms | `ease-in` |\n| Page transition | 250ms | `ease-in-out` |\n| Progress bar | varies | `linear` |\n| Typing feedback | 0ms | none |\n\n## References\n\n- [Apple WWDC23: Animate with Springs](https:\u002F\u002Fdeveloper.apple.com\u002Fvideos\u002Fplay\u002Fwwdc2023\u002F10158\u002F)\n- [The Beauty of Bézier Curves - Freya Holmér](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=aVwxzDHniEw)\n- [Motion library](https:\u002F\u002Fmotion.dev\u002F)\n",{"name":5,"license":15,"metadata":44,"description":7},{"author":45,"source":46,"version":47},"raphael-salaja","\u002Fcontent\u002Fto-spring-or-not-to-spring\u002Findex.mdx","2.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":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add agency-black\u002FSkills --skill to-spring-or-not-to-spring",{"tool":61,"command":62},"bunx","bunx skills add agency-black\u002FSkills --skill to-spring-or-not-to-spring",{"tool":64,"command":65},"pnpm","pnpm dlx skills add agency-black\u002FSkills --skill to-spring-or-not-to-spring","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fto-spring-or-not-to-spring\u002FSKILL.md",true,[],[70,95,125,154,178,201],{"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":39},"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",[],[77,78,79,80,81,82,83,84,85,86,87,88,89,29,90,24,91,92,93,94],"zarr python","python","zarr","arrays","Cloud Storage","remote","workflows","scientific","read","write","edit","parallel","dask","s3fs","numpy","s3","scientific computing","scale",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":99,"sourceHtmlUrl":100,"categories":101,"keywords":107,"publishedAt":39},"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",[102],{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[108,109,110,111,112,113,114,78,115,83,116,34,117,118,119,120,121,122,123,124],"xvary","stock","research","xvary stock research","sec edgar","community","equity","thesis","analysis","Market","compare","market data","analyze","with","codex","cursor","2026",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":129,"licenseFileUrl":130,"sourceHtmlUrl":131,"categories":132,"keywords":139,"publishedAt":39},"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",[133,136],{"categoryNo":134,"categoryName":135,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":137,"categoryName":138,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000009","前端开发",[140,141,142,29,143,144,145,36,146,147,148,121,149,150,151,152,153],"webapp","testing","webapp testing","applications","local","frontend","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":129,"licenseFileUrl":158,"sourceHtmlUrl":159,"categories":160,"keywords":162,"publishedAt":39},"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":137,"categoryName":138,"taxonomyType":105,"taxonomyTypeDesc":106},[163,164,165,150,166,167,168,29,169,170,145,171,24,23,172,173,174,175,176,177],"builder","artifacts builder","artifacts","web artifacts builder","single-file","css","Tailwind","ui components","single","components","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":39},"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":137,"categoryName":138,"taxonomyType":105,"taxonomyTypeDesc":106},[173,186,187,188,189,190,191,192,38,168,193,194,195,196,35,172,197,198,199,200],"vercel react view transitions","view","react view transitions","vercel","transitions","shared","back","types","states","element","implementing","api","route","create","libraries",{"skillNo":202,"name":203,"nameZh":6,"description":204,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":205,"categories":206,"keywords":208,"publishedAt":39},"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",[207],{"categoryNo":137,"categoryName":138,"taxonomyType":105,"taxonomyTypeDesc":106},[189,209,173,210,211,212,213,214,30,29,215,196,216,24,217,218,35,219,220,172],"vercel react native skills","react native","native","react native skills","modules","platform","performance","triggers","react native components","apps","best practices","tasks"]