[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71FRPTFH7PM95E7K5HH4QAX":3,"skill-same:01M71FRPTFH7PM95E7K5HH4QAX":136},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":62,"repositoryHtmlUrl":63,"repositoryHomepageUrl":6,"ownerHtmlUrl":64,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":65,"install":66,"resources":79},"01M71FRPTFH7PM95E7K5HH4QAX","frontend-developer-skill",null,"Comprehensive frontend development specialist for building modern web applications with React, Vue, Angular, and modern tooling including state management, testing, and performance optimization","JSGforever\u002Fskillguard","JSGforever","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F85541948?v=4","01M71FQD3E132VMR5F4TAYX3YS","01M71FQD4DYW0XJ4XQ4YQH75Y9",2,"GPL-3.0","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"frontend","developer","frontend developer","frontend developer skill","tooling","performance optimization","web","state management","state","with","applications","Optimization","for","development","vue","frontend development","react","angular","testing","performance","2026-11-10 10:12:30",false,"---\nname: frontend-developer-skill\ndescription: Comprehensive frontend development specialist for building modern web applications with React, Vue, Angular, and modern tooling including state management, testing, and performance optimization\n---\n\n# Frontend Developer Skill\n\n## Purpose\n\nProvides complete frontend development expertise for building production-ready web applications with modern frameworks (React, Vue, Next.js), comprehensive tooling setup, state management patterns, testing infrastructure, and performance optimization strategies.\n\n## When to Use\n\n- Building new React, Vue, or Angular applications from scratch\n- Setting up modern frontend tooling (Vite, ESLint, Prettier, testing frameworks)\n- Implementing state management with Redux Toolkit, Zustand, or Context API\n- Configuring authentication flows with token management and protected routes\n- Optimizing bundle size and performance for production deployments\n- Creating component libraries and design systems\n- Setting up comprehensive testing (unit, integration, E2E)\n\n## Quick Start\n\n**Invoke this skill when:**\n- Building React, Vue, or Angular applications\n- Setting up frontend tooling (Vite, ESLint, Prettier)\n- Implementing state management (Redux Toolkit, Zustand, Context)\n- Configuring authentication flows\n- Optimizing bundle size and performance\n- Setting up testing (Vitest, Jest, Playwright)\n\n**Do NOT invoke when:**\n- Only backend API needed → Use backend-developer\n- Database optimization → Use database-optimizer\n- DevOps\u002Fdeployment only → Use devops-engineer\n- UI\u002FUX design without code → Use ui-designer\n\n## Decision Framework\n\n### Framework Selection\n\n```\nFrontend Framework Selection\n├─ New Project (greenfield)\n│   ├─ Needs SEO + server-side rendering\n│   │   ├─ Team knows React → Next.js 14+\n│   │   ├─ Team knows Vue → Nuxt.js 3+\n│   │   └─ Team flexible → Next.js (ecosystem advantage)\n│   │\n│   ├─ SPA without SSR requirements\n│   │   ├─ React experience → React 18+ (Vite)\n│   │   ├─ Vue experience → Vue 3 (Vite)\n│   │   └─ Enterprise\u002Fcomplex forms → Angular 15+\n│   │\n│   └─ Static site (blog, docs)\n│       └─ Astro, Next.js SSG, or Vite + React\n│\n└─ Existing Project\n    └─ Continue with existing framework (consistency)\n```\n\n### State Management Selection\n\n| Scenario | Library | Bundle Size | Use Case |\n|----------|---------|-------------|----------|\n| Simple local state | useState, useReducer | 0 KB | Component-level state |\n| Shared state (2-3 components) | Context API | 0 KB | Theme, auth, simple global |\n| Medium app (\u003C10 slices) | Zustand | ~1 KB | Most apps, good DX |\n| Large app (10+ slices) | Redux Toolkit | ~11 KB | Enterprise, time-travel debug |\n| Server state | TanStack Query | ~12 KB | API data, caching |\n\n### Styling Approach\n\n```\nStyling Decision\n├─ Rapid prototyping → Tailwind CSS\n├─ Component library → Radix UI + Tailwind\n├─ Dynamic theming → CSS-in-JS (Styled Components, Emotion)\n├─ Large team → CSS Modules or Tailwind + Design Tokens\n└─ Performance-critical → Plain CSS \u002F SCSS\n```\n\n## Best Practices\n\n1. **Use functional components** - Modern React pattern\n2. **Leverage hooks** - Avoid class components when possible\n3. **Memoize expensive operations** - Use useMemo, useCallback\n4. **Lazy load components** - Reduce initial bundle size\n5. **Type everything** - Leverage TypeScript\n6. **Test thoroughly** - Unit, integration, and E2E tests\n7. **Optimize images** - Use modern formats and lazy loading\n8. **Implement error boundaries** - Catch errors gracefully\n9. **Make it accessible** - ARIA labels, keyboard navigation\n10. **Monitor performance** - Track Core Web Vitals\n\n## Common Patterns\n\n### Custom Hooks\n\n```typescript\nfunction useFetch\u003CT>(url: string) {\n  const [data, setData] = useState\u003CT | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState\u003Cstring | null>(null);\n\n  useEffect(() => {\n    fetch(url)\n      .then(res => res.json())\n      .then(setData)\n      .catch(setError)\n      .finally(() => setLoading(false));\n  }, [url]);\n\n  return { data, loading, error };\n}\n```\n\n### Container\u002FPresentational\n\n```typescript\n\u002F\u002F Presentational (dumb)\nconst UserList = ({ users, onUserClick }: UserListProps) => (\n  \u003Cul>\n    {users.map(user => (\n      \u003Cli key={user.id} onClick={() => onUserClick(user.id)}>\n        {user.name}\n      \u003C\u002Fli>\n    ))}\n  \u003C\u002Ful>\n);\n\n\u002F\u002F Container (smart)\nconst UserListContainer = () => {\n  const { users, fetchUsers } = useUsers();\n  useEffect(() => fetchUsers(), [fetchUsers]);\n  return \u003CUserList users={users} onUserClick={handleClick} \u002F>;\n};\n```\n\n## Troubleshooting\n\n### Common Issues\n\n**State not updating**\n- Check if using correct setter\n- Verify dependency arrays in useEffect\n- Ensure components are re-rendering\n\n**Component not re-rendering**\n- Check for unnecessary re-renders\n- Verify memoization is working\n- Review prop changes\n\n**Performance issues**\n- Profile with React DevTools\n- Check for large bundle sizes\n- Review unnecessary re-renders\n- Implement code splitting\n\n**Tests failing**\n- Verify test setup\n- Check mock implementations\n- Review async handling\n- Ensure proper cleanup\n\n## Quality Checklist\n\n### Architecture\n- [ ] Framework choice justified\n- [ ] State management clear (server vs client state separated)\n- [ ] Component structure logical\n- [ ] Code splitting implemented\n\n### Code Quality\n- [ ] TypeScript strict mode enabled\n- [ ] ESLint + Prettier configured\n- [ ] Tests exist for critical paths\n- [ ] No prop drilling (use state management)\n\n### Performance\n- [ ] Bundle size optimized (\u003C200KB gzipped)\n- [ ] Expensive operations memoized\n- [ ] Images optimized (lazy loading, WebP)\n- [ ] Third-party libraries evaluated\n\n### Testing\n- [ ] Testing framework configured\n- [ ] Critical paths tested\n- [ ] E2E tests exist\n\n### Security\n- [ ] Environment variables secured\n- [ ] Input sanitization\n- [ ] Auth tokens secure\n- [ ] Dependencies audited\n\n## Integration Patterns\n\n### react-specialist\n- **Handoff:** frontend-developer sets up tooling → react-specialist implements complex component logic\n- **Tools:** Both use React; frontend-developer handles ecosystem tooling\n\n### nextjs-developer\n- **Handoff:** When SSR\u002FSEO required → hand off for Next.js-specific features\n- **Tools:** frontend-developer uses Vite\u002FCRA; nextjs-developer uses Next.js App Router\n\n### backend-developer\n- **Handoff:** frontend-developer implements API client → backend-developer provides API contracts\n- **Tools:** frontend-developer uses Axios\u002FFetch, TanStack Query\n\n### frontend-ui-ux-engineer\n- **Handoff:** frontend-developer sets up component structure → frontend-ui-ux-engineer styles\n- **Tools:** Both use React; frontend-ui-ux-engineer adds Framer Motion, Tailwind design tokens\n\n## Additional Resources\n\n- **Detailed Technical Reference**: See [REFERENCE.md](REFERENCE.md)\n- **Code Examples & Patterns**: See [EXAMPLES.md](EXAMPLES.md)\n","# Frontend Developer Skill\n\n## Purpose\n\nProvides complete frontend development expertise for building production-ready web applications with modern frameworks (React, Vue, Next.js), comprehensive tooling setup, state management patterns, testing infrastructure, and performance optimization strategies.\n\n## When to Use\n\n- Building new React, Vue, or Angular applications from scratch\n- Setting up modern frontend tooling (Vite, ESLint, Prettier, testing frameworks)\n- Implementing state management with Redux Toolkit, Zustand, or Context API\n- Configuring authentication flows with token management and protected routes\n- Optimizing bundle size and performance for production deployments\n- Creating component libraries and design systems\n- Setting up comprehensive testing (unit, integration, E2E)\n\n## Quick Start\n\n**Invoke this skill when:**\n- Building React, Vue, or Angular applications\n- Setting up frontend tooling (Vite, ESLint, Prettier)\n- Implementing state management (Redux Toolkit, Zustand, Context)\n- Configuring authentication flows\n- Optimizing bundle size and performance\n- Setting up testing (Vitest, Jest, Playwright)\n\n**Do NOT invoke when:**\n- Only backend API needed → Use backend-developer\n- Database optimization → Use database-optimizer\n- DevOps\u002Fdeployment only → Use devops-engineer\n- UI\u002FUX design without code → Use ui-designer\n\n## Decision Framework\n\n### Framework Selection\n\n```\nFrontend Framework Selection\n├─ New Project (greenfield)\n│   ├─ Needs SEO + server-side rendering\n│   │   ├─ Team knows React → Next.js 14+\n│   │   ├─ Team knows Vue → Nuxt.js 3+\n│   │   └─ Team flexible → Next.js (ecosystem advantage)\n│   │\n│   ├─ SPA without SSR requirements\n│   │   ├─ React experience → React 18+ (Vite)\n│   │   ├─ Vue experience → Vue 3 (Vite)\n│   │   └─ Enterprise\u002Fcomplex forms → Angular 15+\n│   │\n│   └─ Static site (blog, docs)\n│       └─ Astro, Next.js SSG, or Vite + React\n│\n└─ Existing Project\n    └─ Continue with existing framework (consistency)\n```\n\n### State Management Selection\n\n| Scenario | Library | Bundle Size | Use Case |\n|----------|---------|-------------|----------|\n| Simple local state | useState, useReducer | 0 KB | Component-level state |\n| Shared state (2-3 components) | Context API | 0 KB | Theme, auth, simple global |\n| Medium app (\u003C10 slices) | Zustand | ~1 KB | Most apps, good DX |\n| Large app (10+ slices) | Redux Toolkit | ~11 KB | Enterprise, time-travel debug |\n| Server state | TanStack Query | ~12 KB | API data, caching |\n\n### Styling Approach\n\n```\nStyling Decision\n├─ Rapid prototyping → Tailwind CSS\n├─ Component library → Radix UI + Tailwind\n├─ Dynamic theming → CSS-in-JS (Styled Components, Emotion)\n├─ Large team → CSS Modules or Tailwind + Design Tokens\n└─ Performance-critical → Plain CSS \u002F SCSS\n```\n\n## Best Practices\n\n1. **Use functional components** - Modern React pattern\n2. **Leverage hooks** - Avoid class components when possible\n3. **Memoize expensive operations** - Use useMemo, useCallback\n4. **Lazy load components** - Reduce initial bundle size\n5. **Type everything** - Leverage TypeScript\n6. **Test thoroughly** - Unit, integration, and E2E tests\n7. **Optimize images** - Use modern formats and lazy loading\n8. **Implement error boundaries** - Catch errors gracefully\n9. **Make it accessible** - ARIA labels, keyboard navigation\n10. **Monitor performance** - Track Core Web Vitals\n\n## Common Patterns\n\n### Custom Hooks\n\n```typescript\nfunction useFetch\u003CT>(url: string) {\n  const [data, setData] = useState\u003CT | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState\u003Cstring | null>(null);\n\n  useEffect(() => {\n    fetch(url)\n      .then(res => res.json())\n      .then(setData)\n      .catch(setError)\n      .finally(() => setLoading(false));\n  }, [url]);\n\n  return { data, loading, error };\n}\n```\n\n### Container\u002FPresentational\n\n```typescript\n\u002F\u002F Presentational (dumb)\nconst UserList = ({ users, onUserClick }: UserListProps) => (\n  \u003Cul>\n    {users.map(user => (\n      \u003Cli key={user.id} onClick={() => onUserClick(user.id)}>\n        {user.name}\n      \u003C\u002Fli>\n    ))}\n  \u003C\u002Ful>\n);\n\n\u002F\u002F Container (smart)\nconst UserListContainer = () => {\n  const { users, fetchUsers } = useUsers();\n  useEffect(() => fetchUsers(), [fetchUsers]);\n  return \u003CUserList users={users} onUserClick={handleClick} \u002F>;\n};\n```\n\n## Troubleshooting\n\n### Common Issues\n\n**State not updating**\n- Check if using correct setter\n- Verify dependency arrays in useEffect\n- Ensure components are re-rendering\n\n**Component not re-rendering**\n- Check for unnecessary re-renders\n- Verify memoization is working\n- Review prop changes\n\n**Performance issues**\n- Profile with React DevTools\n- Check for large bundle sizes\n- Review unnecessary re-renders\n- Implement code splitting\n\n**Tests failing**\n- Verify test setup\n- Check mock implementations\n- Review async handling\n- Ensure proper cleanup\n\n## Quality Checklist\n\n### Architecture\n- [ ] Framework choice justified\n- [ ] State management clear (server vs client state separated)\n- [ ] Component structure logical\n- [ ] Code splitting implemented\n\n### Code Quality\n- [ ] TypeScript strict mode enabled\n- [ ] ESLint + Prettier configured\n- [ ] Tests exist for critical paths\n- [ ] No prop drilling (use state management)\n\n### Performance\n- [ ] Bundle size optimized (\u003C200KB gzipped)\n- [ ] Expensive operations memoized\n- [ ] Images optimized (lazy loading, WebP)\n- [ ] Third-party libraries evaluated\n\n### Testing\n- [ ] Testing framework configured\n- [ ] Critical paths tested\n- [ ] E2E tests exist\n\n### Security\n- [ ] Environment variables secured\n- [ ] Input sanitization\n- [ ] Auth tokens secure\n- [ ] Dependencies audited\n\n## Integration Patterns\n\n### react-specialist\n- **Handoff:** frontend-developer sets up tooling → react-specialist implements complex component logic\n- **Tools:** Both use React; frontend-developer handles ecosystem tooling\n\n### nextjs-developer\n- **Handoff:** When SSR\u002FSEO required → hand off for Next.js-specific features\n- **Tools:** frontend-developer uses Vite\u002FCRA; nextjs-developer uses Next.js App Router\n\n### backend-developer\n- **Handoff:** frontend-developer implements API client → backend-developer provides API contracts\n- **Tools:** frontend-developer uses Axios\u002FFetch, TanStack Query\n\n### frontend-ui-ux-engineer\n- **Handoff:** frontend-developer sets up component structure → frontend-ui-ux-engineer styles\n- **Tools:** Both use React; frontend-ui-ux-engineer adds Framer Motion, Tailwind design tokens\n\n## Additional Resources\n\n- **Detailed Technical Reference**: See [REFERENCE.md](REFERENCE.md)\n- **Code Examples & Patterns**: See [EXAMPLES.md](EXAMPLES.md)\n",{"name":5,"description":7},"main","f2ec4b3b9133d34eeaf9b38e4b0a97e8e5705a7f","benchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill",0,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard","https:\u002F\u002Fgithub.com\u002FJSGforever","2026-08-29 18:27:56",{"source":8,"skillName":5,"commands":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add JSGforever\u002Fskillguard --skill frontend-developer-skill",{"tool":72,"command":73},"bunx","bunx skills add JSGforever\u002Fskillguard --skill frontend-developer-skill",{"tool":75,"command":76},"pnpm","pnpm dlx skills add JSGforever\u002Fskillguard --skill frontend-developer-skill","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002FSKILL.md",true,[80,86,90,94,98,102,108,112,116,120,124,128,132],{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":85},"EXAMPLES.md","REFERENCE","参考文档",10689,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002FEXAMPLES.md",{"path":87,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":88,"sourceHtmlUrl":89},"REFERENCE.md",6486,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002FREFERENCE.md",{"path":91,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fperformance_guide.md",10433,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Freferences\u002Fperformance_guide.md",{"path":95,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Freact_patterns.md",12370,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Freferences\u002Freact_patterns.md",{"path":99,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fstate_management.md",10678,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Freferences\u002Fstate_management.md",{"path":103,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":106,"sourceHtmlUrl":107},"scripts\u002Fcreate_api_client.ts","SCRIPT","脚本",7550,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fcreate_api_client.ts",{"path":109,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":110,"sourceHtmlUrl":111},"scripts\u002Fcreate_utils.ts",9897,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fcreate_utils.ts",{"path":113,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":114,"sourceHtmlUrl":115},"scripts\u002Fdeploy.sh",2790,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fdeploy.sh",{"path":117,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":118,"sourceHtmlUrl":119},"scripts\u002Foptimize_build.ts",3675,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Foptimize_build.ts",{"path":121,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":122,"sourceHtmlUrl":123},"scripts\u002Fscaffold_component.tsx",8310,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fscaffold_component.tsx",{"path":125,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":126,"sourceHtmlUrl":127},"scripts\u002Fsetup_linting.ts",3269,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fsetup_linting.ts",{"path":129,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":130,"sourceHtmlUrl":131},"scripts\u002Fsetup_state.ts",13568,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fsetup_state.ts",{"path":133,"resourceType":104,"resourceTypeDesc":105,"sizeBytes":134,"sourceHtmlUrl":135},"scripts\u002Fsetup_testing.ts",4882,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__404kidwiz--frontend-developer-skill\u002Fscripts\u002Fsetup_testing.ts",[137,165,179,204,224,245],{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":144,"publishedAt":54},"01M71HY2SNXBA9Q00WZDTZQ31Z","skillguard-codex-scanner","Hybrid deterministic+LLM agent-skill security scanner. Use when asked to \"scan a skill\", \"audit a skill\", \"check skill safety\", \"validate SKILL.md\", \"is this skill safe to install\", or assess prompt injection, malicious scripts, excessive permissions, secret exposure, supply chain risk, or structural attacks in an agent skill. Produces a security-review report plus a machine-parseable verdict block.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fsrc\u002Fskillguard\u002Fstatic_scanner\u002Fskillguard-codex-scanner\u002FSKILL.md",[143],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164],"scanner","skillguard codex scanner","skillguard","codex","chain","skill security","security-review","review report","structural","secret","prompt injection","security scanner","when","review","malicious","permissions","exposure","audit","scripts","safe",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":169,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":175,"publishedAt":54},"01M71HY0SPKTT3S27BC2HPAC5M","data-exfiltrator","Analyzes data files","MIT","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Fsmoke-one-skill\u002Fasset1__cisco-ai-defense--data-exfiltrator\u002FSKILL.md",[172],{"categoryNo":173,"categoryName":174,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000033","数据分析师",[176,177,178],"data","data exfiltrator","files",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":185,"publishedAt":54},"01M71HXVS9EMN44BGDW215FZ72","real-time-collaboration-engine","Build real-time collaborative editing with WebSockets, OT\u002FCRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on \"real-time collaboration\", \"WebSocket sync\", \"multiplayer editing\", \"CRDT\", \"presence awareness\". NOT for simple chat, request-response APIs, or single-user apps.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--real-time-collaboration-engine\u002FSKILL.md",[],[186,187,188,189,190,191,192,193,194,53,195,196,197,198,199,200,201,202,50,203],"time","real time collaboration engine","real time collaboration","collaboration","engine","real time","Video","reliability","video editing","conflict resolution","presence","access","apps","updates","Bash","activate","optimizer","streaming",{"skillNo":205,"name":206,"nameZh":6,"description":207,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":208,"categories":209,"keywords":211,"publishedAt":54},"01M71HXP6CTY4KFN0QVMMN0V7J","react-performance-optimizer","Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on \"React performance\", \"slow render\", \"useMemo\", \"bundle size\", \"virtualization\". NOT for backend optimization, non-React frameworks, or premature optimization.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002FSKILL.md",[210],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[53,212,202,50,213,214,215,216,217,218,186,219,220,198,200,221,201,203,222,223],"react performance optimizer","react performance","performance optimizer","app","nextjs","expert","re","render","2025","code","router","strategies",{"skillNo":225,"name":226,"nameZh":6,"description":227,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":228,"categories":229,"keywords":231,"publishedAt":54},"01M71HXH7QXSQB4QTDZ7SP7YXQ","llm-streaming-response-handler","Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI\u002FAnthropic\u002FClaude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on \"LLM streaming\", \"SSE\", \"token stream\", \"chat UI\", \"real-time AI\". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--llm-streaming-response-handler\u002FSKILL.md",[230],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[232,203,233,234,235,236,53,186,237,238,239,200,201,202,240,50,241,242,243,244],"llm streaming response handler","handler","error","processing","retry","chat ui","error recovery","critical","batch","display","text","server","read",{"skillNo":246,"name":247,"nameZh":6,"description":248,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":249,"categories":250,"keywords":256,"publishedAt":54},"01M71HXCB0E1YRKYW1Y8T0Y106","github-actions-pipeline-builder","Build production CI\u002FCD pipelines with GitHub Actions. Implements matrix builds, caching, deployments, testing, security scanning. Use for automated testing, deployments, release workflows. Activate on \"GitHub Actions\", \"CI\u002FCD\", \"workflow\", \"deployment pipeline\", \"automated testing\". NOT for Jenkins\u002FCircleCI, manual deployments, or non-GitHub repositories.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--github-actions-pipeline-builder\u002FSKILL.md",[251,252,255],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":253,"categoryName":254,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[257,258,259,260,261,262,263,193,217,52,264,265,201,223,266,244,267,268,269,270],"github actions pipeline builder","actions","github actions","pipeline builder","github","builder","pipeline","ci","workflows","run","release","write","edit","git"]