[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C3380VVQHM6CCC843MH5S3":3,"skill-same:01M6C3380VVQHM6CCC843MH5S3":109},{"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":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":6,"ownerHtmlUrl":48,"ownerBlogUrl":49,"ownerDescription":50,"updatedAt":51,"install":52,"resources":65},"01M6C3380VVQHM6CCC843MH5S3","styling",null,"Implement production styling systems with Tailwind CSS, vanilla CSS, or CSS-in-JS. Covers CSS architecture (BEM, utility-first, modules), design tokens, responsive patterns, animation systems, dark mode, container queries, print styles, and performance optimization. Use when implementing designs or building CSS architectures.","RaheesAhmed\u002FSajiCode","RaheesAhmed","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F48914925?v=4","01M6C31VY6EJ4N8QS30J585H9H","Rahees Ahmed","01M6C31W21ET706B6XTWHS52VC",68,"MIT","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fstyling\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"design","css","performance","implement","architecture","Optimization","Production","first","Animation","Tailwind","js","performance optimization","use","container","2026-11-10 10:12:30",false,"---\nname: styling\ndescription: Implement production styling systems with Tailwind CSS, vanilla CSS, or CSS-in-JS. Covers CSS architecture (BEM, utility-first, modules), design tokens, responsive patterns, animation systems, dark mode, container queries, print styles, and performance optimization. Use when implementing designs or building CSS architectures.\n---\n\n# Styling Systems\n\n## CSS Architecture Options\n\n| Approach | Best For | Trade-offs |\n|----------|----------|-----------|\n| Tailwind CSS | Rapid prototyping, team consistency | Verbose HTML, build dependency |\n| CSS Modules | Component-scoped, no conflicts | File-per-component overhead |\n| Vanilla CSS + Custom Props | Maximum control, no build tools | Requires discipline |\n| styled-components | Dynamic styles, CSS-in-JS | Runtime cost, SSR complexity |\n\n## Design Tokens (CSS Custom Properties)\n\n```css\n:root {\n  \u002F* Colors (HSL for easy manipulation) *\u002F\n  --color-primary: hsl(262 83% 58%);\n  --color-primary-hover: hsl(262 83% 52%);\n  --color-success: hsl(142 71% 45%);\n  --color-warning: hsl(38 92% 50%);\n  --color-danger: hsl(0 84% 60%);\n\n  --color-bg: hsl(0 0% 100%);\n  --color-surface: hsl(0 0% 98%);\n  --color-text: hsl(240 10% 4%);\n  --color-text-muted: hsl(240 5% 46%);\n  --color-border: hsl(240 6% 90%);\n\n  \u002F* Spacing (4px base) *\u002F\n  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;\n  --space-4: 1rem;     --space-6: 1.5rem;    --space-8: 2rem;\n  --space-12: 3rem;    --space-16: 4rem;     --space-24: 6rem;\n\n  \u002F* Typography *\u002F\n  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\n  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n  --text-xs: 0.75rem;   --text-sm: 0.875rem;   --text-base: 1rem;\n  --text-lg: 1.125rem;  --text-xl: 1.25rem;    --text-2xl: 1.5rem;\n\n  \u002F* Shadows *\u002F\n  --shadow-sm: 0 1px 2px rgb(0 0 0 \u002F 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 \u002F 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 \u002F 0.1);\n\n  \u002F* Radius *\u002F\n  --radius-sm: 0.375rem;  --radius-md: 0.5rem;\n  --radius-lg: 0.75rem;   --radius-xl: 1rem;\n  --radius-full: 9999px;\n\n  \u002F* Transitions *\u002F\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n}\n\n\u002F* Dark mode override *\u002F\n@media (prefers-color-scheme: dark) {\n  :root {\n    --color-bg: hsl(240 10% 4%);\n    --color-surface: hsl(240 10% 6%);\n    --color-text: hsl(0 0% 98%);\n    --color-text-muted: hsl(240 5% 65%);\n    --color-border: hsl(240 4% 16%);\n  }\n}\n```\n\n## Responsive Design\n\n### Mobile-First Breakpoints\n```css\n\u002F* Mobile: default *\u002F\n\u002F* Tablet: min-width: 768px *\u002F\n\u002F* Desktop: min-width: 1024px *\u002F\n\u002F* Wide: min-width: 1280px *\u002F\n\n.container {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding-inline: var(--space-4);\n}\n\n@media (min-width: 768px) {\n  .container { padding-inline: var(--space-6); }\n}\n```\n\n### Modern Layout Patterns\n```css\n\u002F* Auto-responsive grid — no media queries needed *\u002F\n.auto-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));\n  gap: var(--space-6);\n}\n\n\u002F* Sidebar layout that collapses on mobile *\u002F\n.sidebar-layout {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--space-6);\n}\n@media (min-width: 768px) {\n  .sidebar-layout { grid-template-columns: 280px 1fr; }\n}\n```\n\n## Animation System\n\n```css\n\u002F* Reusable animation keyframes *\u002F\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }\n@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n\n\u002F* Utility classes *\u002F\n.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out); }\n.animate-slide-up { animation: slideUp var(--duration-normal) var(--ease-out); }\n.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-out); }\n\n\u002F* Respect user preferences *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n## Component Patterns\n\n### Button System\n```css\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-4);\n  font-size: var(--text-sm);\n  font-weight: 500;\n  border-radius: var(--radius-md);\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all var(--duration-fast) var(--ease-out);\n}\n.btn:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n.btn-primary {\n  background: var(--color-primary);\n  color: white;\n}\n.btn-primary:hover { background: var(--color-primary-hover); }\n.btn-ghost {\n  background: transparent;\n  color: var(--color-text);\n}\n.btn-ghost:hover { background: var(--color-surface); }\n```\n\n## CSS Container Queries\n```css\n.card-container { container-type: inline-size; }\n\n@container (min-width: 400px) {\n  .card { flex-direction: row; }\n}\n@container (max-width: 399px) {\n  .card { flex-direction: column; }\n}\n```\n\n## Rules\n- Use CSS custom properties for ALL colors, spacing, and typography\n- Mobile-first: default styles = mobile, add media queries for larger\n- Consistent spacing scale — never arbitrary values\n- `prefers-reduced-motion` on ALL animations\n- Focus-visible rings on ALL interactive elements\n- Never use `!important` — fix specificity instead\n- Use `clamp()` for fluid typography\n- Use logical properties (`margin-inline`, `padding-block`)\n","# Styling Systems\n\n## CSS Architecture Options\n\n| Approach | Best For | Trade-offs |\n|----------|----------|-----------|\n| Tailwind CSS | Rapid prototyping, team consistency | Verbose HTML, build dependency |\n| CSS Modules | Component-scoped, no conflicts | File-per-component overhead |\n| Vanilla CSS + Custom Props | Maximum control, no build tools | Requires discipline |\n| styled-components | Dynamic styles, CSS-in-JS | Runtime cost, SSR complexity |\n\n## Design Tokens (CSS Custom Properties)\n\n```css\n:root {\n  \u002F* Colors (HSL for easy manipulation) *\u002F\n  --color-primary: hsl(262 83% 58%);\n  --color-primary-hover: hsl(262 83% 52%);\n  --color-success: hsl(142 71% 45%);\n  --color-warning: hsl(38 92% 50%);\n  --color-danger: hsl(0 84% 60%);\n\n  --color-bg: hsl(0 0% 100%);\n  --color-surface: hsl(0 0% 98%);\n  --color-text: hsl(240 10% 4%);\n  --color-text-muted: hsl(240 5% 46%);\n  --color-border: hsl(240 6% 90%);\n\n  \u002F* Spacing (4px base) *\u002F\n  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;\n  --space-4: 1rem;     --space-6: 1.5rem;    --space-8: 2rem;\n  --space-12: 3rem;    --space-16: 4rem;     --space-24: 6rem;\n\n  \u002F* Typography *\u002F\n  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;\n  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n  --text-xs: 0.75rem;   --text-sm: 0.875rem;   --text-base: 1rem;\n  --text-lg: 1.125rem;  --text-xl: 1.25rem;    --text-2xl: 1.5rem;\n\n  \u002F* Shadows *\u002F\n  --shadow-sm: 0 1px 2px rgb(0 0 0 \u002F 0.05);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 \u002F 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \u002F 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 \u002F 0.1);\n\n  \u002F* Radius *\u002F\n  --radius-sm: 0.375rem;  --radius-md: 0.5rem;\n  --radius-lg: 0.75rem;   --radius-xl: 1rem;\n  --radius-full: 9999px;\n\n  \u002F* Transitions *\u002F\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n}\n\n\u002F* Dark mode override *\u002F\n@media (prefers-color-scheme: dark) {\n  :root {\n    --color-bg: hsl(240 10% 4%);\n    --color-surface: hsl(240 10% 6%);\n    --color-text: hsl(0 0% 98%);\n    --color-text-muted: hsl(240 5% 65%);\n    --color-border: hsl(240 4% 16%);\n  }\n}\n```\n\n## Responsive Design\n\n### Mobile-First Breakpoints\n```css\n\u002F* Mobile: default *\u002F\n\u002F* Tablet: min-width: 768px *\u002F\n\u002F* Desktop: min-width: 1024px *\u002F\n\u002F* Wide: min-width: 1280px *\u002F\n\n.container {\n  width: 100%;\n  max-width: 1280px;\n  margin-inline: auto;\n  padding-inline: var(--space-4);\n}\n\n@media (min-width: 768px) {\n  .container { padding-inline: var(--space-6); }\n}\n```\n\n### Modern Layout Patterns\n```css\n\u002F* Auto-responsive grid — no media queries needed *\u002F\n.auto-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));\n  gap: var(--space-6);\n}\n\n\u002F* Sidebar layout that collapses on mobile *\u002F\n.sidebar-layout {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: var(--space-6);\n}\n@media (min-width: 768px) {\n  .sidebar-layout { grid-template-columns: 280px 1fr; }\n}\n```\n\n## Animation System\n\n```css\n\u002F* Reusable animation keyframes *\u002F\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }\n@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n\n\u002F* Utility classes *\u002F\n.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out); }\n.animate-slide-up { animation: slideUp var(--duration-normal) var(--ease-out); }\n.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-out); }\n\n\u002F* Respect user preferences *\u002F\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n## Component Patterns\n\n### Button System\n```css\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-4);\n  font-size: var(--text-sm);\n  font-weight: 500;\n  border-radius: var(--radius-md);\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all var(--duration-fast) var(--ease-out);\n}\n.btn:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n.btn-primary {\n  background: var(--color-primary);\n  color: white;\n}\n.btn-primary:hover { background: var(--color-primary-hover); }\n.btn-ghost {\n  background: transparent;\n  color: var(--color-text);\n}\n.btn-ghost:hover { background: var(--color-surface); }\n```\n\n## CSS Container Queries\n```css\n.card-container { container-type: inline-size; }\n\n@container (min-width: 400px) {\n  .card { flex-direction: row; }\n}\n@container (max-width: 399px) {\n  .card { flex-direction: column; }\n}\n```\n\n## Rules\n- Use CSS custom properties for ALL colors, spacing, and typography\n- Mobile-first: default styles = mobile, add media queries for larger\n- Consistent spacing scale — never arbitrary values\n- `prefers-reduced-motion` on ALL animations\n- Focus-visible rings on ALL interactive elements\n- Never use `!important` — fix specificity instead\n- Use `clamp()` for fluid typography\n- Use logical properties (`margin-inline`, `padding-block`)\n",{"name":5,"description":7},"main","791249e54ef4db28bf9af93993479d2e0c6a8a9d","skills\u002Fstyling",15,"https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode","https:\u002F\u002Fgithub.com\u002FRaheesAhmed","https:\u002F\u002Fraheesahmed.vercel.app\u002F","Forward Deployed AI Engineer | AI Agents, MCP Servers & Business Automation","2026-09-14 17:21:11",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add RaheesAhmed\u002FSajiCode --skill styling",{"tool":58,"command":59},"bunx","bunx skills add RaheesAhmed\u002FSajiCode --skill styling",{"tool":61,"command":62},"pnpm","pnpm dlx skills add RaheesAhmed\u002FSajiCode --skill styling","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fstyling\u002FSKILL.md",true,[66,71,77,81,85,89,93,97,101,105],{"path":67,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"LICENSE","许可证",1036,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002FLICENSE",{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Fhistory-and-range-selection.md","REFERENCE","参考文档",11743,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fhistory-and-range-selection.md",{"path":78,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Fhover-legends-and-tooltips.md",8333,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fhover-legends-and-tooltips.md",{"path":82,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":83,"sourceHtmlUrl":84},"references\u002Fmarket-data-and-live-updates.md",11677,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fmarket-data-and-live-updates.md",{"path":86,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":87,"sourceHtmlUrl":88},"references\u002Fnumeric-axes-and-chart-types.md",10520,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fnumeric-axes-and-chart-types.md",{"path":90,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Fperformance-comparison.md",7359,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fperformance-comparison.md",{"path":94,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Fprice-volume-and-indicators.md",10124,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fprice-volume-and-indicators.md",{"path":98,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fsession-overlays-and-primitives.md",10151,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fsession-overlays-and-primitives.md",{"path":102,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":103,"sourceHtmlUrl":104},"references\u002Fsynchronized-charts.md",8876,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Fsynchronized-charts.md",{"path":106,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":107,"sourceHtmlUrl":108},"references\u002Ftrade-markers-and-price-levels.md",10303,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lightweight-charts-react-components\u002Freferences\u002Ftrade-markers-and-price-levels.md",[110,123,135,158,181,203],{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":119,"publishedAt":38},"01M6C33MP48R5GWR13P2VFHWB0","demo-skill","Demo plugin skill for tests.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fdemo-plugin\u002Fskills\u002Fdemo-skill\u002FSKILL.md",[116],{"categoryNo":117,"categoryName":118,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[120,121,122],"demo skill","demo","plugin",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":130,"publishedAt":38},"01M6C33JV7RMPM5AVS7SCCGDR8","write-a-skill","Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-a-skill\u002FSKILL.MD",[129],{"categoryNo":117,"categoryName":118,"taxonomyType":21,"taxonomyTypeDesc":22},[131,132,133,134,36],"write a skill","write","create","user",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":144,"publishedAt":38},"01M6C33G0SX1683HER40XB8047","web-research","Deep web research and data extraction skill. Systematically research ANY topic by fetching URLs, reading documentation, crawling API docs, evaluating npm\u002Fpypi packages, comparing technologies, and synthesizing findings into actionable recommendations. Use when researching libraries, frameworks, APIs, solutions, or any topic requiring web investigation.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fweb-research\u002FSKILL.md",[141],{"categoryNo":142,"categoryName":143,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[145,146,147,148,149,150,151,152,153,154,155,156,157,36],"research","web","web research","docs","documentation","libraries","packages","npm","extraction","pypi","data","investigation","api",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":167,"publishedAt":38},"01M6C33CRE3D30CHTTV1ZVR1ZM","testing","Design and implement comprehensive test suites. Covers unit testing, integration testing, E2E testing with Playwright, API testing, mocking strategies, test data factories, TDD workflow, snapshot testing, coverage targets, and CI integration. Use when writing tests, designing test architecture, or debugging test failures.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Ftesting\u002FSKILL.md",[164],{"categoryNo":165,"categoryName":166,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[160,168,169,170,157,171,155,172,173,174,175,176,177,178,28,36,179,27,24,180],"snapshot","e2e testing","coverage","e2e","ci","integration","writing tests","debugging","writing","playwright","test","tdd","workflow",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":38},"01M6C33AER10BH236SAP89GJP6","superpowers","Core engineering workflow that activates on EVERY task. Enforces systematic plan-before-code methodology, multi-file refactoring safety, dependency-aware changes, pre-flight verification, and zero-placeholder quality standards. Use PROACTIVELY on all coding tasks.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers\u002FSKILL.md",[],[183,188,189,180,190,191,192,36,193,194,195,196,197,198,199,200,201,202],"tasks","placeholder","core","refactoring","dependency","quality","coding","plan","Safety","methodology","ZeRO","engineering","file","verification","code",{"skillNo":204,"name":205,"nameZh":6,"description":206,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":220,"publishedAt":38},"01M6C335D6H6NMFWB4N6GKH0QB","shadcn-ui","Build premium interfaces with shadcn\u002Fui components, Radix primitives, and Tailwind CSS. Covers installation, component customization, theming, dark mode, form patterns with react-hook-form + Zod, data tables with sorting\u002Ffiltering\u002Fpagination, command palette, toast patterns, and composable component architecture. Use when building UI with shadcn\u002Fui.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",[209,212,217],{"categoryNo":210,"categoryName":211,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":213,"categoryName":214,"taxonomyType":215,"taxonomyTypeDesc":216},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":218,"categoryName":219,"taxonomyType":215,"taxonomyTypeDesc":216},"01JBSEEDCAT000000000000033","数据分析师",[221,222,223,33,36,224,225,226,227,228,155,229,230,231,28,232,233,234,25],"shadcn ui","ui","shadcn","primitives","filtering","customization","command","zod","component architecture","command palette","composable","component","react","components"]