一種極簡的 CSS 哲學和技能集，旨在透過利用原生瀏覽器能力和現代邏輯屬性來創建高效、有韌性的樣式。
安裝與下載
1. ClawHub CLI
從來源直接安裝技能的最快方式。
npx clawhub@latest install tiny-css
2. 手動安裝
將技能資料夾複製到以下位置之一
~/.openclaw/skills/ <project>/skills/ 優先級：工作區 > 本地 > 內建
3. 提示詞安裝
將此提示詞複製到 OpenClaw 即可自動安裝。
請幫我使用 Clawhub 安裝 tiny-css。如果尚未安裝 Clawhub，請先安裝（npm i -g clawhub）。
想要直接下載？
取得包含原生技能檔案的ZIP壓縮檔。
什麼是 tiny-css？
tiny-css 是 Openclaw Skills 中的一種專門方法，專為重視速度、性能和簡單性的開發者設計。它摒棄了沉重的 CSS 重置和複雜的設計系統，轉而提倡「信任瀏覽器」的理念。這項技能針對個人網站、原型和落地頁進行了優化，在這些專案中，保持程式碼庫精簡是首要任務。
透過利用 color-scheme、邏輯屬性和原生文本換行行為等現代特性，tiny-css 以極少量的程式碼確保您的專案具有可存取性、響應性且國際化。它是臃腫框架的完美對立面，專注於韌性和使用者偏好。
tiny-css 應用場景
- 構建輕量級的個人作品集和部落格。
- 快速原型化 UI 組件，無需完整設計系統的開銷。
- 為行銷活動創建高性能的落地頁。
- 使用邏輯屬性和系統字體現代化遺留的小規模專案。
- 開發尊重使用者定義系統設置的可存取 Web 內容。
tiny-css 運作原理
- 分析專案範圍，確保其符合該技能的極簡標準。
- 為 color-scheme 和系統排版應用根級配置，以利用瀏覽器預設設置。
- 使用 balance 和 pretty 值實現文本換行邏輯，以優化可讀性。
- 將物理屬性（margin-left, top）替換為邏輯屬性（margin-inline, block），以確保跨語言支援。
- 集成用於可存取性的媒體查詢，包括高對比度和減少運動支援。
- 生成一個高度優化的單個 CSS 文件，其核心佈局功能無需 JavaScript。
tiny-css 設定指南
要使用 Openclaw Skills 實作 tiny-css，您可以使用以下核心模板初始化樣式表：
# Navigate to your project directory
touch style.css
將極簡基礎添加到您的專案中：
:root {
color-scheme: light dark;
accent-color: #0066cc;
font-family: system-ui;
}
:where(img, svg, video, iframe) {
max-inline-size: 100%;
block-size: auto;
}
tiny-css 資料結構與分類體系
tiny-css 技能遵循精簡的數據結構，以保持高性能和低維護。它按如下方式組織樣式數據：
| Component | Implementation Strategy |
|---|---|
| 全局變數 | 在 :root 中使用原生 CSS 變數定義強調色。 |
| 佈局 | 由邏輯屬性（inline-size, padding-block）驅動以保證韌性。 |
| 排版 | 系統字體和原生 text-wrap 屬性實現零載入開銷。 |
| 資產 | 使用 currentColor 的 SVGs 以繼承上下文而無需額外類別。 |
| 可存取性 | 媒體查詢驅動的運動和強制顏色偏好。 |
tiny-css 進階特性
- 基於使用者運動偏好的條件平滑滾動。
- 使用 color-scheme 屬性自動集成系統級深色模式。
- 為 Windows 高對比度可見性提供 Forced-colors 模式支援。
- 使用 CSS 邏輯屬性實現的國際化就緒佈局。
- 減少瀏覽器重新計算時間的零重置方法論。
SKILL.md
加載中
Openclaw 相關技能
Aptos TypeScript SDK Orchestrator
一個用於將官方 Aptos TypeScript SDK 整合到全端去中心化應用程式中的綜合編排器。
精選*
