القائمة
Frontend React production — component patterns, custom hooks, data fetching, bundle optimization. Core Web Vitals, 90+ Lighthouse.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Game art principles — art style, color theory, animation principles, asset pipeline
Game design principles — core loop, GDD, player psychology, difficulty balancing, progression
Orchestrator game — route to implementation skill (pxhopencode) + principle-based sub-skill (agent-skills-hub)
Mobile game principles — touch input, battery, thermal, app stores, monetization
Multiplayer game principles — networking architecture, synchronization, security, matchmaking
| name | webs-frontend |
| description | Frontend React production — component patterns, custom hooks, data fetching, bundle optimization. Core Web Vitals, 90+ Lighthouse. |
Components > 200 lines are a smell. Custom hooks without tests will break in production.
KHÔNG BAO GIỜ fetch data trực tiếp trong component — use hook hoặc query client
Mọi component route phải lazy-load
Polymorphic Box + Compound Tabs pattern.
→ templates/component-patterns.tsx
useAsync — abort controller, chống memory leak.useDebounce — 300ms default delay.useLocalStorage — JSON parse/stringify, try/catch an toàn.
→ templates/custom-hooks.tsCấu hình queryClient: staleTime 5m, gcTime 30m, retry 2. Dùng
keepPreviousDatacho pagination,invalidateQueriessau mutation. →templates/data-fetching.ts
React.lazy() cho route và heavy library. Import tree-shaking friendly (date-fns). Tailwind purge mặc định.
→ templates/bundle-optimization.ts
| Excuse | Reality |
|---|---|
| "React.lazy() sau" | Bundle lớn = LCP chậm, Core Web Vitals fail |
| "Custom hook không cần test" | Hook lỗi = crash toàn component |
| "data-fetching pattern giống nhau" | Mỗi page khác cache strategy → sai dữ liệu |