メニュー
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 |