[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CBA9ZFX4TAEKASJ5HMPW4A":3,"skill-same:01M6CBA9ZFX4TAEKASJ5HMPW4A":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":23,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M6CBA9ZFX4TAEKASJ5HMPW4A","react-next",null,"React and Next.js frontend best practices with TypeScript and accessibility","shahboura\u002Fagents-opencode","shahboura","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F210767?v=4","01M6C6WKTBT0NH92BEPQRHQSYM","Shehab El Hadidy","01M6C6WKYXG8AE68MCGBNE5ZFR",2,"MIT","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Freact-next\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33],"react","react next","frontend","typescript","accessibility","development","best practices","Next.js","js","opencode","2026-11-10 10:12:30",false,"---\nname: react-next\ndescription: React and Next.js frontend best practices with TypeScript and accessibility\nlicense: MIT\ncompatibility: opencode\nmetadata:\n  author: shahboura\n  version: \"2.0.0\"\n  audience: developers\n  workflow: development\n---\n\n## What I do\n- Enforce TypeScript strict mode and component architecture standards\n- Apply accessibility, performance, and data-fetching best practices\n- Guide testing strategy with behavior-focused patterns\n\n## When to use me\nUse this when building or maintaining React or Next.js frontend applications.\n\n## Key Rules\n- TypeScript strict mode required — no implicit `any`, strict null checks enabled\n- Function components and hooks only — no legacy class components\n- Keep components small and presentational; lift state up; prefer derived state over duplicates\n- Use stable keys — never use array index as key for dynamic lists\n- Apply `useMemo` and `useCallback` judiciously — only for genuinely expensive computations\n- Prefer server components or loaders over `useEffect` for data fetching in Next.js\n- Use React Query or SWR for client-side caching; handle loading, error, and empty states explicitly\n- Provide labels, aria attributes, and keyboard navigation on all interactive elements\n- Use semantic HTML elements — prefer native controls over styled divs\n- Maintain color contrast; respect `prefers-reduced-motion` for animations\n- Test with React Testing Library — test user behavior, not implementation details\n- Mock network calls in tests; never hit real backends in unit tests\n- Use Next\u002FImage or CDN for images; apply code-splitting with dynamic imports for heavy modules\n- Keep styling consistent (CSS modules, Tailwind, or chosen system) — no mixed ad hoc patterns\n- Use a verify-fix-verify loop: run the validation commands below, fix any failures, and rerun until all checks pass\n\n## Validation Commands\n```bash\nnpm ci\nnpm run lint\nnpm test\nnpm run build\n```\n","## What I do\n- Enforce TypeScript strict mode and component architecture standards\n- Apply accessibility, performance, and data-fetching best practices\n- Guide testing strategy with behavior-focused patterns\n\n## When to use me\nUse this when building or maintaining React or Next.js frontend applications.\n\n## Key Rules\n- TypeScript strict mode required — no implicit `any`, strict null checks enabled\n- Function components and hooks only — no legacy class components\n- Keep components small and presentational; lift state up; prefer derived state over duplicates\n- Use stable keys — never use array index as key for dynamic lists\n- Apply `useMemo` and `useCallback` judiciously — only for genuinely expensive computations\n- Prefer server components or loaders over `useEffect` for data fetching in Next.js\n- Use React Query or SWR for client-side caching; handle loading, error, and empty states explicitly\n- Provide labels, aria attributes, and keyboard navigation on all interactive elements\n- Use semantic HTML elements — prefer native controls over styled divs\n- Maintain color contrast; respect `prefers-reduced-motion` for animations\n- Test with React Testing Library — test user behavior, not implementation details\n- Mock network calls in tests; never hit real backends in unit tests\n- Use Next\u002FImage or CDN for images; apply code-splitting with dynamic imports for heavy modules\n- Keep styling consistent (CSS modules, Tailwind, or chosen system) — no mixed ad hoc patterns\n- Use a verify-fix-verify loop: run the validation commands below, fix any failures, and rerun until all checks pass\n\n## Validation Commands\n```bash\nnpm ci\nnpm run lint\nnpm test\nnpm run build\n```\n",{"name":5,"license":15,"metadata":39,"description":7,"compatibility":33},{"author":9,"version":40,"audience":41,"workflow":29},"2.0.0","developers","main","9b951b5b2e5d07d427baff330db5deb2a8c67511",".opencode\u002Fskills\u002Freact-next",0,"https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode","https:\u002F\u002Fagnts.elkodr.com\u002F","https:\u002F\u002Fgithub.com\u002Fshahboura","2026-11-05 13:30:42",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add shahboura\u002Fagents-opencode --skill react-next",{"tool":56,"command":57},"bunx","bunx skills add shahboura\u002Fagents-opencode --skill react-next",{"tool":59,"command":60},"pnpm","pnpm dlx skills add shahboura\u002Fagents-opencode --skill react-next","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Freact-next\u002FSKILL.md",true,[],[65,71,80,85,90,95],{"skillNo":66,"name":67,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":34},"01M6CBBX1C6NV7VY8XK21DV5FW","python","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fvalidate-agents\u002Fvalid\u002F.opencode\u002Fskills\u002Fpython\u002FSKILL.md",[],[67],{"skillNo":72,"name":73,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":34},"01M6CBBVB7W6ABJH8XP3Z8PPMK","docs-validation","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fvalidate-agents\u002Fvalid\u002F.opencode\u002Fskills\u002Fdocs-validation\u002FSKILL.md",[],[77,78,79],"docs","validation","docs validation",{"skillNo":81,"name":67,"nameZh":6,"description":6,"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":84,"publishedAt":34},"01M6CBBT2WC781609MH5RN7KM7","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fvalidate-agents\u002Funknown-skill\u002F.opencode\u002Fskills\u002Fpython\u002FSKILL.md",[],[67],{"skillNo":86,"name":73,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":34},"01M6CBBRNY6TDRZ5627GC8436D","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fvalidate-agents\u002Funknown-skill\u002F.opencode\u002Fskills\u002Fdocs-validation\u002FSKILL.md",[],[77,78,79],{"skillNo":91,"name":67,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":34},"01M6CBBQDS170GBYA1CVW3DC5D","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fvalidate-agents\u002Finline-skill\u002F.opencode\u002Fskills\u002Fpython\u002FSKILL.md",[],[67],{"skillNo":96,"name":73,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":34},"01M6CBBP222WAW802YHY37F48A","https:\u002F\u002Fgithub.com\u002Fshahboura\u002Fagents-opencode\u002Fblob\u002Fmain\u002Fscripts\u002Ffixtures\u002Fvalidate-agents\u002Finline-skill\u002F.opencode\u002Fskills\u002Fdocs-validation\u002FSKILL.md",[],[77,78,79]]