菜单
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