技能 frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: BrianDai22

內容修訂 r2 安全 ⚡ 包含腳本⚙️ 外部命令📁 檔案系統存取🌐 網路存取

以清晰模式建構 React 前端

前端團隊經常花時間爭論 React 模式和檔案配置。這項技能為 Claude、Codex 和 Claude Code 提供清楚指南，以維持一致的 React TypeScript 工作方式。

支援: Claude Codex Code(CC)

🥉 79 銅級

Maintain this Skill? Claim it 🥉 79 銅級

使用我的智慧代理安裝

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

智能體請求

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

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

Agent 可讀資源

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

Markdown 詳情 GET /skills/briandai22-frontend-dev-guidelines.md 已簽名 manifest GET /api/skills/briandai22-frontend-dev-guidelines/manifest 已簽名 lockfile GET /api/skills/briandai22-frontend-dev-guidelines/lockfile

測試它

正在使用「frontend-dev-guidelines」。建立包含快取資料和載入狀態的使用者儀表板。

預期結果:

一份計畫，將 API 服務、Suspense hooks、延遲載入的儀表板區段、MUI 版面配置和 snackbar 錯誤處理分離。

正在使用「frontend-dev-guidelines」。依據專案慣例審查 React 功能。

預期結果:

一份精簡審查，涵蓋功能資料夾、匯入別名、路由設定、Suspense 邊界、MUI v7 Grid 語法和 TypeScript 問題。

正在使用「frontend-dev-guidelines」。重構舊版載入 spinner 模式。

預期結果:

從早期載入回傳遷移到 SuspenseLoader 或 LoadingOverlay 的路徑，同時保持版面配置穩定。

安全審計

安全

v9 • 2026/7/23 開啟版本化報告

All 187 static alerts are false positives from Markdown and illustrative React or TypeScript snippets. The skill contains no executable scripts or prompt injection evidence. Dynamic imports, relative imports, and API calls are conventional frontend examples with fixed targets.

已掃描檔案

5,490

分析行數

複核項目

已忽略的誤報

風險因素

⚡ 包含腳本 (22)

⚙️ 外部命令 (50)

resources/complete-examples.md:85-146 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:309-327 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:406-408 resources/file-organization.md:137-145 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 SKILL.md:31 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:37 SKILL.md:40 SKILL.md:46 SKILL.md:47 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:64 SKILL.md:72-96 SKILL.md:96-105 SKILL.md:105-106 SKILL.md:106-107 SKILL.md:107-125 SKILL.md:125-129 SKILL.md:129-130 SKILL.md:130-132 SKILL.md:132 SKILL.md:141-142 SKILL.md:142-145 SKILL.md:145-153 SKILL.md:153-162 SKILL.md:162-163 SKILL.md:163-166 SKILL.md:166-167 SKILL.md:167-168 SKILL.md:168-171 SKILL.md:171-174 SKILL.md:174-183

📁 檔案系統存取 (30)

🌐 網路存取 (5)

resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224 SKILL.md:130

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

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

分享與引用此報告

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

開啟版本化報告

複製報告連結

https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

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

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/briandai22-frontend-dev-guidelines.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 引用

BrianDai22. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9

BibTeX 引用

@techreport{briandai22-briandai22-frontend-dev-guidelines-2026,
  author = {BrianDai22},
  title = {frontend-dev-guidelines security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9},
  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-dev-guidelines security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "BrianDai22"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/briandai22-frontend-dev-guidelines/audits/9"
identifiers:
  - type: other
    value: "skillstore:briandai22-frontend-dev-guidelines:audit:9"
    description: "Skillstore immutable audit report identifier"

比較變體

7 個可安裝變體

每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。

為何此變體排名第一

Skillstore 評分最高

作者 / 來源 Skillstore 評分證據置信度 Skillstore 使用量已更新

BrianDai22 推薦目前

briandai22-frontend-dev-guidelines

Skillstore 評分 79

證據置信度高

Skillstore 使用量 20

已更新

2026-09-09

0Chan-smc

0chan-smc-frontend-dev-guidelines

Skillstore 評分 78

證據置信度高

Skillstore 使用量 200

已更新

2026-10-11

DojoCodingLabs

dojocodinglabs-frontend-dev-guidelines

Skillstore 評分 78

證據置信度高

Skillstore 使用量 17

已更新

2026-09-09

sickn33

sickn33-frontend-dev-guidelines

Skillstore 評分 78

證據置信度高

Skillstore 使用量 16

已更新

2026-09-09

BOM-98

bom-98-frontend-dev-guidelines

Skillstore 評分 78

證據置信度高

Skillstore 使用量 16

已更新

2026-09-09

Dimon94

dimon94-frontend-dev-guidelines

Skillstore 評分 78

證據置信度高

Skillstore 使用量 14

已更新

2026-09-09

diet103

diet103-frontend-dev-guidelines

Skillstore 評分 78

證據置信度高

Skillstore 使用量 13

已更新

2026-09-09

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

建立新功能

使用功能結構、API 服務、路由和元件模式來建構一致的 React 功能。

標準化程式碼審查

依據 Suspense、匯入、MUI 樣式和 TypeScript 安全性的共享規則比較 pull requests。

指導 AI 編碼工作階段

在生成或編輯程式碼之前，提供 Claude、Codex 或 Claude Code 專案特定的前端慣例。

試試這些提示

建立元件

使用 frontend-dev-guidelines 為 [feature] 建立 React TypeScript 元件。遵循元件檢查清單、SuspenseLoader 模式和 MUI v7 sx 樣式設定。

新增資料擷取

使用資料擷取指南為 [entity] 設計 useSuspenseQuery hook。包含 query keys、快取優先行為、變更處理和使用者可見錯誤。

重構功能

依據檔案組織、路由、樣式、效能和 TypeScript 標準審查 [feature path]。建議範圍明確的變更，並實作安全的變更。

建構完整工作流程

使用所有 frontend-dev-guidelines 資源來建構 [workflow]。包含功能資料夾、API 服務、路由、延遲載入、Suspense 邊界、MUI 樣式和聚焦測試。

最佳實務

針對新的資料驅動元件，搭配 useSuspenseQuery 使用 SuspenseLoader。
將領域程式碼保留在功能資料夾中，且只公開功能的公共 API。
優先使用具型別的 MUI sx 樣式、匯入別名和明確的 TypeScript 回傳型別。

避免

不要使用會取代整個版面配置的早期載入回傳。
不要在功能 API 服務層之外建立分散的 API 呼叫。
不要在新程式碼中混用舊的 MUI Grid props、深層匯入和寬泛的 any 型別。

常見問題

哪些專案最適合這項技能？

它適合使用 MUI v7、TanStack Query 和 TanStack Router 的 React TypeScript 專案。

它可以直接撰寫程式碼嗎？

這項技能提供慣例和範例。助理仍會使用工作階段中可用的工具來編輯程式碼。

它要求每個資料請求都使用 Suspense 嗎？

它建議新元件使用 useSuspenseQuery，並允許舊版或特殊案例使用一般的 useQuery。

它包含後端 API 指導嗎？

不會。它聚焦於前端服務包裝器、路由字串、query keys 和用戶端資料流。

Claude Code 和 Codex 都可以使用它嗎？

是。報告標示支援 Claude、Codex 和 Claude Code。

團隊應該先自訂什麼？

團隊應先將功能名稱、路由格式、測試期望和本機 API 用戶端行為與其程式碼庫對齊。

開發者詳細資訊

作者

BrianDai22

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/BrianDai22/concetrateaiquiz/tree/main/.claude/skills/frontend-dev-guidelines

引用

a39a91716eadede5f4cdefd78178fed4e837a128

維護新鮮度

2026/7/26

使用量

9 次下載 · 706 次瀏覽

檔案結構

📁 resources/

📄 common-patterns.md

📄 complete-examples.md

📄 component-patterns.md

📄 data-fetching.md

📄 file-organization.md

📄 loading-and-error-states.md

📄 performance.md

📄 routing-guide.md

📄 styling-guide.md

使用 starknet.js 建置 Starknet 應用程式

由 internet-court

Starknet 整合需要精確處理提供者、帳戶、交易與費用。此技能為 Claude、Codex 與 Claude Code 提供實用的 starknet.js v9 模式。

程式開發查看

frontend-dev-guidelines

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

比較變體

Skillstore 評分

你可以打造什麼

建立新功能

標準化程式碼審查

指導 AI 編碼工作階段

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊

BrianDai22 的更多技能

backend-dev-guidelines

相關技能

react-dev

senior-frontend

react-nextjs-development

playwright-testing

nestjs-code-audit

starknet-js