技能 frontend-component
📦

frontend-component

內容修訂 r1 安全 ⚡ 包含腳本⚙️ 外部命令🌐 網路存取

建置 Next.js 前端元件

Next.js 團隊經常錯誤地混用 Server Components 和 Client Components。此技能提供可重複使用的模式，用於建立具可存取性、型別化、符合 App Router 的元件。

支援: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 77 銅級

使用我的智慧代理安裝

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

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

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

Agent 可讀資源

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

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

測試它

正在使用「frontend-component」。 規劃 Next.js App Router 專案中的受保護儀表板路由。

預期結果:

回應會指出它是 Client Component，因為它使用 hooks 和 navigation。它包含 loading、redirect 和 authorization states。

正在使用「frontend-component」。 改善註冊用的表單元件。

預期結果:

回應會分離 form data、validation errors、API errors 和 loading state。它也會建議具可存取性的 labels 和清楚的 submit feedback。

正在使用「frontend-component」。 為任務清單新增離線支援。

預期結果:

回應會提出 IndexedDB storage、sync status tracking、online recovery 和 error handling。它會指出 logging context 需要進行隱私審查。

安全審計

安全
v8 • 2026/7/5 開啟版本化報告

Reviewed 107 static findings in SKILL.md. The dynamic imports, backticks, key matches, reconnaissance matches, and same-origin fetch are documentation examples, not executable malicious behavior. No prompt injection or data-exfiltration intent was found.

1
已掃描檔案
928
分析行數
0
複核項目
0
已忽略的誤報

風險因素

⚡ 包含腳本 (2)
SKILL.md:691 SKILL.md:696
⚙️ 外部命令 (95)
SKILL.md:25-36 SKILL.md:36-38 SKILL.md:38 SKILL.md:51-72 SKILL.md:72-74 SKILL.md:74 SKILL.md:78-118 SKILL.md:118-124 SKILL.md:124-126 SKILL.md:126-182 SKILL.md:182-188 SKILL.md:188-193 SKILL.md:193-195 SKILL.md:195-219 SKILL.md:221-235 SKILL.md:235-240 SKILL.md:240 SKILL.md:241-245 SKILL.md:245-247 SKILL.md:247-324 SKILL.md:324-336 SKILL.md:336-338 SKILL.md:338-348 SKILL.md:348-371 SKILL.md:371-383 SKILL.md:383-385 SKILL.md:385-389 SKILL.md:389-391 SKILL.md:391-399 SKILL.md:399-401 SKILL.md:401 SKILL.md:405-407 SKILL.md:407-409 SKILL.md:409-413 SKILL.md:413-415 SKILL.md:415-417 SKILL.md:417 SKILL.md:423-426 SKILL.md:426-428 SKILL.md:428-432 SKILL.md:432-438 SKILL.md:438-440 SKILL.md:440 SKILL.md:444-453 SKILL.md:453-459 SKILL.md:459-461 SKILL.md:461-463 SKILL.md:463-467 SKILL.md:467-472 SKILL.md:472-478 SKILL.md:478 SKILL.md:479 SKILL.md:480-481 SKILL.md:481 SKILL.md:495-496 SKILL.md:496-497 SKILL.md:497-503 SKILL.md:503-505 SKILL.md:505-536 SKILL.md:536-538 SKILL.md:538-542 SKILL.md:542-596 SKILL.md:596-598 SKILL.md:598-602 SKILL.md:602-633 SKILL.md:633-635 SKILL.md:635-639 SKILL.md:639-679 SKILL.md:679-685 SKILL.md:685-687 SKILL.md:687-699 SKILL.md:699-701 SKILL.md:701-705 SKILL.md:705-716 SKILL.md:716-718 SKILL.md:718-722 SKILL.md:722-768 SKILL.md:768-776 SKILL.md:776-790 SKILL.md:790-796 SKILL.md:796-825 SKILL.md:825-827 SKILL.md:827-831 SKILL.md:831-852 SKILL.md:852-858 SKILL.md:858-873 SKILL.md:873-879 SKILL.md:879-902 SKILL.md:902-909 SKILL.md:909-911 SKILL.md:911-917 SKILL.md:917-918 SKILL.md:918-919 SKILL.md:919-920 SKILL.md:920-921
🌐 網路存取 (1)
SKILL.md:891
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告

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

開啟版本化報告
安全評估

複製報告連結

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

Markdown 徽章

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

HTML 徽章

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

嵌入卡片

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

Asmayaseen. (2026). frontend-component security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-frontend-component/audits/8

BibTeX 引用

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

Skillstore 評分

評分依據 證據置信度: 高
55
架構
85
可維護性
87
內容
72
社群
74
規範符合度

你可以打造什麼

建立 App Router 元件

產生遵循 Server 和 Client Component 邊界的型別化元件規劃。

新增互動式 UI 模式

以一致的結構建立表單、受保護路由、toasts、行內編輯和載入狀態。

審查前端標準

根據可存取性、TypeScript、Tailwind 和 Next.js App Router 預期檢查元件提案。

試試這些提示

選擇元件類型 
使用 frontend-component skill 判斷我的新 Next.js 元件應該是 Server Component 還是 Client Component。請解釋這個選擇。
草擬元件結構 
使用 frontend-component skill 為可重複使用的儀表板小工具概述 TypeScript 元件結構，包含 props、loading state 和 Tailwind classes。
改善可存取性 
使用 frontend-component skill 審查這個互動式元件規劃是否存在 WCAG 2.1 AA 可存取性缺口，並建議具體改善方式。
設計進階行為 
使用 frontend-component skill 規劃進階任務清單元件，包含 drag and drop、offline sync、caching、error boundaries 和具隱私意識的 logging。

最佳實務

  • 從 Server Components 開始，只有在需要互動性時才加入 client directives。
  • 設計每個元件時，讓可存取性需求保持可見。
  • 實作前，先根據專案慣例審查產生的範例。

避免

  • 未檢查是否需要 browser APIs，就在每個檔案加入 use client。
  • 未調整 types、imports 和 route names 就複製範例。
  • 未經遮罩處理就將 error context 傳送到 logging endpoints。

常見問題

這項技能會建立完整應用程式嗎？
否。它為 Next.js 前端工作提供元件模式和實作指引。
我什麼時候應該使用 Client Component？
當元件需要 hooks、event handlers、browser APIs 或即時互動時使用。
它支援 Tailwind CSS 嗎？
是。範例使用 Tailwind utility classes 和 conditional class composition。
它包含可存取性指引嗎？
是。它涵蓋 ARIA labels、語意化 HTML、focus indicators、keyboard support 和 screen reader text。
Claude、Codex 和 Claude Code 可以使用它嗎？
是。報告標示支援 Claude、Codex 和 Claude Code 工作流程。
我應該直接複製範例嗎？
否。請依你的專案調整 imports、types、privacy controls、routes 和 styling。

開發者詳細資訊

作者

Asmayaseen

授權

MIT

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/frontend-component

引用

6eec4a59f63ff83440a84c18d1aef79743bc714e

維護新鮮度

2026/7/18

使用量

6 次下載 · 331 次瀏覽

檔案結構

📄 SKILL.md

Asmayaseen 的更多技能

查看全部

相關技能

查看全部