frontend-fundamentals
自動審查前端程式碼
前端程式碼審查常常遺漏架構問題和反模式。此技能自動套用經過驗證的前端標準,在進入生產環境之前捕捉元件設計缺陷、狀態管理錯誤和效能問題。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"frontend-fundamentals" 사용 중입니다. 審查此 React 元件的架構問題
예상 결과:
- 元件超過 200 行 - 考慮拆分為更小的元件
- 發現 8 個 props - 嘗試減少到 7 個以下以提高可維護性
- 狀態管理良好 - 使用 useState 正確地就近配置
- 效能:為過濾使用者的計算新增 useMemo
- 無障礙:按鈕需要 aria-label 以供螢幕閱讀器使用
"frontend-fundamentals" 사용 중입니다. 檢查此 Vue 元件的效能問題
예상 결과:
- 計算屬性在每次渲染時都重新計算 - 使用記憶化
- v-for 沒有 key 可能導致不必要的重新渲染
- 良好使用組合式 API 進行邏輯分離
- 考慮使用 defineAsyncComponent 延遲載入此元件
"frontend-fundamentals" 사용 중입니다. 分析此元件的無障礙合規性
예상 결과:
- 所有圖片缺少 alt 文字 - 新增描述性替代文字
- 表單輸入需要相關聯的標籤以供螢幕閱讀器使用
- 顏色對比度不足 - 加深文字顏色
- 互動元素缺少鍵盤焦點樣式
보안 감사
안전This skill is a pure documentation/metadata skill with no executable code. All 23 static findings are FALSE POSITIVES caused by the static analyzer misinterpreting markdown syntax, file paths, and documentation content as security threats. The files contain only frontend code review guidelines, metadata JSON, and example code snippets - no actual network calls, command execution, or cryptographic operations exist.
위험 요인
🌐 네트워크 접근 (2)
📁 파일 시스템 액세스 (1)
품질 점수
만들 수 있는 것
指導初級開發者
自動捕捉初級開發者程式碼中的架構錯誤,並提供具體範例的教育性回饋。
標準化程式碼審查
透過自動化檢查元件架構最佳實踐,確保團隊中一致的程式碼審查標準。
審查社群貢獻
快速評估拉取請求的前端架構問題,並向貢獻者提供可行的回饋。
이 프롬프트를 사용해 보세요
請審查此 React 元件的架構問題、效能問題和無障礙疑慮。重點關注元件大小、prop 數量、狀態管理,以及是否遵循單一職責原則。
分析此程式碼的狀態管理反模式。檢查狀態是否正確地就近配置、是否存在 prop drilling,以及伺服器狀態是否正確處理。
審查此前端程式碼的效能瓶頸。尋找不必要的重新渲染、缺少的記憶化,以及程式碼分割的機會。
檢查此元件的無障礙問題。驗證語義化 HTML 的使用、ARIA 屬性和鍵盤導航支援。
모범 사례
- 應用單一職責原則 - 每個元件應該只做好一件事
- 保持元件在 200 行以下,props 在 7 個以下以提高可維護性
- 盡可能將狀態就近配置到實際使用的地方
피하기
- 建立處理資料獲取、狀態和 UI 渲染的上帝元件
- 透過超過 3 層元件進行 prop drilling
- 在渲染中直接放置昂貴的計算而不使用記憶化