القائمة
Frontend development guide — UI implementation, component architecture, state management, performance
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Backend testing guide — unit, integration, API contract, database, load testing
Backend development guide — API design, data modeling, business logic, security, performance
Codebase second brain workflow for AI agents — use repo maps and capability maps before deep code reads
Multi-agent coordination skill — task decomposition, dependency tracking, handoff protocol, conflict resolution
Frontend testing guide — unit, integration, visual regression, accessibility, E2E for UI
Project management skill — sprint planning, backlog grooming, risk management, reporting, stakeholder communication
| name | frontend-dev |
| version | 1.0.0 |
| description | Frontend development guide — UI implementation, component architecture, state management, performance |
| requires | [] |
| task_types | ["feature-implementation","frontend","ui","component"] |
| applies_to_tags | ["frontend","ui","react","vue","component","styling"] |
PascalCase (TaskCard, DetailPanel)use prefix (useTaskList, useScrollPosition)handle prefix (handleSubmit, handleClose)| Loại state | Đặt ở đâu |
|---|---|
| Server data (fetch/cache) | React Query / SWR |
| Global UI state | Zustand / Jotai |
| URL-shareable state | search params |
| Form state | React Hook Form |
| Local ephemeral | useState |
Không copy server state vào global store — dùng cache của query library.
width + height explicitloading="lazy" cho ảnh below-the-folduseMemo, useCallback) chỉ khi đo được bottleneckwidth/height/top/left — chỉ transform + opacitykey prop stable, không dùng index làm key cho danh sách có thứ tự thay đổi<button> thay <div onClick>, <nav>, <main>, <article>aria-label khi text không đủ mô tảdangerouslySetInnerHTML không sanitize!important trừ khi không còn cách nào khácconsole.log còn sót