·nebula-page-stories
</>

nebula-page-stories

建立範例頁面故事,將多個元件組合成真實的佈局。在建立展示元件如何協同工作的頁面級 Storybook 故事時使用。涵蓋 PageLayout 的使用、組合規則、Spacer 間距以及單層吊掛。

7安裝·1熱度·@acquia

安裝

$npx skills add https://github.com/acquia/nebula --skill nebula-page-stories

如何安裝 nebula-page-stories

透過命令列快速安裝 nebula-page-stories AI 技能到你的開發環境

  1. 開啟終端機: 開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 執行安裝指令: 複製並執行以下指令:npx skills add https://github.com/acquia/nebula --skill nebula-page-stories
  3. 驗證安裝: 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

來源:acquia/nebula。

SKILL.md

查看原文

Page stories showcase how components work together in realistic layouts. They should closely mirror what end users will experience in Drupal Canvas, so avoid patterns that won't be available in Canvas.

Use single-story hoisting for cleaner navigation. Page stories should use Storybook's single-story hoisting feature to avoid unnecessary nesting in the sidebar. This is achieved by:

This results in a flat sidebar entry "Product: Detail" under "Example pages", rather than a nested "Product: Detail" → "Default" structure.

建立範例頁面故事,將多個元件組合成真實的佈局。在建立展示元件如何協同工作的頁面級 Storybook 故事時使用。涵蓋 PageLayout 的使用、組合規則、Spacer 間距以及單層吊掛。 來源:acquia/nebula。

可引用資訊

為搜尋與 AI 引用準備的穩定欄位與指令。

安裝指令
npx skills add https://github.com/acquia/nebula --skill nebula-page-stories
分類
</>開發工具
認證
收錄時間
2026-02-22
更新時間
2026-03-10

Browse more skills from acquia/nebula

快速解答

什麼是 nebula-page-stories?

建立範例頁面故事,將多個元件組合成真實的佈局。在建立展示元件如何協同工作的頁面級 Storybook 故事時使用。涵蓋 PageLayout 的使用、組合規則、Spacer 間距以及單層吊掛。 來源:acquia/nebula。

如何安裝 nebula-page-stories?

開啟你的終端機或命令列工具(如 Terminal、iTerm、Windows Terminal 等) 複製並執行以下指令:npx skills add https://github.com/acquia/nebula --skill nebula-page-stories 安裝完成後,技能將自動設定到你的 AI 程式設計環境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

這個 Skill 的原始碼在哪?

https://github.com/acquia/nebula