[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71C441T53P9Y3WC7H591C2N":3,"skill-same:01M71C441T53P9Y3WC7H591C2N":64},{"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":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":6,"ownerDescription":48,"updatedAt":49,"install":50,"resources":63},"01M71C441T53P9Y3WC7H591C2N","genjutsu-css-native",null,"Zero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.","nexuslinkproductions\u002Fyuri-os","nexuslinkproductions","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F273246263?v=4","01M718YX9NZRCW50B59B8ZVDKN","Marcel Spatz","01M718YXAQ7530F4B1VKN6SFQV",2,"MIT","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fgenjutsu-css-native\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36],"css","genjutsu css native","native","view","ZeRO","animations","techniques","visual","style","transitions","dependency","scroll","driven","2026-11-10 10:12:30",false,"---\nname: genjutsu-css-native\ndescription: \"Zero-dependency animations and visual techniques - scroll-driven, View Transitions, @starting-style, modern CSS.\"\n---\n\n# CSS Native — Zero-Dependency Animations & Visual Techniques\n\n## When to Use CSS Native vs Library\n\n| Situation | Decision |\n|---|---|\n| \u003C 3 animations on the page | CSS native |\n| Scroll-driven reveal\u002Fparallax | CSS native (`animation-timeline`) |\n| Enter\u002Fexit from `display: none` | CSS native (`@starting-style` + `transition-behavior: allow-discrete`) |\n| Tooltip\u002Fpopover positioning | CSS native (anchor positioning) |\n| Page transitions (MPA or SPA) | CSS native (View Transitions API) |\n| Complex multi-step timeline (5+ tweens) | GSAP |\n| Stagger across dynamic list (unknown count) | GSAP or Framer Motion |\n| Physics-based spring with interruption | Framer Motion |\n| Morph between SVG shapes | GSAP MorphSVG |\n\nRule of thumb: if you can express it in a `@keyframes` + one `animation-timeline`, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values — reach for a library.\n\n---\n\n## Scroll-Driven Animations\n\n### Scroll Progress Timeline\n\nAnimate based on scroll position of a container.\n\n```css\n.progress-bar {\n  animation: grow-width linear both;\n  animation-timeline: scroll(root block);\n}\n\n@keyframes grow-width {\n  from { transform: scaleX(0); }\n  to   { transform: scaleX(1); }\n}\n```\n\n- `scroll(\u003Cscroller> \u003Caxis>)` — scroller: `nearest` | `root` | `self`, axis: `block` | `inline` | `x` | `y`\n- Default: `scroll(nearest block)`\n\n### View Progress Timeline\n\nAnimate as an element enters\u002Fexits the scrollport.\n\n```css\n.reveal {\n  animation: fade-in linear both;\n  animation-timeline: view();\n  animation-range: entry 0% entry 100%;\n}\n\n@keyframes fade-in {\n  from { opacity: 0; transform: translateY(2rem); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n```\n\n### animation-range\n\nControls which segment of the timeline drives the animation.\n\n```css\n\u002F* Named ranges: cover | contain | entry | exit | entry-crossing | exit-crossing *\u002F\nanimation-range: entry 0% entry 100%;    \u002F* animate during entry only *\u002F\nanimation-range: contain 0% contain 100%; \u002F* animate while fully visible *\u002F\nanimation-range: entry 25% exit 75%;      \u002F* custom start\u002Fend *\u002F\n```\n\nUse the [Scroll-driven Animations tool](https:\u002F\u002Fscroll-driven-animations.style\u002Ftools\u002Fview-timeline\u002Franges\u002F) to visualize ranges interactively.\n\n---\n\n## View Transitions API\n\n### Same-Document (SPA)\n\n```js\ndocument.startViewTransition(() => {\n  \u002F\u002F Update the DOM synchronously\n  updateContent();\n});\n```\n\n```css\n\u002F* Control the transition animation *\u002F\n::view-transition-old(root) {\n  animation: fade-out 200ms ease-out;\n}\n::view-transition-new(root) {\n  animation: fade-in 300ms ease-in;\n}\n\n\u002F* Named transitions for specific elements *\u002F\n.hero-image { view-transition-name: hero; }\n\n::view-transition-group(hero) {\n  animation-duration: 400ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n### Cross-Document (MPA)\n\n```css\n\u002F* Both pages need this *\u002F\n@view-transition { navigation: auto; }\n\n\u002F* Outgoing page *\u002F\n.card { view-transition-name: card-detail; }\n\n\u002F* Incoming page *\u002F\n.detail-hero { view-transition-name: card-detail; }\n```\n\n### view-transition-class (group styling)\n\n```css\n.card { view-transition-class: card; }\n\n::view-transition-group(*.card) {\n  animation-duration: 350ms;\n  animation-timing-function: var(--ease-spring);\n}\n```\n\n---\n\n## @starting-style\n\nNative enter animations from `display: none` — no JS timing hacks.\n\n```css\n.dialog {\n  opacity: 1;\n  transform: translateY(0);\n  transition: opacity 300ms ease, transform 300ms ease,\n              display 300ms allow-discrete;\n\n  @starting-style {\n    opacity: 0;\n    transform: translateY(-1rem);\n  }\n}\n\n.dialog[hidden] {\n  opacity: 0;\n  transform: translateY(-1rem);\n  display: none;\n}\n```\n\nKey rules:\n- `transition-behavior: allow-discrete` (or shorthand `allow-discrete` in the transition) enables transitioning `display` and `overlay`\n- `@starting-style` block defines the \"from\" state when the element first renders\n- Combine with `[popover]` and `\u003Cdialog>` for native modals with zero JS animation code\n\n---\n\n## Anchor Positioning\n\nCSS-native positioning of tooltips, popovers, and floating UI relative to a trigger.\n\n```css\n.trigger {\n  anchor-name: --my-trigger;\n}\n\n.tooltip {\n  position: fixed;\n  position-anchor: --my-trigger;\n  inset-area: top center;\n  margin-bottom: 0.5rem;\n\n  \u002F* Fallback if no space on top *\u002F\n  position-try-fallbacks: --bottom;\n}\n\n@position-try --bottom {\n  inset-area: bottom center;\n  margin-top: 0.5rem;\n}\n```\n\nCombine with `@starting-style` for animated tooltips:\n\n```css\n.tooltip[popover]:popover-open {\n  opacity: 1;\n  transform: scale(1);\n  transition: opacity 150ms ease, transform 150ms ease,\n              display 150ms allow-discrete, overlay 150ms allow-discrete;\n\n  @starting-style {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n}\n```\n\n---\n\n## Container Queries + Contextual Animations\n\nAdapt animations to the component's container size, not the viewport.\n\n```css\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n@container card (min-width: 400px) {\n  .card-content {\n    animation: slide-in-right 400ms var(--ease-out-expo);\n  }\n}\n\n@container card (max-width: 399px) {\n  .card-content {\n    animation: fade-in 300ms ease;\n  }\n}\n```\n\nContainer-relative units in keyframes:\n\n```css\n@keyframes slide-in-right {\n  from { transform: translateX(10cqw); opacity: 0; }\n  to   { transform: translateX(0); opacity: 1; }\n}\n```\n\n---\n\n## Advanced Visual Techniques\n\n### clip-path Transitions\n\n```css\n.reveal {\n  clip-path: inset(0 100% 0 0);\n  transition: clip-path 600ms cubic-bezier(0.77, 0, 0.175, 1);\n}\n.reveal.visible {\n  clip-path: inset(0 0 0 0);\n}\n```\n\nShape morphing: transition between `circle()`, `ellipse()`, `polygon()`, `inset()` — as long as the function type and point count match.\n\n### backdrop-filter\n\n```css\n.glass {\n  background: oklch(0.98 0.01 250 \u002F 0.6);\n  backdrop-filter: blur(12px) saturate(1.8);\n  -webkit-backdrop-filter: blur(12px) saturate(1.8); \u002F* Safari *\u002F\n}\n```\n\n### mix-blend-mode\n\n```css\n.overlay-text {\n  mix-blend-mode: difference;\n  color: white; \u002F* inverts over any background *\u002F\n}\n```\n\n### Mesh Gradients (approximated)\n\n```css\n.mesh {\n  background:\n    radial-gradient(at 20% 30%, oklch(0.7 0.2 310) 0%, transparent 50%),\n    radial-gradient(at 80% 60%, oklch(0.6 0.18 250) 0%, transparent 50%),\n    radial-gradient(at 50% 80%, oklch(0.75 0.15 170) 0%, transparent 50%),\n    oklch(0.15 0.02 280);\n}\n```\n\n### conic-gradient Effects\n\n```css\n.spinner {\n  background: conic-gradient(from 0deg, transparent 0%, oklch(0.7 0.15 250) 100%);\n  border-radius: 50%;\n  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));\n  animation: spin 1s linear infinite;\n}\n```\n\n---\n\n## Do Not\n\n| BAD | GOOD | Why |\n|---|---|---|\n| `transition: all 300ms` | `transition: opacity 300ms, transform 300ms` | `all` triggers transitions on every property change, causes unexpected animations, and prevents browser optimization |\n| Animate `width`, `height`, `top`, `left` | Animate `transform`, `opacity`, `clip-path`, `filter` | Layout-triggering properties force reflow on every frame — composite-only properties run on GPU |\n| Scroll-driven animations without fallback | `@supports (animation-timeline: scroll()) { ... }` | Firefox only added support in v128+, older Safari versions lack support |\n| `@starting-style` without `transition-behavior` | Always pair with `allow-discrete` for display\u002Foverlay | Without it, `display: none` transitions are skipped entirely |\n| Anchor positioning without `position-try-fallbacks` | Always define fallback positions | Element clips out of viewport if primary position has no space |\n| `animation-fill-mode: forwards` on scroll-driven | Use `both` for scroll-driven animations | `forwards` can lock the element in its final state even when scrolling back |\n","# CSS Native — Zero-Dependency Animations & Visual Techniques\n\n## When to Use CSS Native vs Library\n\n| Situation | Decision |\n|---|---|\n| \u003C 3 animations on the page | CSS native |\n| Scroll-driven reveal\u002Fparallax | CSS native (`animation-timeline`) |\n| Enter\u002Fexit from `display: none` | CSS native (`@starting-style` + `transition-behavior: allow-discrete`) |\n| Tooltip\u002Fpopover positioning | CSS native (anchor positioning) |\n| Page transitions (MPA or SPA) | CSS native (View Transitions API) |\n| Complex multi-step timeline (5+ tweens) | GSAP |\n| Stagger across dynamic list (unknown count) | GSAP or Framer Motion |\n| Physics-based spring with interruption | Framer Motion |\n| Morph between SVG shapes | GSAP MorphSVG |\n\nRule of thumb: if you can express it in a `@keyframes` + one `animation-timeline`, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values — reach for a library.\n\n---\n\n## Scroll-Driven Animations\n\n### Scroll Progress Timeline\n\nAnimate based on scroll position of a container.\n\n```css\n.progress-bar {\n  animation: grow-width linear both;\n  animation-timeline: scroll(root block);\n}\n\n@keyframes grow-width {\n  from { transform: scaleX(0); }\n  to   { transform: scaleX(1); }\n}\n```\n\n- `scroll(\u003Cscroller> \u003Caxis>)` — scroller: `nearest` | `root` | `self`, axis: `block` | `inline` | `x` | `y`\n- Default: `scroll(nearest block)`\n\n### View Progress Timeline\n\nAnimate as an element enters\u002Fexits the scrollport.\n\n```css\n.reveal {\n  animation: fade-in linear both;\n  animation-timeline: view();\n  animation-range: entry 0% entry 100%;\n}\n\n@keyframes fade-in {\n  from { opacity: 0; transform: translateY(2rem); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n```\n\n### animation-range\n\nControls which segment of the timeline drives the animation.\n\n```css\n\u002F* Named ranges: cover | contain | entry | exit | entry-crossing | exit-crossing *\u002F\nanimation-range: entry 0% entry 100%;    \u002F* animate during entry only *\u002F\nanimation-range: contain 0% contain 100%; \u002F* animate while fully visible *\u002F\nanimation-range: entry 25% exit 75%;      \u002F* custom start\u002Fend *\u002F\n```\n\nUse the [Scroll-driven Animations tool](https:\u002F\u002Fscroll-driven-animations.style\u002Ftools\u002Fview-timeline\u002Franges\u002F) to visualize ranges interactively.\n\n---\n\n## View Transitions API\n\n### Same-Document (SPA)\n\n```js\ndocument.startViewTransition(() => {\n  \u002F\u002F Update the DOM synchronously\n  updateContent();\n});\n```\n\n```css\n\u002F* Control the transition animation *\u002F\n::view-transition-old(root) {\n  animation: fade-out 200ms ease-out;\n}\n::view-transition-new(root) {\n  animation: fade-in 300ms ease-in;\n}\n\n\u002F* Named transitions for specific elements *\u002F\n.hero-image { view-transition-name: hero; }\n\n::view-transition-group(hero) {\n  animation-duration: 400ms;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n```\n\n### Cross-Document (MPA)\n\n```css\n\u002F* Both pages need this *\u002F\n@view-transition { navigation: auto; }\n\n\u002F* Outgoing page *\u002F\n.card { view-transition-name: card-detail; }\n\n\u002F* Incoming page *\u002F\n.detail-hero { view-transition-name: card-detail; }\n```\n\n### view-transition-class (group styling)\n\n```css\n.card { view-transition-class: card; }\n\n::view-transition-group(*.card) {\n  animation-duration: 350ms;\n  animation-timing-function: var(--ease-spring);\n}\n```\n\n---\n\n## @starting-style\n\nNative enter animations from `display: none` — no JS timing hacks.\n\n```css\n.dialog {\n  opacity: 1;\n  transform: translateY(0);\n  transition: opacity 300ms ease, transform 300ms ease,\n              display 300ms allow-discrete;\n\n  @starting-style {\n    opacity: 0;\n    transform: translateY(-1rem);\n  }\n}\n\n.dialog[hidden] {\n  opacity: 0;\n  transform: translateY(-1rem);\n  display: none;\n}\n```\n\nKey rules:\n- `transition-behavior: allow-discrete` (or shorthand `allow-discrete` in the transition) enables transitioning `display` and `overlay`\n- `@starting-style` block defines the \"from\" state when the element first renders\n- Combine with `[popover]` and `\u003Cdialog>` for native modals with zero JS animation code\n\n---\n\n## Anchor Positioning\n\nCSS-native positioning of tooltips, popovers, and floating UI relative to a trigger.\n\n```css\n.trigger {\n  anchor-name: --my-trigger;\n}\n\n.tooltip {\n  position: fixed;\n  position-anchor: --my-trigger;\n  inset-area: top center;\n  margin-bottom: 0.5rem;\n\n  \u002F* Fallback if no space on top *\u002F\n  position-try-fallbacks: --bottom;\n}\n\n@position-try --bottom {\n  inset-area: bottom center;\n  margin-top: 0.5rem;\n}\n```\n\nCombine with `@starting-style` for animated tooltips:\n\n```css\n.tooltip[popover]:popover-open {\n  opacity: 1;\n  transform: scale(1);\n  transition: opacity 150ms ease, transform 150ms ease,\n              display 150ms allow-discrete, overlay 150ms allow-discrete;\n\n  @starting-style {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n}\n```\n\n---\n\n## Container Queries + Contextual Animations\n\nAdapt animations to the component's container size, not the viewport.\n\n```css\n.card-container {\n  container-type: inline-size;\n  container-name: card;\n}\n\n@container card (min-width: 400px) {\n  .card-content {\n    animation: slide-in-right 400ms var(--ease-out-expo);\n  }\n}\n\n@container card (max-width: 399px) {\n  .card-content {\n    animation: fade-in 300ms ease;\n  }\n}\n```\n\nContainer-relative units in keyframes:\n\n```css\n@keyframes slide-in-right {\n  from { transform: translateX(10cqw); opacity: 0; }\n  to   { transform: translateX(0); opacity: 1; }\n}\n```\n\n---\n\n## Advanced Visual Techniques\n\n### clip-path Transitions\n\n```css\n.reveal {\n  clip-path: inset(0 100% 0 0);\n  transition: clip-path 600ms cubic-bezier(0.77, 0, 0.175, 1);\n}\n.reveal.visible {\n  clip-path: inset(0 0 0 0);\n}\n```\n\nShape morphing: transition between `circle()`, `ellipse()`, `polygon()`, `inset()` — as long as the function type and point count match.\n\n### backdrop-filter\n\n```css\n.glass {\n  background: oklch(0.98 0.01 250 \u002F 0.6);\n  backdrop-filter: blur(12px) saturate(1.8);\n  -webkit-backdrop-filter: blur(12px) saturate(1.8); \u002F* Safari *\u002F\n}\n```\n\n### mix-blend-mode\n\n```css\n.overlay-text {\n  mix-blend-mode: difference;\n  color: white; \u002F* inverts over any background *\u002F\n}\n```\n\n### Mesh Gradients (approximated)\n\n```css\n.mesh {\n  background:\n    radial-gradient(at 20% 30%, oklch(0.7 0.2 310) 0%, transparent 50%),\n    radial-gradient(at 80% 60%, oklch(0.6 0.18 250) 0%, transparent 50%),\n    radial-gradient(at 50% 80%, oklch(0.75 0.15 170) 0%, transparent 50%),\n    oklch(0.15 0.02 280);\n}\n```\n\n### conic-gradient Effects\n\n```css\n.spinner {\n  background: conic-gradient(from 0deg, transparent 0%, oklch(0.7 0.15 250) 100%);\n  border-radius: 50%;\n  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), black calc(100% - 4px));\n  animation: spin 1s linear infinite;\n}\n```\n\n---\n\n## Do Not\n\n| BAD | GOOD | Why |\n|---|---|---|\n| `transition: all 300ms` | `transition: opacity 300ms, transform 300ms` | `all` triggers transitions on every property change, causes unexpected animations, and prevents browser optimization |\n| Animate `width`, `height`, `top`, `left` | Animate `transform`, `opacity`, `clip-path`, `filter` | Layout-triggering properties force reflow on every frame — composite-only properties run on GPU |\n| Scroll-driven animations without fallback | `@supports (animation-timeline: scroll()) { ... }` | Firefox only added support in v128+, older Safari versions lack support |\n| `@starting-style` without `transition-behavior` | Always pair with `allow-discrete` for display\u002Foverlay | Without it, `display: none` transitions are skipped entirely |\n| Anchor positioning without `position-try-fallbacks` | Always define fallback positions | Element clips out of viewport if primary position has no space |\n| `animation-fill-mode: forwards` on scroll-driven | Use `both` for scroll-driven animations | `forwards` can lock the element in its final state even when scrolling back |\n",{"name":5,"description":7},"main","4c6d8d65f3d6096e2fc25b0845e481dda73c2794","skills\u002Fgenjutsu-css-native",0,"https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions","Building deterministic AI governance and continuity systems. Workflow architect + visual storyteller","2026-11-14 03:05:17",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add nexuslinkproductions\u002Fyuri-os --skill genjutsu-css-native",{"tool":56,"command":57},"bunx","bunx skills add nexuslinkproductions\u002Fyuri-os --skill genjutsu-css-native",{"tool":59,"command":60},"pnpm","pnpm dlx skills add nexuslinkproductions\u002Fyuri-os --skill genjutsu-css-native","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fgenjutsu-css-native\u002FSKILL.md",true,[],[65,88,112,140,168,187],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":37},"01M71CG1AME5WC0A79AE65WT0X","zoom-out","Tell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fzoom-out\u002FSKILL.md",[],[72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87],"zoom out","zoom","with","harness","how","section","re","true","understand","use","perspective","when","you","code","it","context",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":37},"01M71CFY9ATD0BAXV6B14HFG7C","yuri-shura","6-perspective adversarial review for high-stakes turns (architecture decisions, refactor planning, deployment review) — fans out architect, adversary (7-vector attack), maintainer, ops, product, and security perspectives in parallel, then consolidates. Use when user says 'review this decision', '\u002Fshura', 'adversarial review', 'what could go wrong', 'architecture review', or 'deployment review'.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-shura\u002FSKILL.md",[],[95,96,75,97,98,99,100,101,102,103,104,81,105,83,106,107,108,109,110,111],"yuri shura","parallel","architecture review","planning","for","deployment","vector","strategic review","decision","strategic","ops","workflow","decisions","architecture","review","perspectives","adversarial",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":121,"publishedAt":37},"01M71CFTTYW1HA2MNX38EV1GJ5","yuri-sales-intelligence","Unified sales and outreach skill generating cold outreach openers, social selling sequences, objection rebuttals, and ad creative for any paid platform — multi-persona aware, adapting tone and offer frame to buyer type. Use when user says 'write a cold email', 'outreach sequence', 'objection handling', 'ad copy', or 'sales pitch'.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-sales-intelligence\u002FSKILL.md",[118],{"categoryNo":119,"categoryName":120,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",[122,123,124,125,126,127,128,129,130,83,131,132,133,134,135,136,137,99,138,139],"intelligence","sales intelligence","yuri sales intelligence","sales","cold","paid","social","persona","pitch","cold email","ad creative","write","sequences","sequence","platform","email","cold outreach","frame",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":154,"publishedAt":37},"01M71CFQMBFTFADJNGP0Z2WCYK","yuri-code-intelligence","Unified code quality intelligence layer that diagnoses code smells (Long Method, Feature Envy, design pattern issues), prescribes targeted Fowler refactoring techniques, and reviews code for security, performance, and clarity. Use when user says 'review this code', 'refactor this', 'what's wrong with this method', 'code smells', or 'clean this up'.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-code-intelligence\u002FSKILL.md",[146,149],{"categoryNo":147,"categoryName":148,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":150,"categoryName":151,"taxonomyType":152,"taxonomyTypeDesc":153},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[155,85,156,122,75,157,158,159,99,160,161,162,163,164,165,30,166,167,81,83],"yuri code intelligence","code intelligence","reviews","code quality","feature","performance","code review","long","up","issues","clean","improve","design",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":37},"01M71CFP32RT6GD3GKNHCJP8VP","yuri-adw","Invoke when user asks to run the ADW loop \u002F agentic engineering loop \u002F software factory workflow.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-adw\u002FSKILL.md",[],[175,176,177,178,179,180,181,182,183,83,184,106,185,186],"yuri adw","run","engineering loop","software factory","software","agentic engineering","factory","loop","invoke","engineering","agentic","user",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":205,"publishedAt":37},"01M71CFK4VPEKY6A73237P7RSN","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[193,196,199,202],{"categoryNo":194,"categoryName":195,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":197,"categoryName":198,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":200,"categoryName":201,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":203,"categoryName":204,"taxonomyType":152,"taxonomyTypeDesc":153},"01JBSEEDCAT000000000000036","内容创作者",[206,207,208,83,106,209,75,210,100,81,211],"writing","writing skills","new","work","editing","Existing"]