[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71HHS13AXD194X55AVV91TX":3,"skill-same:01M71HHS13AXD194X55AVV91TX":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},"01M71HHS13AXD194X55AVV91TX","pseudo-elements",null,"Audit CSS for pseudo-element best practices and View Transitions API usage. Use when reviewing hover effects, decorative layers, or page transitions. 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\u002Fpseudo-elements\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"elements","pseudo elements","transitions","file","best practices","use","outputs","layers","page","for","view","usage","hover","line","audit","api","when","effects","element","css","2026-11-10 10:12:30",false,"---\nname: pseudo-elements\ndescription: Audit CSS for pseudo-element best practices and View Transitions API usage. Use when reviewing hover effects, decorative layers, or page transitions. Outputs file:line findings.\nlicense: MIT\nmetadata:\n  author: raphael-salaja\n  version: \"2.0.0\"\n  source: \u002Fcontent\u002Ftaking-advantage-of-pseudo-elements\u002Findex.mdx\n---\n\n# Pseudo Elements\n\nReview CSS and JavaScript for pseudo-element best practices and View Transitions API usage.\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 | Before\u002FAfter | `pseudo-` |\n| 2 | View Transitions | `transition-` |\n| 3 | Native Styling | `native-` |\n\n## Rules\n\n### Before\u002FAfter Rules\n\n#### `pseudo-content-required`\n::before and ::after require content property to render.\n\n**Fail:**\n```css\n.button::before {\n  position: absolute;\n  background: var(--gray-3);\n}\n```\n\n**Pass:**\n```css\n.button::before {\n  content: \"\";\n  position: absolute;\n  background: var(--gray-3);\n}\n```\n\n#### `pseudo-over-dom-node`\nUse pseudo-elements for decorative content instead of extra DOM nodes.\n\n**Fail:**\n```tsx\n\u003Cbutton className={styles.button}>\n  \u003Cspan className={styles.background} \u002F> {\u002F* Unnecessary DOM node *\u002F}\n  Click me\n\u003C\u002Fbutton>\n```\n\n**Pass:**\n```tsx\n\u003Cbutton className={styles.button}>\n  Click me\n\u003C\u002Fbutton>\n```\n```css\n.button::before {\n  content: \"\";\n  \u002F* decorative background *\u002F\n}\n```\n\n#### `pseudo-position-relative-parent`\nParent must have position: relative for absolute pseudo-elements.\n\n**Fail:**\n```css\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n}\n\u002F* .button has no position *\u002F\n```\n\n**Pass:**\n```css\n.button {\n  position: relative;\n}\n\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n}\n```\n\n#### `pseudo-z-index-layering`\nPseudo-elements need z-index to layer correctly with content.\n\n**Fail:**\n```css\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--gray-3);\n}\n\u002F* Covers button text *\u002F\n```\n\n**Pass:**\n```css\n.button {\n  position: relative;\n  z-index: 1;\n}\n\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--gray-3);\n  z-index: -1;\n}\n```\n\n#### `pseudo-hit-target-expansion`\nUse negative inset values to expand hit targets without extra markup.\n\n**Fail:**\n```tsx\n\u003Cdiv className={styles.wrapper}> {\u002F* Extra wrapper for hit target *\u002F}\n  \u003Ca className={styles.link}>Link\u003C\u002Fa>\n\u003C\u002Fdiv>\n```\n\n**Pass:**\n```css\n.link {\n  position: relative;\n}\n\n.link::before {\n  content: \"\";\n  position: absolute;\n  inset: -8px -12px;\n}\n```\n\n### View Transitions Rules\n\n#### `transition-name-required`\nElements participating in view transitions need view-transition-name.\n\n**Fail:**\n```ts\ndocument.startViewTransition(() => {\n  \u002F\u002F No view-transition-name assigned\n  targetImg.src = newSrc;\n});\n```\n\n**Pass:**\n```ts\nsourceImg.style.viewTransitionName = \"card\";\ndocument.startViewTransition(() => {\n  sourceImg.style.viewTransitionName = \"\";\n  targetImg.style.viewTransitionName = \"card\";\n});\n```\n\n#### `transition-name-unique`\nEach view-transition-name must be unique on the page during transition.\n\n**Fail:**\n```css\n.card {\n  view-transition-name: card;\n}\n\u002F* Multiple cards with same name *\u002F\n```\n\n**Pass:**\n```ts\n\u002F\u002F Assign unique name only to transitioning element\nelement.style.viewTransitionName = `card-${id}`;\n```\n\n#### `transition-name-cleanup`\nRemove view-transition-name after transition completes.\n\n**Fail:**\n```ts\nsourceImg.style.viewTransitionName = \"card\";\ndocument.startViewTransition(() => {\n  targetImg.style.viewTransitionName = \"card\";\n});\n\u002F\u002F sourceImg still has name, causes conflict on next transition\n```\n\n**Pass:**\n```ts\nsourceImg.style.viewTransitionName = \"card\";\ndocument.startViewTransition(() => {\n  sourceImg.style.viewTransitionName = \"\";\n  targetImg.style.viewTransitionName = \"card\";\n});\n```\n\n#### `transition-over-js-library`\nPrefer View Transitions API over JavaScript animation libraries for page transitions.\n\n**Fail:**\n```tsx\nimport { motion } from \"motion\u002Freact\";\n\nfunction ImageLightbox() {\n  return (\n    \u003Cmotion.img layoutId=\"hero\" \u002F> \u002F\u002F JS-based shared element transition\n  );\n}\n```\n\n**Pass:**\n```ts\nfunction openLightbox(img: HTMLImageElement) {\n  img.style.viewTransitionName = \"hero\";\n  document.startViewTransition(() => {\n    \u002F\u002F Native browser transition\n  });\n}\n```\n\n#### `transition-style-pseudo-elements`\nStyle view transition pseudo-elements for custom animations.\n\n**Fail:**\n```ts\ndocument.startViewTransition(() => { \u002F* ... *\u002F });\n\u002F\u002F Uses default crossfade\n```\n\n**Pass:**\n```css\n::view-transition-group(card) {\n  animation-duration: 300ms;\n  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n```\n\n### Native Styling Rules\n\n#### `native-backdrop-styling`\nUse ::backdrop pseudo-element for dialog\u002Fpopover backgrounds.\n\n**Fail:**\n```tsx\n\u003C>\n  \u003Cdiv className={styles.overlay} onClick={close} \u002F>\n  \u003Cdialog className={styles.dialog}>{children}\u003C\u002Fdialog>\n\u003C\u002F>\n```\n\n**Pass:**\n```css\ndialog::backdrop {\n  background: var(--black-a6);\n  backdrop-filter: blur(4px);\n}\n```\n\n#### `native-placeholder-styling`\nUse ::placeholder for input placeholder styling, not wrapper elements.\n\n**Fail:**\n```tsx\n\u003Cdiv className={styles.inputWrapper}>\n  {!value && \u003Cspan className={styles.placeholder}>Enter text...\u003C\u002Fspan>}\n  \u003Cinput value={value} \u002F>\n\u003C\u002Fdiv>\n```\n\n**Pass:**\n```css\ninput::placeholder {\n  color: var(--gray-9);\n  opacity: 1;\n}\n```\n\n#### `native-selection-styling`\nUse ::selection for text selection styling.\n\n**Pass:**\n```css\n::selection {\n  background: var(--blue-a5);\n  color: var(--gray-12);\n}\n```\n\n## Output Format\n\nWhen reviewing files, output findings as:\n\n```\nfile:line - [rule-id] description of issue\n\nExample:\ncomponents\u002Fbutton\u002Fstyles.module.css:12 - [pseudo-content-required] ::before missing content property\ncomponents\u002Flightbox\u002Findex.tsx:45 - [transition-over-js-library] Using motion layoutId instead of View Transitions API\n```\n\n## Summary Table\n\nAfter findings, output a summary:\n\n| Rule | Count | Severity |\n|------|-------|----------|\n| `pseudo-content-required` | 2 | HIGH |\n| `pseudo-over-dom-node` | 1 | MEDIUM |\n| `transition-name-cleanup` | 1 | MEDIUM |\n\n## References\n\n- [MDN Pseudo-elements Reference](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FSelectors\u002FPseudo-elements)\n- [View Transitions API](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transitions_API)\n","# Pseudo Elements\n\nReview CSS and JavaScript for pseudo-element best practices and View Transitions API usage.\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 | Before\u002FAfter | `pseudo-` |\n| 2 | View Transitions | `transition-` |\n| 3 | Native Styling | `native-` |\n\n## Rules\n\n### Before\u002FAfter Rules\n\n#### `pseudo-content-required`\n::before and ::after require content property to render.\n\n**Fail:**\n```css\n.button::before {\n  position: absolute;\n  background: var(--gray-3);\n}\n```\n\n**Pass:**\n```css\n.button::before {\n  content: \"\";\n  position: absolute;\n  background: var(--gray-3);\n}\n```\n\n#### `pseudo-over-dom-node`\nUse pseudo-elements for decorative content instead of extra DOM nodes.\n\n**Fail:**\n```tsx\n\u003Cbutton className={styles.button}>\n  \u003Cspan className={styles.background} \u002F> {\u002F* Unnecessary DOM node *\u002F}\n  Click me\n\u003C\u002Fbutton>\n```\n\n**Pass:**\n```tsx\n\u003Cbutton className={styles.button}>\n  Click me\n\u003C\u002Fbutton>\n```\n```css\n.button::before {\n  content: \"\";\n  \u002F* decorative background *\u002F\n}\n```\n\n#### `pseudo-position-relative-parent`\nParent must have position: relative for absolute pseudo-elements.\n\n**Fail:**\n```css\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n}\n\u002F* .button has no position *\u002F\n```\n\n**Pass:**\n```css\n.button {\n  position: relative;\n}\n\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n}\n```\n\n#### `pseudo-z-index-layering`\nPseudo-elements need z-index to layer correctly with content.\n\n**Fail:**\n```css\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--gray-3);\n}\n\u002F* Covers button text *\u002F\n```\n\n**Pass:**\n```css\n.button {\n  position: relative;\n  z-index: 1;\n}\n\n.button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--gray-3);\n  z-index: -1;\n}\n```\n\n#### `pseudo-hit-target-expansion`\nUse negative inset values to expand hit targets without extra markup.\n\n**Fail:**\n```tsx\n\u003Cdiv className={styles.wrapper}> {\u002F* Extra wrapper for hit target *\u002F}\n  \u003Ca className={styles.link}>Link\u003C\u002Fa>\n\u003C\u002Fdiv>\n```\n\n**Pass:**\n```css\n.link {\n  position: relative;\n}\n\n.link::before {\n  content: \"\";\n  position: absolute;\n  inset: -8px -12px;\n}\n```\n\n### View Transitions Rules\n\n#### `transition-name-required`\nElements participating in view transitions need view-transition-name.\n\n**Fail:**\n```ts\ndocument.startViewTransition(() => {\n  \u002F\u002F No view-transition-name assigned\n  targetImg.src = newSrc;\n});\n```\n\n**Pass:**\n```ts\nsourceImg.style.viewTransitionName = \"card\";\ndocument.startViewTransition(() => {\n  sourceImg.style.viewTransitionName = \"\";\n  targetImg.style.viewTransitionName = \"card\";\n});\n```\n\n#### `transition-name-unique`\nEach view-transition-name must be unique on the page during transition.\n\n**Fail:**\n```css\n.card {\n  view-transition-name: card;\n}\n\u002F* Multiple cards with same name *\u002F\n```\n\n**Pass:**\n```ts\n\u002F\u002F Assign unique name only to transitioning element\nelement.style.viewTransitionName = `card-${id}`;\n```\n\n#### `transition-name-cleanup`\nRemove view-transition-name after transition completes.\n\n**Fail:**\n```ts\nsourceImg.style.viewTransitionName = \"card\";\ndocument.startViewTransition(() => {\n  targetImg.style.viewTransitionName = \"card\";\n});\n\u002F\u002F sourceImg still has name, causes conflict on next transition\n```\n\n**Pass:**\n```ts\nsourceImg.style.viewTransitionName = \"card\";\ndocument.startViewTransition(() => {\n  sourceImg.style.viewTransitionName = \"\";\n  targetImg.style.viewTransitionName = \"card\";\n});\n```\n\n#### `transition-over-js-library`\nPrefer View Transitions API over JavaScript animation libraries for page transitions.\n\n**Fail:**\n```tsx\nimport { motion } from \"motion\u002Freact\";\n\nfunction ImageLightbox() {\n  return (\n    \u003Cmotion.img layoutId=\"hero\" \u002F> \u002F\u002F JS-based shared element transition\n  );\n}\n```\n\n**Pass:**\n```ts\nfunction openLightbox(img: HTMLImageElement) {\n  img.style.viewTransitionName = \"hero\";\n  document.startViewTransition(() => {\n    \u002F\u002F Native browser transition\n  });\n}\n```\n\n#### `transition-style-pseudo-elements`\nStyle view transition pseudo-elements for custom animations.\n\n**Fail:**\n```ts\ndocument.startViewTransition(() => { \u002F* ... *\u002F });\n\u002F\u002F Uses default crossfade\n```\n\n**Pass:**\n```css\n::view-transition-group(card) {\n  animation-duration: 300ms;\n  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n```\n\n### Native Styling Rules\n\n#### `native-backdrop-styling`\nUse ::backdrop pseudo-element for dialog\u002Fpopover backgrounds.\n\n**Fail:**\n```tsx\n\u003C>\n  \u003Cdiv className={styles.overlay} onClick={close} \u002F>\n  \u003Cdialog className={styles.dialog}>{children}\u003C\u002Fdialog>\n\u003C\u002F>\n```\n\n**Pass:**\n```css\ndialog::backdrop {\n  background: var(--black-a6);\n  backdrop-filter: blur(4px);\n}\n```\n\n#### `native-placeholder-styling`\nUse ::placeholder for input placeholder styling, not wrapper elements.\n\n**Fail:**\n```tsx\n\u003Cdiv className={styles.inputWrapper}>\n  {!value && \u003Cspan className={styles.placeholder}>Enter text...\u003C\u002Fspan>}\n  \u003Cinput value={value} \u002F>\n\u003C\u002Fdiv>\n```\n\n**Pass:**\n```css\ninput::placeholder {\n  color: var(--gray-9);\n  opacity: 1;\n}\n```\n\n#### `native-selection-styling`\nUse ::selection for text selection styling.\n\n**Pass:**\n```css\n::selection {\n  background: var(--blue-a5);\n  color: var(--gray-12);\n}\n```\n\n## Output Format\n\nWhen reviewing files, output findings as:\n\n```\nfile:line - [rule-id] description of issue\n\nExample:\ncomponents\u002Fbutton\u002Fstyles.module.css:12 - [pseudo-content-required] ::before missing content property\ncomponents\u002Flightbox\u002Findex.tsx:45 - [transition-over-js-library] Using motion layoutId instead of View Transitions API\n```\n\n## Summary Table\n\nAfter findings, output a summary:\n\n| Rule | Count | Severity |\n|------|-------|----------|\n| `pseudo-content-required` | 2 | HIGH |\n| `pseudo-over-dom-node` | 1 | MEDIUM |\n| `transition-name-cleanup` | 1 | MEDIUM |\n\n## References\n\n- [MDN Pseudo-elements Reference](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FSelectors\u002FPseudo-elements)\n- [View Transitions API](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transitions_API)\n",{"name":5,"license":15,"metadata":44,"description":7},{"author":45,"source":46,"version":47},"raphael-salaja","\u002Fcontent\u002Ftaking-advantage-of-pseudo-elements\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 pseudo-elements",{"tool":61,"command":62},"bunx","bunx skills add agency-black\u002FSkills --skill pseudo-elements",{"tool":64,"command":65},"pnpm","pnpm dlx skills add agency-black\u002FSkills --skill pseudo-elements","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002Fpseudo-elements\u002FSKILL.md",true,[],[70,95,126,156,179,199],{"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,28,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,117,118,119,120,121,122,123,124,125],"xvary","stock","research","xvary stock research","sec edgar","community","equity","thesis","analysis","code","Market","compare","market data","analyze","with","codex","cursor","2026",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":130,"licenseFileUrl":131,"sourceHtmlUrl":132,"categories":133,"keywords":140,"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",[134,137],{"categoryNo":135,"categoryName":136,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":138,"categoryName":139,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000009","前端开发",[141,142,143,28,144,145,146,147,148,149,150,122,151,152,153,154,155],"webapp","testing","webapp testing","applications","local","frontend","debugging","toolkit","logs","browser","playwright","web","behavior","ui","screenshots",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":130,"licenseFileUrl":160,"sourceHtmlUrl":161,"categories":162,"keywords":164,"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",[163],{"categoryNo":138,"categoryName":139,"taxonomyType":105,"taxonomyTypeDesc":106},[165,166,167,152,168,169,38,28,170,171,146,172,24,22,173,174,175,176,177,178],"builder","artifacts builder","artifacts","web artifacts builder","single-file","Tailwind","ui components","single","components","react","multi","state","routing","state management",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":186,"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",[185],{"categoryNo":138,"categoryName":139,"taxonomyType":105,"taxonomyTypeDesc":106},[174,187,29,188,189,21,190,191,192,38,193,194,37,195,35,173,34,196,197,198],"vercel react view transitions","react view transitions","vercel","shared","back","Animation","types","states","implementing","route","create","libraries",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":203,"categories":204,"keywords":206,"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",[205],{"categoryNo":138,"categoryName":139,"taxonomyType":105,"taxonomyTypeDesc":106},[189,207,174,208,209,210,211,212,213,28,214,195,215,24,216,217,35,23,218,173],"vercel react native skills","react native","native","react native skills","modules","platform","animations","performance","triggers","react native components","apps","tasks"]