frontend-developer：面向 React 19 与 Next.js 15 的前端开发 Skill
frontend-developer 是智雨科技在 SkillHub 发布的企业级 dev-programming Skill（v1.0.0），坐标 @org-02qudk26/frontend-developer，无需 API Key。面向构建 React 组件、响应式布局、客户端状态管理，并强调 React 19、Next.js 15、性能与无障碍。文章说明其定位、核实后的能力边界，以及通过官方安装文档或 skillhub CLI 装入 Cursor、Claude Code 等 skills 目录的步骤与注意事项。
閱讀全文前端頁面設置：用 Skill 約束 AI 產出有辨識度的前端界面
SkillHub 社區 Skill「前端頁面設置」（@user_d18a1d0d/frontend-design-ld，v1.0.0）面向建站、落地頁、儀表盤、React 組件與 Web UI 美化等任務，強調 production-grade 設計質量並避免 generic AI 審美。無需 API Key。文章說明定位與核心能力，並給出 skillhub CLI 安裝命令、Cursor/Claude Code/Codex 的 skills 目錄及官方安裝提示詞，附適用場景與目錄配置注意事項。
閱讀全文scroll-experience：爲 Agent 補齊滾動敘事與電影感網頁實現
scroll-experience（@org-02qudk26/scroll-experience，v1.0.0）由智雨科技在 SkillHub 發佈，面向視差敘事、滾動動畫、交互式故事與電影感網頁體驗，無需 API Key。文章說明其定位、覈實後的能力邊界，以及通過官方安裝文檔或 skillhub CLI 安裝到 Cursor、Claude Code、Codex 等 skills 目錄的步驟，並提醒性能與可訪問性需自行驗證。
閱讀全文生成頁面：把 phase-design 設計稿落成單文件 HTML
「生成頁面」是 SkillHub 社區 Skill（v1.0.0），無需 API Key。它將 phase-design 上游輸出的 DSL JSON 或 SPEC YAML 轉換爲可在瀏覽器直接打開的單文件 HTML 原型。文章說明其定位、核心能力、通過 skillhub CLI 或 AI 提示安裝到 Cursor 等 Agent 的步驟，以及與設計流水線配合的典型用法與注意事項。
閱讀全文藍湖skill：把藍湖設計稿還原爲像素級組件代碼
藍湖skill（@user_59e19289/design-lanhu-skill，v1.0.0）是 SkillHub 社區 dev-programming 技能，目標是將藍湖設計稿還原爲目標框架的像素級組件代碼。文章說明其定位、requires_api_key 標籤含義，並給出 skillhub CLI 與 AI 提示詞兩種安裝方式及 Cursor 等 skills 目錄。典型用法爲安裝後按 SKILL.md 配置密鑰，在對話中提供設計稿與框架訴求並人工驗收。適合已用藍湖協作的前端團隊。
閱讀全文ui-ux-pro-max：把 UI/UX 設計知識裝進 Agent Skill
ui-ux-pro-max 是智雨科技在 SkillHub 發佈的企業級 design-media Skill（v1.0.0），無需 API Key。簡介涵蓋 50 種風格、21 個調色板、50 組字體搭配、20 類圖表，並面向 React、Next.js、Vue、Svelte 等 9 種技術棧。文章說明其定位、覈實後的能力邊界，以及通過 skillhub CLI 或官方提示詞安裝到 Cursor、Claude Code 等 skills 目錄的步驟，並提醒以包內 SKILL.md 爲準、勿臆測未公開的棧名與工作流。
閱讀全文前端用戶體驗工程：用 Skill 約束生產級界面產出
介紹 SkillHub 技能「生產級前端界面工程規範」（@org-b6kzcl68/frontend-ui-engineering，v1.0.0）。該 Skill 面向新建或修改用戶界面，覆蓋組件架構與文件同置、組合優於配置、數據與展示分離、狀態分層、設計系統與語義化色板、WCAG 2.1 AA、響應式斷點、骨架屏與樂觀更新、空態錯態，並規避 AI 模板審美。說明 SkillHub 提示詞與 skillhub CLI 安裝方式、Cursor 等 skills 目錄，以及典型觸發詞與適用場景。
閱讀全文figma轉高保真html：用 Agent Skill 把 Figma 設計稿落成響應式 HTML
figma轉高保真html（@user_24c316b5/figma-to-html，v1.0.0）是 SkillHub 社區 dev-programming 類 Skill，通過 Figma MCP 讀取設計數據與圖片，並結合參考截圖生成高保真響應式 HTML。支持「figma 轉 html」等關鍵詞或 Figma 鏈接觸發。安裝可參考 skillhub.cn/install/skillhub.md，使用 skillhub install 並指定 Cursor 等客戶端的 skills 目錄。需預先配置 Figma MCP；元數據標註 requires_api_key=false。
閱讀全文前端美化：用 Agent Skill 做有辨識度的生產級界面
「前端美化」是 SkillHub 社區 Skill（@user_c6f1a0f0/114514，v1.0.0，dev-programming），通過 SKILL.md 引導 Agent 在搭建網站、落地頁、儀表盤、React 組件或美化 Web UI 時，輸出有辨識度、可交付的前端代碼，並強調避免 generic AI aesthetics。無需 API Key。本文介紹定位、能力、基於 skillhub CLI 的安裝路徑（含 Cursor 等 skills 目錄）及與官方簡介一致的使用方式。
閱讀全文angular-developer：Angular 官方的代碼生成與架構指導 Skill
angular-developer 是 Angular 團隊在 angular/skills 倉庫維護的 MIT 許可 Agent Skill（v1.0），用於生成符合官方風格指南的 Angular 代碼，並覆蓋組件、Signals、HTTP、表單、DI、路由、SSR、ARIA 等場景。Skill 要求先識別 Angular 版本、用 CLI 腳手架，並在生成後執行 ng build。安裝可通過 npx skills add https://github.com/angular/skills，並配合 Gemini CLI、Antigravity 或各編輯器自有 Skills 機制啓用。
閱讀全文dsh-settings-nav-collapse：DSH 設置面板的移動端導航摺疊方案
DSH 設置面板隨包佈局在窄屏下閱讀體驗差。`dsh-settings-nav-collapse` 插件通過標題欄切換按鈕，將左側導航欄在窄屏下摺疊爲窄圖標軌道，釋放正文列寬度。該插件支持響應式默認行爲、狀態記憶、極窄屏橫向平移畫布以及優雅降級，並採用樣式隔離策略，不依賴官方包，兼容 DSH 0.1.5 及以上版本。
閱讀全文dsh-annotate：DSH 側邊欄標註插件
dsh-annotate 是 DeepSeek Harness（DSH）的側邊欄插件，旨在解決 AI 修改界面時難以精準定位元素的問題。它允許用戶在實時預覽中直接點選元素並添加批註，將結構化數據直接發送給 AI，無需截圖或猜測。 該插件核心功能包括兩下點擊完成標註、支持 SPA 路由切換、識別技術棧與本地代理等。安裝簡單，只需將倉庫克隆至 DSH 插件目錄並重啓即可。它特別適用於網頁 UI 修改與前端改稿場景，通過結構化數據替代模糊描述，提升協作效率。
閱讀全文DeepSeek Harness 插件：dsh-uisketch
`dsh-uisketch` 插件將 `ui-sketch-to-ai` 畫板編輯器集成至 DSH Web 界面。用戶可拖拽組件、調整屬性並導出 JSON 佈局描述（不含背景圖數據）。通過側欄開關或全屏浮層操作，實現輕量級 UI 設計與 AI 數據傳遞。
閱讀全文@ddtcorex/dsh-maestro-devkit: DeepSeek Harness 通用開發工具包
`@ddtcorex/dsh-maestro-devkit` 是爲 DeepSeek Harness (DSH) 提供的前端開發工具集，旨在解決視圖審查、樣式調試和組件隔離的痛點。其核心功能包括多視口截圖、熱模塊替換（HMR）、實時樣式檢查、組件沙箱隔離以及 Cordis 和 Skills 開發支持。該工具集是隧道感知的，能適應本地及遠程開發場景。 **注意事項**：該插件已被標記爲 **Retired（已退役）**。由於 UI 工作流未完成且存在功能重複（部分功能已被核心擴展替代），目前不再接受新版本發佈。現有 0.3.2 版本仍可安裝用於回滾，開發者可參考其思路或使用 Chrome Dev
閱讀全文DeepSeek Harness HTML 模板庫插件 (satan9394/dsh-html-template-library)
satan9394/dsh-html-template-library 是一款 DeepSeek Harness (DSH) 技能插件，旨在解決 HTML 頁面構建中模板管理混亂、設計不一致的問題。該插件提供了一套標準化方法論，包含 34 設計系統、選型匹配、克隆適配、多佈局預覽及可複用設計 token，支持快速生成結構化 HTML。用戶需手動安裝插件文件至 DSH 目錄。安裝前請檢查源碼以確認使用條款，適合追求設計統一性的開發者。
閱讀全文DSH 前端與移動開發 Skill (satan9394/dsh-frontend-mobile)
這是一個爲 DeepSeek Harness (DSH) 設計的插件，旨在解決通用模型在生成 React Native 和 Next.js 等前端與移動端代碼時能力不足的問題。由用戶 satan9394 維護，提供了針對此類開發任務的專用上下文與能力。使用時需參考源碼倉庫獲取安裝方式，並注意權限與安全性。
閱讀全文dsh-page-preview：讓 DSH 在網頁裏直接預覽生成的頁面
# 前言 用 DSH（DeepSeek Harness）寫前端頁面時，驗證效果通常要走一套固定流程：讓模型輸出 HTML，複製到本地文件，再切到瀏覽器打開。頁面每改一輪，就要重複一次複製和切換。dsh-page-preview 把這一步收進了 DSH 的 web 界面：模型輸出的 HTML 代碼塊可以就地渲染成可交互預覽，本地工程或在線網址也能放進一個浮動小窗即時查看。下面介紹它的定位、功能、安裝步驟與典型用法。 # 這是什麼 dsh-page-preview 是一個 DSH web 插件，當前版本 1.0.0，由 watericetangcw 維護，採
閱讀全文FrameEvidence：爲 DeepSeek Harness 提供有邊界的 Figma 只讀設計證據
FrameEvidence 是 DeepSeek Harness 的只讀 Figma 插件，旨在解決智能體獲取設計數據時面臨的上下文膨脹及憑據暴露風險。它提供 `figma_inspect` 和 `figma_render` 兩個核心工具：前者返回有邊界限制的節點樹，後者提供臨時渲染 URL，從而控制數據規模且不暴露 Figma PAT。 該插件嚴格遵循安全邊界：僅通過主機環境變量讀取憑據，禁止寫入 Figma，拒絕重定向，並對 API 響應進行字節及節點數限制。安裝需滿足 Node 版本要求並通過 DSH 命令固定特定 commit 安裝。用戶需創建僅有隻讀權限的 Figma PAT，配置環
閱讀全文DSH 插件 dsh-plugin-message-timeline-navigation：在 web 會話左側增加消息時間線
dsh-plugin-message-timeline-navigation 是專爲 DSH Web Client 開發的一款純前端輔助插件，旨在解決長會話中手動滾動定位消息效率低的問題。該插件不修改 DSH 本體，通過疊加層在對話視圖左側顯示 Codex 風格的消息時間線，每個刻度對應一個用戶回合及其完整 Agent 回覆。核心功能包括：懸停刻度時預覽消息卡片及級聯展開效果；點擊刻度平滑跳轉至對應消息並短暫高亮；滾動時自動高亮當前閱讀回合的刻度以指示進度。該插件僅追蹤用戶消息以保持時間線密集且可預測。安裝推薦使用 pnpm 環境並執行 `dsh plugin add` 命令。它要求 Reac
閱讀全文dsh-md-html-render：在 DSH 中把 Markdown 渲染爲獨立 HTML
dsh-md-html-render 是一款 DeepSeek Harness（DSH）插件，由 LeslieWylie 維護，基於 MIT 許可證。該插件旨在將 Markdown 渲染爲獨立、自包含且無外部依賴的 HTML 頁面，適用於轉發、存檔或離線查看。它提供兩個入口：一是模型可調用的 `md_html_render` 工具，支持在 headless profile 中生成並保存 HTML；二是 Web GUI 中的 MD drawer，允許用戶在會話中就地瀏覽、編輯和導出 Markdown。 插件核心特點包括無運行時依賴、所有文件操作均通過 harness fs service 及 s
閱讀全文dsh-ui-workspace：爲 DeepSeek Harness 瀏覽器插件提供可組合工作區原語
`@ch4acko3/dsh-ui-workspace` 是一個專爲 DeepSeek Harness UI 瀏覽器插件設計的工作區界面庫。它建立在 `dsh-ui-container` 之上，將常見的複雜交互拆解爲可組合的 UI 原語，包括可拖動面板堆疊、遞歸樹視圖、標籤式文檔編輯器、文檔渲染器及操作入口等，並支持 VS Code 風格的資源管理器行爲。該庫專注於解決界面骨架搭建問題，而將產品特定的導航邏輯、數據提供者、命令及樣式實現留給使用方。 安裝時需在同一 DSH profile 中先安裝 `dsh-ui-container`，再安裝 `dsh-ui-workspace`。環境要求 N
閱讀全文dsh-sticky-disclosure：一鍵收起 DSH Web 會話中的可摺疊區塊
`dsh-sticky-disclosure` 是 DSH Web 客戶端的 MIT 許可插件，由 Han-1413141 維護，旨在解決長會話中可摺疊區塊（如 Think、工具卡片、命令卡片等）累積過多導致管理不便的問題。該插件允許用戶通過聊天區右下角的常駐按鈕或自定義快捷鍵（默認 Ctrl+Alt+C / ⌘⌥C）一鍵收起所有展開區塊，並即時顯示計數。當區塊滑出視口時，其標題會自動釘在頂部供點擊收起。插件採用純 DOM 實現，不修改應用代碼，支持深色/淺色主題，卸載後自動還原。安裝需 Node.js ≥ 20 及 DSH 環境，通過 PowerShell 腳本安裝後重啓生效。快捷鍵設置保存
閱讀全文DSH Session Pins：爲 DeepSeek Harness 提供持久固定會話菜單
alooshxl 開發的 DSH 插件 `dsh-session-pins` 旨在解決 DeepSeek Harness Web 側邊欄中常用會話查找困難的問題。該插件基於 MIT 許可證，通過公開的 `sidebar.footer.action` 槽位集成，不依賴私有 UI 源碼或修補宿主。核心功能是在側邊欄底部提供固定會話菜單，支持將普通、非空會話固定，數據保存在瀏覽器本地 `localStorage`，無需 API 密鑰。插件具備完善的校驗機制，限制最多 100 個固定項，並通過 `storage` 事件實現同源標籤頁同步。安裝需使用 `dsh plugin` 命令添加指定 Git 標籤
閱讀全文figma-create-design-system-rules：給 Agent 寫一套項目專屬設計系統規則
介紹 openai/skills 策展目錄中的 figma-create-design-system-rules：在已連接 Figma MCP 的前提下，分析代碼庫並生成項目級設計系統規則，約束組件路徑、Design Token、樣式方案與 Figma-to-code 流程，分別寫入 CLAUDE.md、AGENTS.md 或 .cursor/rules/figma-design-system.mdc，緩解 AI 落地 UI 時亂用間距、硬編碼顏色、重複造組件等問題。文中核實安裝方式、五步工作流與注意事項。
閱讀全文Bootstrap5警告框：提示信息樣式與場景應用
Bootstrap5警告框（Alert）組件用於展示提示信息、狀態反饋或操作結果，支持多種樣式、動畫及交互功能，完全響應式。使用時需先引入Bootstrap5的CSS和JS文件。基礎警告框通過`alert`類和顏色主題類（如`alert-primary`藍色、`alert-success`綠色等）創建，可添加`alert-dismissible`類實現帶關閉按鈕的效果，配合`fade show`啓用淡入淡出動畫。 功能上，`alert-link`類可統一鏈接顏色，JS可控制自動隱藏（如5秒後關閉）。典型場景包括表單提交成功提示、刪除操作確認、系統通知等。如需自定義，可通過CSS覆蓋默認樣式。掌握顏色類、關閉按鈕、動畫及JS交互，能靈活提升用戶體驗與提示清晰度。
閱讀全文Bootstrap5表單組：分組控件與標籤對齊技巧
Bootstrap5表單組是網頁開發中組織表單元素的核心工具，通過`.form-group`類包裹相關控件，實現樣式統一與佈局管理。基礎用法需結合`.form-label`（標籤樣式）、`.form-control`（輸入框樣式）及間距類（如`mb-3`）。 標籤對齊有三種方式：水平排列（用`.row`+`.col-*`實現標籤與輸入框同行）、浮動標籤（`.form-floating`，輸入框聚焦時標籤自動浮動）、垂直排列（默認，標籤在上，適合短表單）。分組控件時，單選/多選按鈕用`.form-check`包裹，下拉菜單用`.form-select`。 通過合理運用這些技巧，可構建美觀易用的表單，提升用戶體驗。建議根據場景選擇對齊方式，熟練掌握Bootstrap5表單系統。
閱讀全文Bootstrap5導航組件：標籤頁與麪包屑導航實現
要使用Bootstrap5導航組件，需先在HTML引入其CSS和JS文件（含Popper.js）。核心組件包括標籤頁導航和麪包屑導航。 標籤頁導航（Tabs）用於分類內容切換：通過`.nav-tabs`（或`.nav-pills`膠囊式）實現，需用`.nav`包裹導航項，`nav-link`按鈕通過`data-bs-toggle="tab"`和`data-bs-target`關聯內容面板。內容區域用`.tab-content`包裹`.tab-pane`，通過`fade`和`active`實現切換與默認顯示，支持無障礙屬性提升體驗。 麪包屑導航（Breadcrumb）展示頁面層級：用`.breadcrumb`類包裹有序列表，`.breadcrumb-item`表示層級項，`.active`標記當前頁。默認分隔符可通過CSS自定義（如`content: "›"`），純HTML/CSS即可實現，無需JS。 總結：標籤頁依賴JS，適合分類內容；麪包屑純靜態，用於層級展示。兩者均支持無障礙屬性，Bootstrap5提供豐富擴展（如膠囊式、自定義分隔符），便於快速上手。
閱讀全文Bootstrap5下拉菜單：點擊展開的導航選項列表
Bootstrap5下拉菜單可解決菜單項多導致的空間佔用問題，通過摺疊節省空間並保持界面簡潔。使用前需引入Bootstrap5 CSS、Popper.js和Bootstrap JS（順序不可錯）。 核心結構爲：外層 `<div class="dropdown">` 容器，內部包含觸發按鈕（`class="btn dropdown-toggle"`，帶 `data-bs-toggle="dropdown"` 屬性）和選項列表（`class="dropdown-menu"`）。選項列表用 `<li>` 包裹，菜單項爲 `dropdown-item`，支持 `active`（高亮）、`disabled`（禁用）及分割線（`dropdown-divider`）。 交互邏輯內置：點擊觸發按鈕展開/收起列表，點擊菜單項自動關閉，無需額外JS。進階用法支持右對齊（`dropdown-menu-end`）和向上展開（`dropup` 類）。 使用時需確保依賴正確引入，結構無誤（如菜單項在 `<li>` 內），即可快速實現簡潔導航菜單。
閱讀全文從手機到PC：Bootstrap5響應式佈局實現步驟
Bootstrap5是實現網頁響應式佈局的高效工具，核心優勢包括自動適配多設備的響應式設計、12列柵格系統、豐富組件及輕量CDN引入方式。使用時需先在HTML中通過CDN引入CSS和JS文件，關鍵是設置`<meta name="viewport">`確保手機端正確顯示。 其響應式核心爲柵格系統：頁面分爲12列，用`row`包裹內容，`col-*`指定列寬（`*`爲列數），通過斷點前綴（xs<576px、sm≥576px、md≥768px、lg≥992px、xl≥1200px）適配不同屏幕。容器分爲固定寬度的`container`和全屏的`container-fluid`。 實戰中，通過柵格系統可快速實現內容區與側邊欄的自適應佈局（如`col-lg-9`內容區、`col-lg-3`側邊欄，小屏幕自動堆疊爲`col-sm-12`）。輔助類如`text-center`、`bg-*`可優化樣式。掌握這些核心點，即可讓頁面在手機、平板
閱讀全文Bootstrap5卡片組件：打造簡潔美觀的內容展示單元
Bootstrap5卡片（Card）組件是用於整齊組織信息的“容器盒子”，能有序收納圖片、文字、按鈕等內容，支持響應式佈局，適配不同設備。 基礎結構以`.card`爲容器，內部通過`.card-img-top`（頂部圖片）、`.card-body`（內容區，含`.card-title`標題和`.card-text`文本）等類實現內容分層。核心組件支持多種組合：圖片可頂部放置或疊加文字（`.card-img-overlay`）；列表用`.list-group`呈現；操作按鈕可放在`.card-footer`或卡片主體內。 樣式與佈局方面，可通過寬度控制、`shadow-*`工具類（淺/默認/深陰影）、`text-center`（居中對齊）調整外觀；響應式排列用`.row`+`.row-cols-*`實現多列布局（如小屏幕1列、中等屏幕3列）。 注意事項：圖片需加`alt`屬性和`img-fluid`類，避免重複樣式衝突，合理使用間距工具類避免內容擁擠。通過卡片可高效構建產品列表、用戶資料等場景，靈活適配簡單到複雜的內容組合需求。
閱讀全文前端開發者學Node.js：從瀏覽器到服務器的思維轉變
本文介紹前端開發者學習Node.js的必要性及核心要點。Node.js基於Chrome V8引擎，讓JavaScript可在服務器端運行，解決前端做後端服務的侷限，實現全棧開發。其核心特點是“非阻塞I/O”（通過事件循環處理併發請求）、“全權限”環境（可操作文件/端口）、“CommonJS模塊系統”。 前端轉後端需思維轉變：運行環境從沙箱（限API）到全權限；異步編程從輔助（如setTimeout）到核心設計（避免服務器阻塞）；模塊系統從ES Modules到CommonJS（require/module.exports）。 學習路徑包括：掌握基礎模塊（fs、http），理解異步編程（回調/Promise/async），用Express等框架開發API，探索Webpack/Babel等工具底層原理。 總結：Node.js助力前端開發者構建全棧能力，無需切換語言，理解服務器邏輯，拓展職業邊界，是打通前後端的關鍵工具。
閱讀全文Node.js npm工具：從安裝到包管理全攻略
本文介紹Node.js和npm的核心知識。Node.js是基於Chrome V8引擎的JavaScript運行環境，npm是其默認包管理工具，用於下載、安裝、管理第三方代碼包。 安裝部分：Windows、Mac、Linux系統均可通過官網或包管理器安裝Node.js（npm隨Node.js一同安裝），安裝後可通過`node -v`和`npm -v`驗證。 npm核心功能：初始化項目需執行`npm init`生成`package.json`（項目配置文件）；安裝依賴分本地（默認，僅項目可用）和全局（-g，系統級），依賴分生產（--save）和開發（--save-dev）兩類；管理依賴包括查看、更新、卸載（`npm uninstall`）等。 常用命令：`npm install`（安裝）、`npm list`（查看）、`npm update`（更新）等。國內訪問慢可通過淘寶鏡像（`npm config set registry`）或cnpm加速。 注意事項：避免提交`node_modules`到Git，合理使用版本號（^或~），優先本地安裝依賴。 npm是Node.js開發核心工具，掌握其使用可提升效率，
閱讀全文