[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C32XMRJ1VFP50DASEH86JZ":3,"skill-same:01M6C32XMRJ1VFP50DASEH86JZ":77},{"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":29,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":6,"ownerHtmlUrl":59,"ownerBlogUrl":60,"ownerDescription":61,"updatedAt":62,"install":63,"resources":76},"01M6C32XMRJ1VFP50DASEH86JZ","performance-optimizer",null,"Profile and optimize application performance across frontend, backend, and database layers. Covers bundle analysis, Core Web Vitals, Lighthouse optimization, lazy loading, code splitting, image optimization, caching strategies, database query optimization, memory leak detection, and server response time reduction. Use when optimizing performance or debugging slowness.","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\u002Fperformance-optimizer\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"performance","performance optimizer","server","backend","use","profile","Lighthouse","analysis","core web vitals","detection","Optimization","frontend","database","code","core","debugging","web","memory","image","2026-11-10 10:12:30",false,"---\nname: performance-optimizer\ndescription: Profile and optimize application performance across frontend, backend, and database layers. Covers bundle analysis, Core Web Vitals, Lighthouse optimization, lazy loading, code splitting, image optimization, caching strategies, database query optimization, memory leak detection, and server response time reduction. Use when optimizing performance or debugging slowness.\n---\n\n# Performance Optimization\n\n## Frontend Performance\n\n### Core Web Vitals Targets\n| Metric | Good | Needs Work | Poor |\n|--------|------|-----------|------|\n| LCP (Largest Contentful Paint) | ≤ 2.5s | ≤ 4s | > 4s |\n| INP (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |\n| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |\n\n### Bundle Optimization\n```bash\n# Analyze bundle size\nnpx -y vite-bundle-visualizer     # Vite projects\nnpx -y @next\u002Fbundle-analyzer      # Next.js projects\nnpx -y source-map-explorer dist\u002Fmain.js  # Any project\n```\n\n### Code Splitting\n```tsx\n\u002F\u002F Route-level splitting (automatic in Next.js)\nconst DashboardPage = lazy(() => import(\".\u002Fpages\u002FDashboard\"));\n\n\u002F\u002F Component-level splitting\nconst HeavyChart = lazy(() => import(\".\u002Fcomponents\u002FHeavyChart\"));\n\nfunction Dashboard() {\n  return (\n    \u003CSuspense fallback={\u003CSkeleton className=\"h-64\" \u002F>}>\n      \u003CHeavyChart data={data} \u002F>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n### Image Optimization\n```tsx\n\u002F\u002F Next.js — ALWAYS use next\u002Fimage\nimport Image from \"next\u002Fimage\";\n\u003CImage\n  src=\"\u002Fhero.jpg\"\n  alt=\"Hero image\"\n  width={1200}\n  height={630}\n  priority              \u002F\u002F Above-the-fold images\n  placeholder=\"blur\"    \u002F\u002F Smooth loading\n  sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n\u002F>\n\n\u002F\u002F Outside Next.js\n\u003Cpicture>\n  \u003Csource srcSet=\"\u002Fhero.avif\" type=\"image\u002Favif\" \u002F>\n  \u003Csource srcSet=\"\u002Fhero.webp\" type=\"image\u002Fwebp\" \u002F>\n  \u003Cimg src=\"\u002Fhero.jpg\" alt=\"Hero\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" \u002F>\n\u003C\u002Fpicture>\n```\n\n### Resource Loading\n```html\n\u003C!-- Preload critical resources -->\n\u003Clink rel=\"preload\" href=\"\u002Ffonts\u002Finter.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin \u002F>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fapi.example.com\" \u002F>\n\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fcdn.example.com\" \u002F>\n\n\u003C!-- Defer non-critical scripts -->\n\u003Cscript src=\"\u002Fanalytics.js\" defer>\u003C\u002Fscript>\n```\n\n### CSS Optimization\n```css\n\u002F* Use content-visibility for off-screen content *\u002F\n.below-fold { content-visibility: auto; contain-intrinsic-size: auto 500px; }\n\n\u002F* Avoid layout thrashing — batch DOM reads\u002Fwrites *\u002F\n\u002F* Use CSS transforms instead of layout properties *\u002F\n.animate { transform: translateX(100px); }  \u002F* Good: composite only *\u002F\n.avoid   { left: 100px; }                   \u002F* Bad: triggers layout *\u002F\n```\n\n## Backend Performance\n\n### Response Time Optimization\n```ts\n\u002F\u002F Database query optimization — SELECT only needed fields\nconst users = await prisma.user.findMany({\n  select: { id: true, name: true, email: true },  \u002F\u002F NOT include entire relations\n  take: 20,\n  cursor: lastId ? { id: lastId } : undefined,\n});\n\n\u002F\u002F Connection pooling\nconst pool = new Pool({\n  connectionString: process.env.DATABASE_URL,\n  max: 20,                \u002F\u002F Max connections\n  idleTimeoutMillis: 30000,\n  connectionTimeoutMillis: 2000,\n});\n```\n\n### Caching Strategies\n```ts\n\u002F\u002F In-memory cache for hot data\nconst cache = new Map\u003Cstring, { data: unknown; expiry: number }>();\n\nfunction getCached\u003CT>(key: string): T | null {\n  const entry = cache.get(key);\n  if (!entry || Date.now() > entry.expiry) {\n    cache.delete(key);\n    return null;\n  }\n  return entry.data as T;\n}\n\nfunction setCached(key: string, data: unknown, ttlMs: number = 60000): void {\n  cache.set(key, { data, expiry: Date.now() + ttlMs });\n}\n\n\u002F\u002F HTTP caching headers\nres.set(\"Cache-Control\", \"public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400\");\nres.set(\"ETag\", computeEtag(data));\n```\n\n### Async Processing\n```ts\n\u002F\u002F Move expensive operations to background\nawait emailQueue.add(\"send-welcome\", { userId }, { delay: 0 });\n\n\u002F\u002F Stream large responses\napp.get(\"\u002Fapi\u002Fexport\", async (req, res) => {\n  res.setHeader(\"Content-Type\", \"application\u002Fjson\");\n  res.write(\"[\");\n  const cursor = prisma.user.findMany({ cursor: true });\n  let first = true;\n  for await (const chunk of cursor) {\n    res.write(`${first ? \"\" : \",\"}${JSON.stringify(chunk)}`);\n    first = false;\n  }\n  res.end(\"]\");\n});\n```\n\n## Database Performance\n\n### Query Analysis\n```sql\n-- Explain query plan to find slow queries\nEXPLAIN ANALYZE SELECT * FROM post WHERE author_id = '123' ORDER BY created_at DESC LIMIT 20;\n\n-- Find missing indexes\nSELECT * FROM pg_stat_user_tables WHERE seq_scan > idx_scan AND n_live_tup > 10000;\n```\n\n### Index Optimization\n```sql\n-- Composite index matching query patterns\nCREATE INDEX idx_post_author_date ON post(author_id, created_at DESC);\n\n-- Partial index for filtered queries\nCREATE INDEX idx_active_subscriptions ON subscription(user_id) WHERE status = 'active';\n\n-- Covering index (avoids table lookup)\nCREATE INDEX idx_post_listing ON post(author_id, created_at DESC) INCLUDE (title, slug);\n```\n\n## Memory Leak Detection\n\n### Node.js Profiling\n```ts\n\u002F\u002F Monitor memory usage\nsetInterval(() => {\n  const usage = process.memoryUsage();\n  if (usage.heapUsed > 500 * 1024 * 1024) {\n    logger.warn(\"High memory usage\", {\n      heapUsed: `${(usage.heapUsed \u002F 1024 \u002F 1024).toFixed(1)}MB`,\n      rss: `${(usage.rss \u002F 1024 \u002F 1024).toFixed(1)}MB`,\n    });\n  }\n}, 30000);\n```\n\n### Common Leak Patterns\n```ts\n\u002F\u002F BAD: Growing event listeners\nemitter.on(\"data\", handler);  \u002F\u002F Never removed\n\n\u002F\u002F GOOD: Clean up listeners\nconst handler = (data) => process(data);\nemitter.on(\"data\", handler);\nonCleanup(() => emitter.off(\"data\", handler));\n\n\u002F\u002F BAD: Unbounded cache\nconst cache = {};\ncache[key] = data;  \u002F\u002F Grows forever\n\n\u002F\u002F GOOD: LRU cache with max size\nimport { LRUCache } from \"lru-cache\";\nconst cache = new LRUCache({ max: 1000, ttl: 60000 });\n```\n\n## Performance Checklist\n- [ ] Lighthouse score ≥ 90 on all categories\n- [ ] Bundle size analyzed — no unnecessary imports\n- [ ] Images optimized (WebP\u002FAVIF, lazy loaded, sized)\n- [ ] Fonts preloaded, subset, display: swap\n- [ ] Database queries use indexes (check EXPLAIN)\n- [ ] API responses cached where possible\n- [ ] No memory leaks (stable heap over time)\n- [ ] Background processing for expensive operations\n","# Performance Optimization\n\n## Frontend Performance\n\n### Core Web Vitals Targets\n| Metric | Good | Needs Work | Poor |\n|--------|------|-----------|------|\n| LCP (Largest Contentful Paint) | ≤ 2.5s | ≤ 4s | > 4s |\n| INP (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms |\n| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |\n\n### Bundle Optimization\n```bash\n# Analyze bundle size\nnpx -y vite-bundle-visualizer     # Vite projects\nnpx -y @next\u002Fbundle-analyzer      # Next.js projects\nnpx -y source-map-explorer dist\u002Fmain.js  # Any project\n```\n\n### Code Splitting\n```tsx\n\u002F\u002F Route-level splitting (automatic in Next.js)\nconst DashboardPage = lazy(() => import(\".\u002Fpages\u002FDashboard\"));\n\n\u002F\u002F Component-level splitting\nconst HeavyChart = lazy(() => import(\".\u002Fcomponents\u002FHeavyChart\"));\n\nfunction Dashboard() {\n  return (\n    \u003CSuspense fallback={\u003CSkeleton className=\"h-64\" \u002F>}>\n      \u003CHeavyChart data={data} \u002F>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n### Image Optimization\n```tsx\n\u002F\u002F Next.js — ALWAYS use next\u002Fimage\nimport Image from \"next\u002Fimage\";\n\u003CImage\n  src=\"\u002Fhero.jpg\"\n  alt=\"Hero image\"\n  width={1200}\n  height={630}\n  priority              \u002F\u002F Above-the-fold images\n  placeholder=\"blur\"    \u002F\u002F Smooth loading\n  sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n\u002F>\n\n\u002F\u002F Outside Next.js\n\u003Cpicture>\n  \u003Csource srcSet=\"\u002Fhero.avif\" type=\"image\u002Favif\" \u002F>\n  \u003Csource srcSet=\"\u002Fhero.webp\" type=\"image\u002Fwebp\" \u002F>\n  \u003Cimg src=\"\u002Fhero.jpg\" alt=\"Hero\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" \u002F>\n\u003C\u002Fpicture>\n```\n\n### Resource Loading\n```html\n\u003C!-- Preload critical resources -->\n\u003Clink rel=\"preload\" href=\"\u002Ffonts\u002Finter.woff2\" as=\"font\" type=\"font\u002Fwoff2\" crossorigin \u002F>\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fapi.example.com\" \u002F>\n\u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fcdn.example.com\" \u002F>\n\n\u003C!-- Defer non-critical scripts -->\n\u003Cscript src=\"\u002Fanalytics.js\" defer>\u003C\u002Fscript>\n```\n\n### CSS Optimization\n```css\n\u002F* Use content-visibility for off-screen content *\u002F\n.below-fold { content-visibility: auto; contain-intrinsic-size: auto 500px; }\n\n\u002F* Avoid layout thrashing — batch DOM reads\u002Fwrites *\u002F\n\u002F* Use CSS transforms instead of layout properties *\u002F\n.animate { transform: translateX(100px); }  \u002F* Good: composite only *\u002F\n.avoid   { left: 100px; }                   \u002F* Bad: triggers layout *\u002F\n```\n\n## Backend Performance\n\n### Response Time Optimization\n```ts\n\u002F\u002F Database query optimization — SELECT only needed fields\nconst users = await prisma.user.findMany({\n  select: { id: true, name: true, email: true },  \u002F\u002F NOT include entire relations\n  take: 20,\n  cursor: lastId ? { id: lastId } : undefined,\n});\n\n\u002F\u002F Connection pooling\nconst pool = new Pool({\n  connectionString: process.env.DATABASE_URL,\n  max: 20,                \u002F\u002F Max connections\n  idleTimeoutMillis: 30000,\n  connectionTimeoutMillis: 2000,\n});\n```\n\n### Caching Strategies\n```ts\n\u002F\u002F In-memory cache for hot data\nconst cache = new Map\u003Cstring, { data: unknown; expiry: number }>();\n\nfunction getCached\u003CT>(key: string): T | null {\n  const entry = cache.get(key);\n  if (!entry || Date.now() > entry.expiry) {\n    cache.delete(key);\n    return null;\n  }\n  return entry.data as T;\n}\n\nfunction setCached(key: string, data: unknown, ttlMs: number = 60000): void {\n  cache.set(key, { data, expiry: Date.now() + ttlMs });\n}\n\n\u002F\u002F HTTP caching headers\nres.set(\"Cache-Control\", \"public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400\");\nres.set(\"ETag\", computeEtag(data));\n```\n\n### Async Processing\n```ts\n\u002F\u002F Move expensive operations to background\nawait emailQueue.add(\"send-welcome\", { userId }, { delay: 0 });\n\n\u002F\u002F Stream large responses\napp.get(\"\u002Fapi\u002Fexport\", async (req, res) => {\n  res.setHeader(\"Content-Type\", \"application\u002Fjson\");\n  res.write(\"[\");\n  const cursor = prisma.user.findMany({ cursor: true });\n  let first = true;\n  for await (const chunk of cursor) {\n    res.write(`${first ? \"\" : \",\"}${JSON.stringify(chunk)}`);\n    first = false;\n  }\n  res.end(\"]\");\n});\n```\n\n## Database Performance\n\n### Query Analysis\n```sql\n-- Explain query plan to find slow queries\nEXPLAIN ANALYZE SELECT * FROM post WHERE author_id = '123' ORDER BY created_at DESC LIMIT 20;\n\n-- Find missing indexes\nSELECT * FROM pg_stat_user_tables WHERE seq_scan > idx_scan AND n_live_tup > 10000;\n```\n\n### Index Optimization\n```sql\n-- Composite index matching query patterns\nCREATE INDEX idx_post_author_date ON post(author_id, created_at DESC);\n\n-- Partial index for filtered queries\nCREATE INDEX idx_active_subscriptions ON subscription(user_id) WHERE status = 'active';\n\n-- Covering index (avoids table lookup)\nCREATE INDEX idx_post_listing ON post(author_id, created_at DESC) INCLUDE (title, slug);\n```\n\n## Memory Leak Detection\n\n### Node.js Profiling\n```ts\n\u002F\u002F Monitor memory usage\nsetInterval(() => {\n  const usage = process.memoryUsage();\n  if (usage.heapUsed > 500 * 1024 * 1024) {\n    logger.warn(\"High memory usage\", {\n      heapUsed: `${(usage.heapUsed \u002F 1024 \u002F 1024).toFixed(1)}MB`,\n      rss: `${(usage.rss \u002F 1024 \u002F 1024).toFixed(1)}MB`,\n    });\n  }\n}, 30000);\n```\n\n### Common Leak Patterns\n```ts\n\u002F\u002F BAD: Growing event listeners\nemitter.on(\"data\", handler);  \u002F\u002F Never removed\n\n\u002F\u002F GOOD: Clean up listeners\nconst handler = (data) => process(data);\nemitter.on(\"data\", handler);\nonCleanup(() => emitter.off(\"data\", handler));\n\n\u002F\u002F BAD: Unbounded cache\nconst cache = {};\ncache[key] = data;  \u002F\u002F Grows forever\n\n\u002F\u002F GOOD: LRU cache with max size\nimport { LRUCache } from \"lru-cache\";\nconst cache = new LRUCache({ max: 1000, ttl: 60000 });\n```\n\n## Performance Checklist\n- [ ] Lighthouse score ≥ 90 on all categories\n- [ ] Bundle size analyzed — no unnecessary imports\n- [ ] Images optimized (WebP\u002FAVIF, lazy loaded, sized)\n- [ ] Fonts preloaded, subset, display: swap\n- [ ] Database queries use indexes (check EXPLAIN)\n- [ ] API responses cached where possible\n- [ ] No memory leaks (stable heap over time)\n- [ ] Background processing for expensive operations\n",{"name":5,"description":7},"main","791249e54ef4db28bf9af93993479d2e0c6a8a9d","skills\u002Fperformance-optimizer",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":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add RaheesAhmed\u002FSajiCode --skill performance-optimizer",{"tool":69,"command":70},"bunx","bunx skills add RaheesAhmed\u002FSajiCode --skill performance-optimizer",{"tool":72,"command":73},"pnpm","pnpm dlx skills add RaheesAhmed\u002FSajiCode --skill performance-optimizer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fperformance-optimizer\u002FSKILL.md",true,[],[78,91,103,125,150,170],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":87,"publishedAt":49},"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",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[88,89,90],"demo skill","demo","plugin",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":98,"publishedAt":49},"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",[97],{"categoryNo":85,"categoryName":86,"taxonomyType":21,"taxonomyTypeDesc":22},[99,100,101,102,34],"write","write a skill","create","user",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":112,"publishedAt":49},"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",[109],{"categoryNo":110,"categoryName":111,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[113,46,114,115,116,117,118,119,120,121,122,123,124,34],"research","web research","docs","documentation","libraries","packages","npm","extraction","pypi","data","investigation","api",{"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":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":134,"publishedAt":49},"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",[131],{"categoryNo":132,"categoryName":133,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[127,135,34,136,137,138,124,139,122,140,141,142,143,144,45,145,146,147,148,149],"ci","playwright","snapshot","coverage","e2e","tdd","integration","test","architecture","writing tests","workflow","implement","writing","design","e2e testing",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":49},"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",[],[152,44,157,158,145,43,159,160,34,161,162,163,164,165,166,167,168,169],"tasks","placeholder","coding","dependency","quality","refactoring","plan","Safety","methodology","ZeRO","engineering","file","verification",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":179,"publishedAt":49},"01M6C3380VVQHM6CCC843MH5S3","styling","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.","https:\u002F\u002Fgithub.com\u002FRaheesAhmed\u002FSajiCode\u002Fblob\u002Fmain\u002Fskills\u002Fstyling\u002FSKILL.md",[176],{"categoryNo":177,"categoryName":178,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[172,180,181,34,182,183,184,185,186,40,143,146,30,187,148],"Tailwind","container","performance optimization","js","Animation","first","Production","css"]