adapt

概覽

什麼是 adapt 技能？

adapt 技能讓前端開發者能夠調整現有設計，使其能在不同螢幕尺寸、裝置與使用情境下順暢運作。它專注於實作斷點、流動布局與觸控目標，是響應式設計與跨裝置相容性的關鍵工具。

誰適合使用 adapt？

此技能適合前端開發者、UI 工程師及團隊，需為行動裝置、平板、桌面或其他平台調整網頁或應用介面。若您的專案要求在多裝置間保持一致的可用性與外觀，adapt 提供了結構化的工作流程來協助您完成。

解決的問題

• 確保設計在任何裝置或螢幕尺寸上皆可用
• 協助識別並解決布局、輸入與效能挑戰
• 提供可重複使用的響應式調整流程

使用說明

安裝步驟

1. 使用以下指令安裝 adapt 技能：

   npx skills add https://github.com/pbakaus/impeccable --skill adapt

2. 首先閱讀 SKILL.md 檔案，了解核心工作流程與需求。

初始設定與準備

• 在調整前，先呼叫 $frontend-design 技能以收集設計原則與背景。若尚無設計背景，請先執行 $teach-impeccable。
• 收集目標平台、裝置與使用情境的相關資訊。

工作流程概述

• 評估調整挑戰：
  • 確認原始設計背景（例如桌面網頁、行動應用）。
  • 了解目標情境：裝置類型、輸入方式、螢幕限制、連線品質及使用者期望。
  • 找出調整挑戰，如布局問題、輸入差異或內容溢出。
• 規劃調整策略：
  • 決定斷點、流動網格與觸控目標大小。
  • 為各情境優先排序功能與內容。
• 實作與測試：
  • 應用響應式 CSS、彈性布局與適應性資源。
  • 跨裝置測試並依需求調整。

重要檔案參考

• SKILL.md — 主要工作流程與調整步驟
• README.md、AGENTS.md、metadata.json — 若有提供，包含額外背景與參考資料

常見問題

什麼時候應該使用 adapt 技能？

當您需要讓介面在多種裝置或螢幕尺寸間運作，或使用者提及響應式設計、行動版布局或跨裝置相容性時，皆適合使用 adapt。

使用 adapt 前需要做哪些準備？

您必須使用 $frontend-design 收集設計背景，必要時再執行 $teach-impeccable。同時蒐集目標裝置、平台及使用情境的詳細資訊。

哪裡可以找到支援腳本或參考資料？

請查看此倉庫的 Files 標籤，尋找任何與 adapt 相關的額外資源、輔助腳本或巢狀參考資料。

adapt 適合純視覺設計工作嗎？

不適合，adapt 著重於響應式與適應性介面的實務前端實作，而非僅限視覺設計。