Communitygithub.com

rbikbov/frontend-starter

建立架構決策記錄(ADR),記錄關鍵技術決策的背景、替代方案、權衡取捨、影響與決策負責人。適用於記錄「架構決策」、「技術選擇」、「設計決策」或「ADR」。

frontend-starter 是什麼?

此技能為 AI 代理提供一個結構化的範本和工作流程,用於創建「架構決策記錄」(ADR)。它能幫助開發團隊以清晰、一致的方式記錄關鍵的技術與架構決策,包含背景脈絡、替代方案、考量權衡與長期影響。此技能支援所有能處理 Markdown 檔案的平台,如 Claude Code、Cursor 或 Codex。其運作方式是提供一個包含編號規則、狀態工作流程(如「提案」→「已接受」→「已實施」)、最佳實踐以及常見模式(如技術選型、架構變更、標準制定)的完整範本。此外,它還提供反模式檢查清單和審查與輸出核對清單,以確保 ADR 的品質與完整性,最終生成易於維護且對未來團隊有參考價值的決策記錄。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rbikbov/frontend-starter/tree/HEAD/.claude/skills/adr-writer

在你喜歡的 AI 中提問

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

說明文件

ADR 撰寫器

以清晰背景、替代方案與影響記錄架構決策。請使用英文撰寫。

ADR 範本

# ADR-[編號]: [簡短決策標題]

**狀態:** [提案 | 已接受 | 已棄用 | 被 ADR-XXX 取代]
**日期:** [YYYY-MM-DD]
**作者:** [名稱/代號]

## 1. 背景

我們正在解決什麼問題?有哪些因素影響它(商業目標、技術負債、預算)?
**限制條件:**

- [限制條件 1]
- [限制條件 2]

## 2. 決策

決策的簡短陳述。主要論點。

## 3. 技術細節與機制

_自由格式章節。描述實作細節、資料結構、協定細節或關鍵框架功能。_

- [列表、API 描述、資料結構]
- [Mermaid 圖表(建議用於複雜互動)]

## 4. 考慮的替代方案

### 4.1. [選項 1]

- **優點:** ...
- **缺點:** ...
- **決策:** [已拒絕/已考量](簡短原因)。

## 5. 影響與風險

### 正面影響(優點)

- 這對系統/團隊有何幫助?

### 負面影響 / 風險(缺點/風險)

- 我們接受哪些缺點?威脅是什麼?
- **緩解措施:** 我們將如何處理這些風險?

## 6. 修訂歷史

- **[日期]**: [變更說明] ([作者])
- **[日期]**: [例如:狀態變更為「已接受」] ([作者])

ADR 編號規則

ADR-001: 初始系統架構
ADR-002: 分析用資料庫選擇
ADR-003: 認證策略
...

狀態工作流程

提案 → 已接受 → 已實施
    ↓
已拒絕

已接受 → 已棄用 → 被 ADR-XXX 取代

最佳實踐

  1. 為重大決策撰寫 ADR:並非每個選擇都需要 ADR
  2. 記錄替代方案:展示你考慮過其他選項
  3. 坦誠面對權衡取捨:每個決策都有缺點
  4. 保持簡潔:最多 1-2 頁
  5. 更新狀態:標記已棄用/被取代的 ADR
  6. 連結相關 ADR:建立決策軌跡
  7. 包含後續事項:附有負責人的行動項目
  8. 視覺化:使用 Mermaid 圖表展示架構與流程
  9. 為未來的讀者撰寫:他們缺乏當前背景
  10. 誠實面對權衡取捨(每個選擇都有缺點)

常見模式

技術選型:

  • 專注於技術能力是否符合需求
  • 如果有的話,包含性能基準測試
  • 記錄團隊專業程度
  • 考慮營運複雜度

架構變更:

  • 在影響部分包含遷移策略
  • 記錄向後相容性影響
  • 考慮過渡期間的團隊開發速度影響
  • 記錄監控與回滾計畫

標準與慣例:

  • 包含標準的實際範例
  • 記錄例外或脫離機制
  • 考慮執行機制
  • 注意教育訓練/新人入職影響

棄用:

  • 將狀態設為「已棄用」或「被取代」
  • 連結到取代它的 ADR
  • 記錄日落時間表
  • 包含遷移指南

反模式

❌ 過於詳細:沒人會讀的 10 頁 ADR ❌ 沒有替代方案:看起來像是預先決定的 ❌ 缺少影響:忽略缺點 ❌ 沒有負責人:無人負責 ❌ 過時的狀態:舊的 ADR 仍標為「提案」

審查核對清單

  • 背景中有清楚的問題陳述
  • 決策已明確陳述
  • 考慮了 2 個以上替代方案
  • 誠實評估了權衡取捨
  • 記錄了影響(正面與負面)
  • 已識別風險並有緩解措施
  • 已指派決策負責人
  • 有截止日期的後續行動
  • 狀態為最新

輸出核對清單

  • 已建立 ADR 文件
  • 背景說明了問題
  • 決策已清楚陳述
  • 記錄了 2-3 個替代方案
  • 權衡取捨章節已填寫
  • 列出了影響(正面與負面)
  • 已識別風險並有緩解措施
  • 決策日期與負責人
  • 已指派後續行動
  • 狀態已設定

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

rbikbov/frontend-starter

Проверка фронтенд-кода и документации на «нейрослоп» перед коммитом, PR или публикацией репозитория: остатки генераторов, мёртвые и недоделанные опции, утверждения в README и комментариях, не подтверждённые кодом, маркетинговый тон и эмодзи, лишние абстракции, хрупкая обработка ошибок, персональные данные в логах, несуществующие классы стилей. Использовать, когда просят проверить код или репозиторий «на слоп», подготовить проект к публикации или показу, сделать ревью кода, написанного с помощью ИИ, или перед тем как закоммитить собственную большую правку.

rbikbov/frontend-starter

Процесс разработки фичи с агентом: PRD с Non-Goals → компактная спецификация → задачи по одной на коммит → read-only исследование → tracer bullet → сборка с тестом сначала → независимое ревью субагентом → проверка в браузере. Использовать, когда просят сделать фичу, экран, пользовательский сценарий или заметное изменение поведения; когда нужно написать PRD, спецификацию или разбить работу на задачи; когда работа больше одного коммита. Не использовать для опечаток и однострочных правок.

rbikbov/frontend-starter

Авторизация и сессия во фронтенде на Next.js (App Router): где хранить токены, BFF на route handlers с HttpOnly-cookie, refresh токена без гонок, определение «не авторизован» (включая GraphQL, который отвечает 200), проверки в proxy.ts и Data Access Layer, безопасный редирект после входа, выход без утечки данных прошлого пользователя, токены в ссылках сброса пароля, формы входа и восстановления. Использовать, когда проектируешь или пишешь вход, регистрацию, восстановление пароля, защищённые страницы, API-клиент с refresh-токеном, или ревьюишь такой код.

rbikbov/frontend-starter

Старт нового фронтенд-проекта на Next.js (App Router) + TypeScript: фундамент, который закладывается до первой фичи. Использовать, когда нужно: создать проект с нуля; решить, нужны ли Next.js, монорепо, BFF, микрофронтенды; разложить FSD поверх роутинга Next; завести строгий TS, линтер границ, env-конфиг, модель ошибок и API-клиент, тесты, git-хуки, CI, каркас README; навести порядок в молодом проекте после генератора.

相關技能