Communitygithub.com

Nextora 設計系統

為 Nextora 父主題及其子主題管理顏色、字體、間距代碼、樣式變化以及可選的訪客色彩/字體切換器。當請求提及調色盤、顏色角色、預設代碼、字體系列或字體預設、theme.json 設定、Tailwind @theme 別名、CSS 自訂屬性、樣式變化、「遵循調色盤」、「必須隨訪客選擇切換」、「範圍區塊顏色」或新子主題的外觀時使用此技能。

Nextora 設計系統 是什麼?

此技能定義了 Nextora 主題套件中所有外觀元素的唯一權威來源,涵蓋調色盤、排版、間距代碼、樣式變化及訪客顏色/字體切換器。所有子主題、區塊、模板和樣式都必須參照此設計系統,以確保一致性。 它支援多種平台,包括 WordPress (透過 theme.json、style variations) 和 Tailwind CSS (透過 @theme 別名)。其核心運作方式包含一系列嚴格規則:透過預設代碼 (preset slug) 以插件方式進行新增與修改,而非覆蓋父主題的設定;排版透過特定的 CSS 自訂屬性角色 (`--nextora-font-body` 等) 進行路由;範圍顏色以預設代碼儲存,並在輸出時解析為 CSS 變數;訪客色彩切換器受功能開關 (`NEXTORA_COLOR_SCHEME_SWITCHER`) 嚴格控制,子主題僅貢獻資料而非程式碼。 開發者應遵循其定義的工作流程,從 theme.json 等來源解析目標主題的實際外觀來源,根據需求選擇正確的機制(如原生區塊支援或 theme.json style variation),並遵守所有硬性限制,例如不硬編碼品牌色盤、不實作切換器、不修改父主題等。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/miketropi/nextora-skills/tree/main/skills/nextora-design-system

在你喜歡的 AI 中提問

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

說明文件

Nextora 設計系統 是做什麼的?

此套件中外觀的單一權威來源。子主題程式碼、區塊程式碼、範本和樣式都必須參照此處的調色盤、排版、代碼、樣式變化和切換器。對於任何新子主題,請將此技能與 nextora-child-themes 一起載入;對於任何重新設計樣式或新的區塊,則與 nextora-gutenberg-blocks 一起載入。

首先載入這些參考資料

檔案用途
references/presets-and-switching.md規範性預設身分、角色變數、作用域色彩儲存與 PHP 解析、兩種樣式機制、功能閘門、子主題貢獻、發現/合併規則、scheme-switcher.json 語義、執行時期優先級、新子主題 :root 角色預設值,以及反聲明列表。
../nextora-ecosystem/references/source-map.md來源與根目錄解析詞彙。
../nextora-ecosystem/references/quality-gates.md閘門以及共享的下游驗收配方(§8)。

參考資料中引用的數值僅為錨點,非當前資料。在編輯前,請重新讀取目標主題本身的 theme.json、CSS 進入點、styles/ 目錄和切換器檔案。

有序工作流程

1. 解析目標並識別即時外觀來源

識別父主題根目錄與作用中主題根目錄。然後按順序讀取:theme.json(調色盤、漸層、字體家族、尺寸、間距、styles、customTemplates)、隨附的 CSS 進入點(父主題為 resources/css/app.css,子主題為其自己的進入點)、styles/ 樹狀結構,以及 scheme-switcher.json。絕不要從技能、螢幕截圖或範例子主題取得調色盤值。

2. 決定正確的機制

需求使用
作者為區塊包裝器選擇顏色/排版/間距核心區塊 supports + get_block_wrapper_attributes()
區塊自身內部的顏色一個作用域屬性,儲存為預設代碼,輸出時解析為預設變數 (§5)
網站範圍內的替代外觀,由擁有者選擇並保留一個 theme.json 樣式變化(styles/*.json、styles/typography/*.json)
面向訪客的預覽選擇切換器,且只能在其閘門之後 (§6)
整個子主題的品牌預設值一個子主題調色盤/字體貢獻加上 :root 角色預設值 (§7)

優先使用原生支援。只有在全域樣式無法表達時才新增作用域覆蓋,並且絕不要在此機制之外發明第二套外觀系統。

3. 以插件方式並透過識別碼變更預設值

新增預設代碼;不要重新命名或重新指向已繼承內容正在使用的父主題預設代碼。每個表面讀取 var(--wp--preset--color--<slug>)、var(--wp--preset--gradient--<slug>) 或 var(--wp--preset--font-family--<slug>),因此在主題 CSS 中使用文字十六進位碼會使該表面退出調色盤變更和切換器。僅在 CSS 建置使用它們的地方鏡像 Tailwind @theme 別名,並驗證每個別名實際指向的內容,而不是從較舊的指南複製別名區塊——父主題的 --color-secondary 目前解析為 paragraph 預設。

4. 透過 Nextora 角色路由排版

正文、標題和按鈕排版透過 --nextora-font-body、--nextora-font-heading 和 --nextora-font-button 解析。theme.json 使用 var(--nextora-font-body);切換器會將這三個屬性內聯寫入 <html>,並附上具體的字體堆疊。直接讀取預設變數的表面將無法跟隨訪客字體變更。在 theme.json 中新增或變更字體家族(若非系統堆疊則附上 fontFace 資源),並在將其作為預設選擇提供之前載入。

5. 將作用域顏色儲存為預設,並在輸出時解析

遵循 blocks/advanced-icon/color-utils.ts(normalizeColorForStorage、colorValueForPicker)及其 PHP 對應函式(nextora_icon_resolve_color、nextora_icon_hex_to_preset_slug、nextora_ac_resolve_color)中現有的輔助模式:一個被選擇的預設會儲存其代碼;一個與調色盤項目相符的全不透明度十六進位碼會標準化為該項目的代碼;自訂顏色和部分透明度的 8 位十六進位碼保持原樣;漸層以相同方式保留預設身分。輸出時,儲存的代碼變成 var(--wp--preset--color--<slug>),以便調色盤變更能觸及表面,而 8 位十六進位碼則在 sanitize_hex_color() 之前處理。空值表示「主題預設值」且不輸出任何內容。重複使用真實的函式簽名;不要撰寫一個平行的解析器。請記住,顏色控制項不是清理器:儲存的 HTML 仍會通過 wp_kses_post()。

6. 尊重切換器閘門,並貢獻資料而非程式碼

訪客切換器僅在 NEXTORA_COLOR_SCHEME_SWITCHER 嚴格為 true 時才存在。除此之外,沒有有效負載、沒有腳本、沒有頁面主題 CSS、也沒有彈出視窗——並且不應編寫任何子主題端的替代品來填補這個缺口。子主題貢獻的是資料:styles/color-scheme/*.json、styles/font-preset/*.json,選擇性地 styles/*.json 作為捆綁的變化,以及一個可選的 scheme-switcher.json 允許列表。在編寫新子主題時,在其後載入的 CSS(參考資料 §7)中,在 :root 上設定子主題自己的預設角色,而不是固定一個預設字體。絕不要在子主題中新增切換器實作。

7. 在真實表面上驗證

使用目標主題自己的腳本(npm run build:css 或 npm run build)進行建置——絕不要編輯 assets/css/* 輸出,也絕不要聲明建置會重新產生 assets/js/scheme-switcher.js,後者是手動維護的,不在管線之中。然後應用 ../nextora-ecosystem/references/quality-gates.md 及其 §8 設計系統配方,以及 references/presets-and-switching.md §10 中的預設特定步驟。

硬性限制

  • 不要硬編碼品牌調色盤。數值來自目標主題的作用中預設值。
  • 不要將舊文件中的過時備用十六進位碼傳播到新的主題 CSS 中。
  • 不要重新實作切換器,也不要因為範例子主題看起來正確就聲明它能運作:該範例固定了自己的字體並添加了僅子主題的調色盤項目。
  • 不要承諾顏色 URL 參數可以覆蓋已解析的捆綁主題,或 Reset 可以清除網站編輯器樣式。
  • 不要從主題樣式表重新設計 wp-admin 介面;編輯器重置應保留在編輯器畫布內。
  • 不要默默地提高宣告的 WordPress/PHP 最低版本要求——而是公開此需求。
  • 在交付此工作時,不要修改父主題或範例子主題。

完成檢查

  • 目標主題已解析;每個在該主題自己的 theme.json/變體中引用的預設、字體、漸層和代碼都存在。
  • 已遵循步驟 2 中的機制表格;在足夠的情況下已使用原生支援。
  • 排版透過 --nextora-font-* 角色解析,並跟隨預設變更。
  • 作用域顏色在顏色與預設相符時儲存預設代碼,保留自訂和部分透明度數值為原樣,並透過預設變數渲染。
  • 切換器閘門已受到尊重;子主題貢獻僅為資料;任何新子主題的預設配對都透過角色在 :root 上宣告。
  • 樣式變化(持久性)和切換器(執行時期預覽)被描述並測試為不同的東西。
  • §8 驗收步驟已針對計算後樣式執行,或者未驗證的表面已明確報告。

邊界

僅限於 Markdown 指令和來源支援的參考資料:沒有執行時期腳本、產生器、複製的主題樹、套件管理或安裝自動化,也沒有對父主題或子主題來源的編輯。下游建置和瀏覽器驗證命令屬於目標主題,並列在 ../nextora-ecosystem/references/quality-gates.md 中。

Individual skills in this repo

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

miketropi/nextora-child-themes

Create, bootstrap or audit a child theme of the Nextora parent block theme — the style.css header with Template nextora, the functions.php load order, the single version constant kept in sync with the header, the front-end and editor-canvas asset pipeline with its parent handle dependencies, the child block registrar and inserter category, PHP/i18n conventions, and the optional feature-file layout. Use when a request names a Nextora child, a new child theme name or slug, a child theme header or version bump, child CSS/JS enqueueing, editor canvas styles, a child block folder or block category, porting Nextsaas conventions into a new child, or asks why child code cannot call the parent at file scope. Pair with nextora-design-system for any child that must follow palette or visitor font/colour switching.

miketropi/nextora-ecosystem

Entry point for work on the Nextora block-theme ecosystem — child themes, Gutenberg blocks, design presets and the visitor colour/font switcher, and template/part/pattern composition. Use when a request mentions Nextora or a Nextora child theme, when the task spans more than one of those areas, or when you need the source map and production quality gates for this ecosystem before writing code. Also use to decide which specialist skill a multi-part request needs.

miketropi/nextora-site-composition

Compose the surfaces of a Nextora or Nextora child block theme — HTML templates and template parts, PHP block patterns and their categories, page templates and the template hierarchy, front-page versus posts-index, filesystem patterns referenced from thin templates, core query/archive/search loops and explicit query context, header and footer ownership, and filesystem-versus-Site-Editor customisation. Use when a request asks for a landing page layout, a page template, an archive or search composition, a reusable pattern or section, a header/footer part, a query loop, or asks why a template file edit shows no change on the front end.

nextora-gutenberg-blocks

Build or change Gutenberg blocks in the Nextora parent theme or a Nextora child theme — block.json registration, typed attributes, native visual editing with RichText and media, InspectorControls settings panels, repeatable list editors with modal item editing, render.php output, view scripts, block style variations, and the esbuild block pipeline. Use when a request mentions a block, block.json, edit.tsx, index.tsx, render.php, ServerSideRender, InnerBlocks, a repeater or list editor, a modal item form, an inspector panel, a block category, or "add/restyle a section block" for Nextora.

相關技能