Communitygithub.com

xoai/sage

通用的網路開發原則 — 無障礙性 (WCAG 2.2)、效能 (Core Web Vitals)、安全標頭 (OWASP)、SEO、響應式設計、錯誤使用者體驗與載入狀態。與框架無關。

sage 是什麼?

此技能「xoai/sage」提供一套跨框架的通用網路開發原則,涵蓋無障礙性 (WCAG 2.2)、效能 (Core Web Vitals)、安全標頭 (OWASP)、SEO、響應式設計、錯誤使用者體驗及載入狀態等面向。其核心價值在於確保 AI 代理能持續一致地應用這些平台基礎知識,避免常見的實務遺漏。技能內含 7 個設計模式(正規做法)、6 個反模式(應避免的錯誤),以及 7 條基本憲法原則,並以 W3C、Google、OWASP 與 MDN 等權威來源為依據。支援所有前端框架(如 React、Vue、Svelte 與純 JavaScript),但刻意不涵蓋框架特定模式、CSS 方法論或建置工具設定。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/xoai/sage/tree/HEAD/skills/web

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

web

第 1 層 — 領域基礎 (v2.0)

適用於每個網路專案的通用網路開發原則,無論使用何種框架。 React、Vue、Svelte、純 JavaScript — 這些原則都適用。

理念

此套件編碼了代理程式在獨立處理時常能正確應用,但在實務中卻容易遺漏的基礎網路平台知識。代理程式知道什麼是 ARIA 標籤,但卻產出一個對螢幕閱讀器沒有錯誤提示的表單。代理程式知道 Core Web Vitals,但仍渲染出一張 2MB 且未設定尺寸的英雄圖片。

差距不在於知識 — 而在於一致性的應用。

包含內容

類型數量涵蓋範圍
模式7無障礙性 (WCAG 2.2)、效能 (Core Web Vitals)、安全標頭 (OWASP)、SEO、響應式設計、錯誤使用者體驗、載入狀態
反模式6過多的 div、缺少替代文字、版面位移、未保護的表單、客戶端專屬的關鍵路徑、缺少安全標頭
憲法7原則

基於:W3C WCAG 2.2 (2023 年 10 月)、Google Core Web Vitals (2025)、 OWASP 安全標頭專案、OWASP CSP 備忘錄、MDN Web Docs、 Web Almanac 2025、歐洲無障礙法案 (2025 年 6 月)。

此套件未涵蓋項目

  • 框架特定模式(請參閱 react、nextjs 等)
  • CSS 方法論觀點(BEM 與 utility-first 與 CSS-in-JS)
  • 建置工具設定(Webpack、Vite、Turbopack)
  • 後端/API 模式(請參閱 api 或 baas)

相關技能