Habilidades frontend-component
🧩

frontend-component

Seguro 🌐 Acceso a red📁 Acceso al sistema de archivos⚡ Contiene scripts⚙️ Comandos externos

使用伺服器/用戶端模式建立 Next.js 元件

使用錯誤的模式建立 Next.js 元件會導致效能問題、水合錯誤和不良的用戶體驗。本技能提供伺服器和用戶端元件模式、無障礙合規性和 React 最佳實踐，以建立高效且可存取的前端元件。

Soporta: Claude Codex Code(CC)
📊 69 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "frontend-component". 建立一個點擊時顯示載入旋轉圖示的按鈕元件

Resultado esperado:

  • 使用 use client 指示詞的用戶端元件
  • 載入狀態的狀態管理
  • LoadingSpinner 元件整合
  • 載入時的停用狀態
  • 可存取性：aria-busy 和 aria-disabled 屬性

Usando "frontend-component". 建立具有拖放重新排序功能的工作清單

Resultado esperado:

  • 使用 @dnd-kit/core 的 SortableTaskList
  • 用於可存取性的 PointerSensor 和 KeyboardSensor
  • 用於重新排序邏輯的 handleDragEnd 函式
  • 搭配 verticalListSortingStrategy 的 SortableContext
  • 清單項目的適當 key 屬性

Auditoría de seguridad

Seguro
v5 • 1/16/2026

Pure documentation skill containing only markdown guidance and TypeScript code examples. No executable code, scripts, network calls, file system access, or environment variable reading. The 142 static findings are all false positives from markdown documentation patterns being misidentified as security issues.

2
Archivos escaneados
1,105
Líneas analizadas
4
hallazgos
5
Auditorías totales

Factores de riesgo

🌐 Acceso a red (2)
skill-report.json:6 SKILL.md:891
📁 Acceso al sistema de archivos (1)
skill-report.json:6
⚡ Contiene scripts (2)
SKILL.md:691 SKILL.md:696
⚙️ Comandos externos (109)
SKILL.md:25-36 SKILL.md:36-38 SKILL.md:38 SKILL.md:38-51 SKILL.md:51-72 SKILL.md:72-74 SKILL.md:74 SKILL.md:74-78 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:240 SKILL.md:240-241 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:401-405 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:417 SKILL.md:417 SKILL.md:417-423 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:440 SKILL.md:440 SKILL.md:440-444 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:478-479 SKILL.md:479 SKILL.md:479-480 SKILL.md:480-481 SKILL.md:481 SKILL.md:481-495 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
Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
21
Comunidad
100
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

建立合規的 Next.js 元件

建立遵循伺服器/用戶端模式並符合可存取性標準的元件

現代化傳統 React 程式碼

將類別元件和僅用戶端程式碼重構為在適當情況下使用伺服器元件

標準化元件架構

為受保護的路線、表單和狀態管理建立跨團隊的一致模式

Prueba estos prompts

基本元件結構 
顯示如何為具有靜態內容和中繼資料的頁面建立基本的 Next.js 16 伺服器元件
互動式用戶端元件 
如何在 Next.js 中建立具有 React Hook、驗證和適當狀態管理的用戶端表單元件
受保護路線模式 
建立檢查身份驗證、顯示載入狀態並在需要時重新導向至登入頁面的 ProtectedRoute 元件
進階可存取性 
顯示符合 WCAG 2.1 AA 的模式，包括 ARIA 標籤、鍵盤導航、焦點管理和螢幕閱讀器支援

Mejores prácticas

  • 預設使用伺服器元件處理靜態內容、SEO 和資料擷取
  • 僅在需要互動性、Hook 或瀏覽器 API 時才加入 use client 指示詞
  • 始終包含可存取性屬性，如 aria-label、role 和鍵盤導航支援

Evitar

  • 僅為了安全起見在每個元件上使用 use client
  • 為簡單元件跳過可存取性屬性
  • 使用內嵌樣式而非 Tailwind 工具程式類別

Preguntas frecuentes

何時應該使用伺服器元件 versus 用戶端元件？
預設對靜態內容、版面配置和資料擷取使用伺服器元件。僅在需要互動性、React Hook、瀏覽器 API 或事件處理程式時使用用戶端元件。
此技能是否適用於 Next.js 14 或 15？
是的，這些模式適用於使用 App Router 的 Next.js 14+。對於特定版本的功能可能需要進行小幅調整。
我可以使用這些模式搭配 JavaScript 而非 TypeScript 嗎？
是的，這些概念適用於 JavaScript。移除類型註釋和介面定義以獲得純 JS 實作。
使用這些模式時我的資料安全嗎？
是的，本技能僅提供文件。技能本身不會收集、傳輸或儲存任何資料。
如何與現有的元件函式庫整合？
這些模式與函式庫無關。將伺服器/用戶端分離和可存取性模式應用於 Material UI、Chakra UI 或自訂函式庫的元件。
此技能與官方 Next.js 文件有何不同？
本技能提供實用的實作模式、範本和來自專案背景的實際範例，補充官方文件並提供可立即使用的程式碼。

Detalles del desarrollador

Licencia

MIT

Repositorio

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

Ref.

main

Estructura de archivos

📄 SKILL.md