技能 frontend-fundamentals

📦

frontend-fundamentals

Name: frontend-fundamentals
Author: DanielPodolsky

內容修訂 r1 安全 ⚙️ 外部命令

檢視前端元件基礎

前端審查常常要到元件變得難以維護時，才發現架構、狀態、可及性與效能問題。此技能會透過聚焦的檢查清單問題與審查模式，引導 Claude、Codex 和 Claude Code 評估元件品質。

支援: Claude Codex Code(CC)

🥉 79 銅級

Maintain this Skill? Claim it 🥉 79 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "frontend-fundamentals" from https://skillstore.io/skills/danielpodolsky-frontend-fundamentals.md and its manifest at https://skillstore.io/api/skills/danielpodolsky-frontend-fundamentals/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/danielpodolsky-frontend-fundamentals.md 已簽名 manifest GET /api/skills/danielpodolsky-frontend-fundamentals/manifest 已簽名 lockfile GET /api/skills/danielpodolsky-frontend-fundamentals/lockfile

測試它

正在使用「frontend-fundamentals」。儀表板元件負責資料載入、路由決策、狀態更新與所有呈現。

預期結果:

審查會建議將容器職責與較小的呈現元件拆分，並抽出資料載入邏輯。

正在使用「frontend-fundamentals」。某個元件將相同的 user 物件穿過四層巢狀結構傳給一個小工具。

預期結果:

審查會標記 prop drilling，並詢問更接近的資料來源或共享 context 是否能讓相依關係更清楚。

正在使用「frontend-fundamentals」。清單檢視在每次渲染時篩選項目，並使用通用容器作為互動控制項。

預期結果:

審查會建議 memoizing 成本較高的衍生值，並將非語意化互動元素替換為可及的控制項。

安全審計

安全

v8 • 2026/7/6 開啟版本化報告

All eight static findings are false positives caused by Markdown fenced examples in SKILL.md, not Ruby or shell backtick execution. The skill is prose guidance for frontend code review, and no semantic evidence of prompt injection, data exfiltration, or unsafe operational intent was found.

已掃描檔案

121

分析行數

複核項目

已忽略的誤報

風險因素

⚙️ 外部命令 (8)

SKILL.md:55-64 SKILL.md:64-67 SKILL.md:67-72 SKILL.md:72-75 SKILL.md:75-82 SKILL.md:82-85 SKILL.md:85-89 SKILL.md:89-108

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/danielpodolsky-frontend-fundamentals/security.svg)](https://skillstore.io/skills/danielpodolsky-frontend-fundamentals?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/danielpodolsky-frontend-fundamentals?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/danielpodolsky-frontend-fundamentals/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/danielpodolsky-frontend-fundamentals.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

DanielPodolsky. (2026). frontend-fundamentals security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/audits/8

BibTeX 引用

@techreport{danielpodolsky-danielpodolsky-frontend-fundamentals-2026,
  author = {DanielPodolsky},
  title = {frontend-fundamentals security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/audits/8},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-fundamentals security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "DanielPodolsky"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/audits/8"
identifiers:
  - type: other
    value: "skillstore:danielpodolsky-frontend-fundamentals:audit:8"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

審查 pull request

在合併前端元件變更前，套用結構化檢查清單。

指導元件設計

使用引導式問題，協助開發者辨識拆分、狀態與命名問題。

稽核 UI 可維護性

評估一組元件中是否存在會增加複雜度與審查成本的重複模式。

試試這些提示

基本元件審查

使用 frontend-fundamentals 檢查清單審查這個前端元件。聚焦於單一職責、prop 數量與可及性。

狀態放置審查

審查這些相關元件的狀態管理。指出哪些狀態應保留在本地、向上移動，或使用伺服器狀態工具。

效能與可及性檢查

稽核這項 UI 變更，檢查可避免的重新渲染、繁重的渲染工作、lazy loading 機會、語意化 HTML 與鍵盤存取。

導師式審查

以導師身分審查這個 pull request。先提出蘇格拉底式問題，接著列出影響最大的前端架構變更。

最佳實務

提供完整元件與鄰近呼叫端，讓審查能判斷職責邊界。
審查大型 pull request 時，先要求列出影響最大的發現。
在要求程式碼變更前，將檢查清單結果與專案慣例配對檢視。

避免

未考量產品背景，就把檢查清單當成僵硬規則使用。
在未分享元件程式碼或使用者流程的情況下要求廣泛審查。
在衡量實際影響前，就把效能建議視為必要變更。

常見問題

這個技能涵蓋哪些框架？

它涵蓋 React、Vue 和 Svelte 元件審查，以及一般前端渲染與樣式相關問題。

它會自動修改程式碼嗎？

不會。它提供審查指引、問題與建議，供輔助工具套用。

它可以取代可及性測試嗎？

不能。它能協助審查者注意可及性風險，但仍需要瀏覽器測試與輔助科技檢查。

它對初階開發者指導有用嗎？

可以。它包含設計用來引導學習的蘇格拉底式問題，不會立即直接給出答案。

它包含外部工具嗎？

沒有。此技能是 Markdown 審查指南，不會執行指令或安裝套件。

它著重哪些程式碼品質問題？

它著重於大型元件、不清楚的職責、prop drilling、渲染邏輯、可及性缺口，以及不必要的重新渲染。

開發者詳細資訊

作者

DanielPodolsky

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/frontend

引用

34f316ba14ef36c7a620fc09f2676d2429997a77

維護新鮮度

2026/7/20

使用量

15 次下載 · 181 次瀏覽

檔案結構

📄 SKILL.md