[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R2D57HQMSSRFN8HM5CF5Y8":3,"skill-same:01M6R2D57HQMSSRFN8HM5CF5Y8":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":18,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":40,"repositoryHtmlUrl":41,"repositoryHomepageUrl":6,"ownerHtmlUrl":42,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":43,"install":44,"resources":57},"01M6R2D57HQMSSRFN8HM5CF5Y8","performance-optimizer",null,"Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements.","Mishit18\u002Fclaude-code-templates","Mishit18","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F244127857?v=4","01M6QXBYKWM76HSKYDNWSKKE41","Mishit Sharma","01M6QXBYRJ0CAVM51S1RTEKTZZ",1,"MIT","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fperformance-optimizer\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30],"performance","performance optimizer","optimizer","safe","development","code","before and after","databases","community","fixes","prove","2026","2026-11-10 10:12:30",false,"---\nname: performance-optimizer\ndescription: \"Identifies and fixes performance bottlenecks in code, databases, and APIs. Measures before and after to prove improvements.\"\ncategory: development\nrisk: safe\nsource: community\ndate_added: \"2026-03-05\"\n---\n\n# Performance Optimizer\n\nFind and fix performance bottlenecks. Measure, optimize, verify. Make it fast.\n\n## When to Use This Skill\n\n- App is slow or laggy\n- User complains about performance\n- Page load times are high\n- API responses are slow\n- Database queries take too long\n- User mentions \"slow\", \"lag\", \"performance\", or \"optimize\"\n\n## The Optimization Process\n\n### 1. Measure First\n\nNever optimize without measuring:\n\n```javascript\n\u002F\u002F Measure execution time\nconsole.time('operation');\nawait slowOperation();\nconsole.timeEnd('operation'); \u002F\u002F operation: 2341ms\n```\n\n**What to measure:**\n- Page load time\n- API response time\n- Database query time\n- Function execution time\n- Memory usage\n- Network requests\n\n### 2. Find the Bottleneck\n\nUse profiling tools to find the slow parts:\n\n**Browser:**\n```\nDevTools → Performance tab → Record → Stop\nLook for long tasks (red bars)\n```\n\n**Node.js:**\n```bash\nnode --prof app.js\nnode --prof-process isolate-*.log > profile.txt\n```\n\n**Database:**\n```sql\nEXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';\n```\n\n### 3. Optimize\n\nFix the slowest thing first (biggest impact).\n\n## Common Optimizations\n\n### Database Queries\n\n**Problem: N+1 Queries**\n```javascript\n\u002F\u002F Bad: N+1 queries\nconst users = await db.users.find();\nfor (const user of users) {\n  user.posts = await db.posts.find({ userId: user.id }); \u002F\u002F N queries\n}\n\n\u002F\u002F Good: Single query with JOIN\nconst users = await db.users.find()\n  .populate('posts'); \u002F\u002F 1 query\n```\n\n**Problem: Missing Index**\n```sql\n-- Check slow query\nEXPLAIN SELECT * FROM users WHERE email = 'test@example.com';\n-- Shows: Seq Scan (bad)\n\n-- Add index\nCREATE INDEX idx_users_email ON users(email);\n\n-- Check again\nEXPLAIN SELECT * FROM users WHERE email = 'test@example.com';\n-- Shows: Index Scan (good)\n```\n\n**Problem: SELECT ***\n```javascript\n\u002F\u002F Bad: Fetches all columns\nconst users = await db.query('SELECT * FROM users');\n\n\u002F\u002F Good: Only needed columns\nconst users = await db.query('SELECT id, name, email FROM users');\n```\n\n**Problem: No Pagination**\n```javascript\n\u002F\u002F Bad: Returns all records\nconst users = await db.users.find();\n\n\u002F\u002F Good: Paginated\nconst users = await db.users.find()\n  .limit(20)\n  .skip((page - 1) * 20);\n```\n\n### API Performance\n\n**Problem: No Caching**\n```javascript\n\u002F\u002F Bad: Hits database every time\napp.get('\u002Fapi\u002Fstats', async (req, res) => {\n  const stats = await db.stats.calculate(); \u002F\u002F Slow\n  res.json(stats);\n});\n\n\u002F\u002F Good: Cache for 5 minutes\nconst cache = new Map();\napp.get('\u002Fapi\u002Fstats', async (req, res) => {\n  const cached = cache.get('stats');\n  if (cached && Date.now() - cached.time \u003C 300000) {\n    return res.json(cached.data);\n  }\n  \n  const stats = await db.stats.calculate();\n  cache.set('stats', { data: stats, time: Date.now() });\n  res.json(stats);\n});\n```\n\n**Problem: Sequential Operations**\n```javascript\n\u002F\u002F Bad: Sequential (slow)\nconst user = await getUser(id);\nconst posts = await getPosts(id);\nconst comments = await getComments(id);\n\u002F\u002F Total: 300ms + 200ms + 150ms = 650ms\n\n\u002F\u002F Good: Parallel (fast)\nconst [user, posts, comments] = await Promise.all([\n  getUser(id),\n  getPosts(id),\n  getComments(id)\n]);\n\u002F\u002F Total: max(300ms, 200ms, 150ms) = 300ms\n```\n\n**Problem: Large Payloads**\n```javascript\n\u002F\u002F Bad: Returns everything\nres.json(users); \u002F\u002F 5MB response\n\n\u002F\u002F Good: Only needed fields\nres.json(users.map(u => ({\n  id: u.id,\n  name: u.name,\n  email: u.email\n}))); \u002F\u002F 500KB response\n```\n\n### Frontend Performance\n\n**Problem: Unnecessary Re-renders**\n```javascript\n\u002F\u002F Bad: Re-renders on every parent update\nfunction UserList({ users }) {\n  return users.map(user => \u003CUserCard user={user} \u002F>);\n}\n\n\u002F\u002F Good: Memoized\nconst UserCard = React.memo(({ user }) => {\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n});\n```\n\n**Problem: Large Bundle**\n```javascript\n\u002F\u002F Bad: Imports entire library\nimport _ from 'lodash'; \u002F\u002F 70KB\n\n\u002F\u002F Good: Import only what you need\nimport debounce from 'lodash\u002Fdebounce'; \u002F\u002F 2KB\n```\n\n**Problem: No Code Splitting**\n```javascript\n\u002F\u002F Bad: Everything in one bundle\nimport HeavyComponent from '.\u002FHeavyComponent';\n\n\u002F\u002F Good: Lazy load\nconst HeavyComponent = React.lazy(() => import('.\u002FHeavyComponent'));\n```\n\n**Problem: Unoptimized Images**\n```html\n\u003C!-- Bad: Large image -->\n\u003Cimg src=\"photo.jpg\" \u002F> \u003C!-- 5MB -->\n\n\u003C!-- Good: Optimized and responsive -->\n\u003Cimg \n  src=\"photo-small.webp\" \n  srcset=\"photo-small.webp 400w, photo-large.webp 800w\"\n  loading=\"lazy\"\n  width=\"400\"\n  height=\"300\"\n\u002F> \u003C!-- 50KB -->\n```\n\n### Algorithm Optimization\n\n**Problem: Inefficient Algorithm**\n```javascript\n\u002F\u002F Bad: O(n²) - nested loops\nfunction findDuplicates(arr) {\n  const duplicates = [];\n  for (let i = 0; i \u003C arr.length; i++) {\n    for (let j = i + 1; j \u003C arr.length; j++) {\n      if (arr[i] === arr[j]) duplicates.push(arr[i]);\n    }\n  }\n  return duplicates;\n}\n\n\u002F\u002F Good: O(n) - single pass with Set\nfunction findDuplicates(arr) {\n  const seen = new Set();\n  const duplicates = new Set();\n  for (const item of arr) {\n    if (seen.has(item)) duplicates.add(item);\n    seen.add(item);\n  }\n  return Array.from(duplicates);\n}\n```\n\n**Problem: Repeated Calculations**\n```javascript\n\u002F\u002F Bad: Calculates every time\nfunction getTotal(items) {\n  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}\n\u002F\u002F Called 100 times in render\n\n\u002F\u002F Good: Memoized\nconst getTotal = useMemo(() => {\n  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}, [items]);\n```\n\n### Memory Optimization\n\n**Problem: Memory Leak**\n```javascript\n\u002F\u002F Bad: Event listener not cleaned up\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll);\n  \u002F\u002F Memory leak!\n}, []);\n\n\u002F\u002F Good: Cleanup\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll);\n  return () => window.removeEventListener('scroll', handleScroll);\n}, []);\n```\n\n**Problem: Large Data in Memory**\n```javascript\n\u002F\u002F Bad: Loads entire file into memory\nconst data = fs.readFileSync('huge-file.txt'); \u002F\u002F 1GB\n\n\u002F\u002F Good: Stream it\nconst stream = fs.createReadStream('huge-file.txt');\nstream.on('data', chunk => process(chunk));\n```\n\n## Measuring Impact\n\nAlways measure before and after:\n\n```javascript\n\u002F\u002F Before optimization\nconsole.time('query');\nconst users = await db.users.find();\nconsole.timeEnd('query');\n\u002F\u002F query: 2341ms\n\n\u002F\u002F After optimization (added index)\nconsole.time('query');\nconst users = await db.users.find();\nconsole.timeEnd('query');\n\u002F\u002F query: 23ms\n\n\u002F\u002F Improvement: 100x faster!\n```\n\n## Performance Budgets\n\nSet targets:\n\n```\nPage Load: \u003C 2 seconds\nAPI Response: \u003C 200ms\nDatabase Query: \u003C 50ms\nBundle Size: \u003C 200KB\nTime to Interactive: \u003C 3 seconds\n```\n\n## Tools\n\n**Browser:**\n- Chrome DevTools Performance tab\n- Lighthouse (audit)\n- Network tab (waterfall)\n\n**Node.js:**\n- `node --prof` (profiling)\n- `clinic` (diagnostics)\n- `autocannon` (load testing)\n\n**Database:**\n- `EXPLAIN ANALYZE` (query plans)\n- Slow query log\n- Database profiler\n\n**Monitoring:**\n- New Relic\n- Datadog\n- Sentry Performance\n\n## Quick Wins\n\nEasy optimizations with big impact:\n\n1. **Add database indexes** on frequently queried columns\n2. **Enable gzip compression** on server\n3. **Add caching** for expensive operations\n4. **Lazy load** images and heavy components\n5. **Use CDN** for static assets\n6. **Minify and compress** JavaScript\u002FCSS\n7. **Remove unused dependencies**\n8. **Use pagination** instead of loading all data\n9. **Optimize images** (WebP, proper sizing)\n10. **Enable HTTP\u002F2** on server\n\n## Optimization Checklist\n\n- [ ] Measured current performance\n- [ ] Identified bottleneck\n- [ ] Applied optimization\n- [ ] Measured improvement\n- [ ] Verified functionality still works\n- [ ] No new bugs introduced\n- [ ] Documented the change\n\n## When NOT to Optimize\n\n- Premature optimization (optimize when it's actually slow)\n- Micro-optimizations (save 1ms when page takes 5 seconds)\n- Readable code is more important than tiny speed gains\n- If it's already fast enough\n\n## Key Principles\n\n- Measure before optimizing\n- Fix the biggest bottleneck first\n- Measure after to prove improvement\n- Don't sacrifice readability for tiny gains\n- Profile in production-like environment\n- Consider the 80\u002F20 rule (20% of code causes 80% of slowness)\n\n## Related Skills\n\n- `@database-design` - Query optimization\n- `@codebase-audit-pre-push` - Code review\n- `@bug-hunter` - Debugging\n\n","# Performance Optimizer\n\nFind and fix performance bottlenecks. Measure, optimize, verify. Make it fast.\n\n## When to Use This Skill\n\n- App is slow or laggy\n- User complains about performance\n- Page load times are high\n- API responses are slow\n- Database queries take too long\n- User mentions \"slow\", \"lag\", \"performance\", or \"optimize\"\n\n## The Optimization Process\n\n### 1. Measure First\n\nNever optimize without measuring:\n\n```javascript\n\u002F\u002F Measure execution time\nconsole.time('operation');\nawait slowOperation();\nconsole.timeEnd('operation'); \u002F\u002F operation: 2341ms\n```\n\n**What to measure:**\n- Page load time\n- API response time\n- Database query time\n- Function execution time\n- Memory usage\n- Network requests\n\n### 2. Find the Bottleneck\n\nUse profiling tools to find the slow parts:\n\n**Browser:**\n```\nDevTools → Performance tab → Record → Stop\nLook for long tasks (red bars)\n```\n\n**Node.js:**\n```bash\nnode --prof app.js\nnode --prof-process isolate-*.log > profile.txt\n```\n\n**Database:**\n```sql\nEXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';\n```\n\n### 3. Optimize\n\nFix the slowest thing first (biggest impact).\n\n## Common Optimizations\n\n### Database Queries\n\n**Problem: N+1 Queries**\n```javascript\n\u002F\u002F Bad: N+1 queries\nconst users = await db.users.find();\nfor (const user of users) {\n  user.posts = await db.posts.find({ userId: user.id }); \u002F\u002F N queries\n}\n\n\u002F\u002F Good: Single query with JOIN\nconst users = await db.users.find()\n  .populate('posts'); \u002F\u002F 1 query\n```\n\n**Problem: Missing Index**\n```sql\n-- Check slow query\nEXPLAIN SELECT * FROM users WHERE email = 'test@example.com';\n-- Shows: Seq Scan (bad)\n\n-- Add index\nCREATE INDEX idx_users_email ON users(email);\n\n-- Check again\nEXPLAIN SELECT * FROM users WHERE email = 'test@example.com';\n-- Shows: Index Scan (good)\n```\n\n**Problem: SELECT ***\n```javascript\n\u002F\u002F Bad: Fetches all columns\nconst users = await db.query('SELECT * FROM users');\n\n\u002F\u002F Good: Only needed columns\nconst users = await db.query('SELECT id, name, email FROM users');\n```\n\n**Problem: No Pagination**\n```javascript\n\u002F\u002F Bad: Returns all records\nconst users = await db.users.find();\n\n\u002F\u002F Good: Paginated\nconst users = await db.users.find()\n  .limit(20)\n  .skip((page - 1) * 20);\n```\n\n### API Performance\n\n**Problem: No Caching**\n```javascript\n\u002F\u002F Bad: Hits database every time\napp.get('\u002Fapi\u002Fstats', async (req, res) => {\n  const stats = await db.stats.calculate(); \u002F\u002F Slow\n  res.json(stats);\n});\n\n\u002F\u002F Good: Cache for 5 minutes\nconst cache = new Map();\napp.get('\u002Fapi\u002Fstats', async (req, res) => {\n  const cached = cache.get('stats');\n  if (cached && Date.now() - cached.time \u003C 300000) {\n    return res.json(cached.data);\n  }\n  \n  const stats = await db.stats.calculate();\n  cache.set('stats', { data: stats, time: Date.now() });\n  res.json(stats);\n});\n```\n\n**Problem: Sequential Operations**\n```javascript\n\u002F\u002F Bad: Sequential (slow)\nconst user = await getUser(id);\nconst posts = await getPosts(id);\nconst comments = await getComments(id);\n\u002F\u002F Total: 300ms + 200ms + 150ms = 650ms\n\n\u002F\u002F Good: Parallel (fast)\nconst [user, posts, comments] = await Promise.all([\n  getUser(id),\n  getPosts(id),\n  getComments(id)\n]);\n\u002F\u002F Total: max(300ms, 200ms, 150ms) = 300ms\n```\n\n**Problem: Large Payloads**\n```javascript\n\u002F\u002F Bad: Returns everything\nres.json(users); \u002F\u002F 5MB response\n\n\u002F\u002F Good: Only needed fields\nres.json(users.map(u => ({\n  id: u.id,\n  name: u.name,\n  email: u.email\n}))); \u002F\u002F 500KB response\n```\n\n### Frontend Performance\n\n**Problem: Unnecessary Re-renders**\n```javascript\n\u002F\u002F Bad: Re-renders on every parent update\nfunction UserList({ users }) {\n  return users.map(user => \u003CUserCard user={user} \u002F>);\n}\n\n\u002F\u002F Good: Memoized\nconst UserCard = React.memo(({ user }) => {\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n});\n```\n\n**Problem: Large Bundle**\n```javascript\n\u002F\u002F Bad: Imports entire library\nimport _ from 'lodash'; \u002F\u002F 70KB\n\n\u002F\u002F Good: Import only what you need\nimport debounce from 'lodash\u002Fdebounce'; \u002F\u002F 2KB\n```\n\n**Problem: No Code Splitting**\n```javascript\n\u002F\u002F Bad: Everything in one bundle\nimport HeavyComponent from '.\u002FHeavyComponent';\n\n\u002F\u002F Good: Lazy load\nconst HeavyComponent = React.lazy(() => import('.\u002FHeavyComponent'));\n```\n\n**Problem: Unoptimized Images**\n```html\n\u003C!-- Bad: Large image -->\n\u003Cimg src=\"photo.jpg\" \u002F> \u003C!-- 5MB -->\n\n\u003C!-- Good: Optimized and responsive -->\n\u003Cimg \n  src=\"photo-small.webp\" \n  srcset=\"photo-small.webp 400w, photo-large.webp 800w\"\n  loading=\"lazy\"\n  width=\"400\"\n  height=\"300\"\n\u002F> \u003C!-- 50KB -->\n```\n\n### Algorithm Optimization\n\n**Problem: Inefficient Algorithm**\n```javascript\n\u002F\u002F Bad: O(n²) - nested loops\nfunction findDuplicates(arr) {\n  const duplicates = [];\n  for (let i = 0; i \u003C arr.length; i++) {\n    for (let j = i + 1; j \u003C arr.length; j++) {\n      if (arr[i] === arr[j]) duplicates.push(arr[i]);\n    }\n  }\n  return duplicates;\n}\n\n\u002F\u002F Good: O(n) - single pass with Set\nfunction findDuplicates(arr) {\n  const seen = new Set();\n  const duplicates = new Set();\n  for (const item of arr) {\n    if (seen.has(item)) duplicates.add(item);\n    seen.add(item);\n  }\n  return Array.from(duplicates);\n}\n```\n\n**Problem: Repeated Calculations**\n```javascript\n\u002F\u002F Bad: Calculates every time\nfunction getTotal(items) {\n  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}\n\u002F\u002F Called 100 times in render\n\n\u002F\u002F Good: Memoized\nconst getTotal = useMemo(() => {\n  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n}, [items]);\n```\n\n### Memory Optimization\n\n**Problem: Memory Leak**\n```javascript\n\u002F\u002F Bad: Event listener not cleaned up\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll);\n  \u002F\u002F Memory leak!\n}, []);\n\n\u002F\u002F Good: Cleanup\nuseEffect(() => {\n  window.addEventListener('scroll', handleScroll);\n  return () => window.removeEventListener('scroll', handleScroll);\n}, []);\n```\n\n**Problem: Large Data in Memory**\n```javascript\n\u002F\u002F Bad: Loads entire file into memory\nconst data = fs.readFileSync('huge-file.txt'); \u002F\u002F 1GB\n\n\u002F\u002F Good: Stream it\nconst stream = fs.createReadStream('huge-file.txt');\nstream.on('data', chunk => process(chunk));\n```\n\n## Measuring Impact\n\nAlways measure before and after:\n\n```javascript\n\u002F\u002F Before optimization\nconsole.time('query');\nconst users = await db.users.find();\nconsole.timeEnd('query');\n\u002F\u002F query: 2341ms\n\n\u002F\u002F After optimization (added index)\nconsole.time('query');\nconst users = await db.users.find();\nconsole.timeEnd('query');\n\u002F\u002F query: 23ms\n\n\u002F\u002F Improvement: 100x faster!\n```\n\n## Performance Budgets\n\nSet targets:\n\n```\nPage Load: \u003C 2 seconds\nAPI Response: \u003C 200ms\nDatabase Query: \u003C 50ms\nBundle Size: \u003C 200KB\nTime to Interactive: \u003C 3 seconds\n```\n\n## Tools\n\n**Browser:**\n- Chrome DevTools Performance tab\n- Lighthouse (audit)\n- Network tab (waterfall)\n\n**Node.js:**\n- `node --prof` (profiling)\n- `clinic` (diagnostics)\n- `autocannon` (load testing)\n\n**Database:**\n- `EXPLAIN ANALYZE` (query plans)\n- Slow query log\n- Database profiler\n\n**Monitoring:**\n- New Relic\n- Datadog\n- Sentry Performance\n\n## Quick Wins\n\nEasy optimizations with big impact:\n\n1. **Add database indexes** on frequently queried columns\n2. **Enable gzip compression** on server\n3. **Add caching** for expensive operations\n4. **Lazy load** images and heavy components\n5. **Use CDN** for static assets\n6. **Minify and compress** JavaScript\u002FCSS\n7. **Remove unused dependencies**\n8. **Use pagination** instead of loading all data\n9. **Optimize images** (WebP, proper sizing)\n10. **Enable HTTP\u002F2** on server\n\n## Optimization Checklist\n\n- [ ] Measured current performance\n- [ ] Identified bottleneck\n- [ ] Applied optimization\n- [ ] Measured improvement\n- [ ] Verified functionality still works\n- [ ] No new bugs introduced\n- [ ] Documented the change\n\n## When NOT to Optimize\n\n- Premature optimization (optimize when it's actually slow)\n- Micro-optimizations (save 1ms when page takes 5 seconds)\n- Readable code is more important than tiny speed gains\n- If it's already fast enough\n\n## Key Principles\n\n- Measure before optimizing\n- Fix the biggest bottleneck first\n- Measure after to prove improvement\n- Don't sacrifice readability for tiny gains\n- Profile in production-like environment\n- Consider the 80\u002F20 rule (20% of code causes 80% of slowness)\n\n## Related Skills\n\n- `@database-design` - Query optimization\n- `@codebase-audit-pre-push` - Code review\n- `@bug-hunter` - Debugging\n\n",{"name":5,"risk":22,"source":27,"category":23,"date_added":36,"description":7},"2026-03-05","main","015422534a7457348a313b6381f0255d3364eb8c","cli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fperformance-optimizer",0,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates","https:\u002F\u002Fgithub.com\u002FMishit18","2026-11-11 17:58:24",{"source":8,"skillName":5,"commands":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add Mishit18\u002Fclaude-code-templates --skill performance-optimizer",{"tool":50,"command":51},"bunx","bunx skills add Mishit18\u002Fclaude-code-templates --skill performance-optimizer",{"tool":53,"command":54},"pnpm","pnpm dlx skills add Mishit18\u002Fclaude-code-templates --skill performance-optimizer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fperformance-optimizer\u002FSKILL.md",true,[58],{"path":59,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":62,"sourceHtmlUrl":63},"README.md","REFERENCE","参考文档",466,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fperformance-optimizer\u002FREADME.md",[65,99,125,153,180,205],{"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":69,"licenseFileUrl":70,"sourceHtmlUrl":71,"categories":72,"keywords":78,"publishedAt":31},"01M6R4ARN4W2VZRDERDTMN1KP0","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.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[73],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","components","react","routing","state management","state","file","Tailwind","use","single-file","ui components","multi","for","single",{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":69,"licenseFileUrl":103,"sourceHtmlUrl":104,"categories":105,"keywords":110,"publishedAt":31},"01M6R45GXREM5DP8T08MAC788H","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.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[106,109],{"categoryNo":107,"categoryName":108,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},[111,112,113,84,114,115,80,116,117,118,119,120,121,122,123,124,97],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","ui","logs","applications","behavior","local","with",{"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":129,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":31},"01M6R2GYJ470X8EB7R58V0B68K","think-tank","Run a Virtual Think Tank — a structured multi-persona debate — before planning or making architectural\u002Fdesign\u002Fstrategic decisions. Use this skill whenever the user is about to plan a system, make a technology choice, evaluate trade-offs, decide on an approach, or faces any decision where multiple perspectives would sharpen the outcome. Also trigger when the user says \"think tank\", \"debate this\", \"perspectives on\", \"trade-offs\", \"should I use X or Y\", \"help me decide\", \"before we plan\", or asks for pros\u002Fcons of competing approaches. This skill should run BEFORE any implementation planning begins — it produces a structured analysis that feeds into better plans.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FSKILL.md",[],[133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152],"think tank","think","design","run","feeds","analysis","persona","plan","sharpen","virtual","decision","choice","decide","perspectives","outcome","me","debate","make","trade-offs","when",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":69,"licenseFileUrl":157,"sourceHtmlUrl":158,"categories":159,"keywords":163,"publishedAt":31},"01M6R2FSR55AVRFA9YZ8SC2GZG","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[160],{"categoryNo":161,"categoryName":162,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000023","Skill与智能体开发",[164,165,166,167,168,169,170,171,172,173,174,175,176,177,124,97,178,152,179],"skill creator","creator","workflows","create","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":186,"publishedAt":31},"01M6R2FK42ZZ4HJTJVVK9WJBBP","ship-learn-next","Transform learning content (like YouTube transcripts, articles, tutorials) into actionable implementation plans using the Ship-Learn-Next framework. Use when user wants to turn advice, lessons, or educational content into concrete action steps, reps, or a learning quest.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fship-learn-next\u002FSKILL.md",[],[187,188,189,190,191,192,193,194,93,195,196,197,198,199,200,201,202,203,204,152],"learn","ship learn next","ship","next","framework","learning","read","write","advice","implementation","youtube","plans","quest","transform","actionable","action","lessons","youtube transcripts",{"skillNo":206,"name":207,"nameZh":6,"description":208,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":69,"licenseFileUrl":209,"sourceHtmlUrl":210,"categories":211,"keywords":218,"publishedAt":31},"01M6R2088G1RHDA5MDX16HASRB","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[212,215],{"categoryNo":213,"categoryName":214,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":216,"categoryName":217,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000016","图像与多媒体",[219,220,221,165,222,223,224,225,170,93,148,177,150,226,227,97,228,152],"slack gif creator","slack","gif","validation","Tools","constraints","Animation","Utilities","concepts","request"]