メニュー
Add or update app page headers and layout using PageHeader and PageLayout. Use when creating a new page, fixing inconsistent headers, or migrating Service Map / Kubernetes / dashboard pages to the shared layout.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/hyperdxio/hyperdx --skill page-layoutコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| name | page-layout |
| description | Add or update app page headers and layout using PageHeader and PageLayout. Use when creating a new page, fixing inconsistent headers, or migrating Service Map / Kubernetes / dashboard pages to the shared layout. |
Read agent_docs/page_layout.md before changing any page shell. It is the source of truth for API, examples, and migration steps.
PageLayout with title, optional leading / actions, and content — only when the sticky bar is text-only (no inputs in that bar).PageHeader / PageLayout title. The sticky row is for controls only. Put where you are in the breadcrumbs prop (renders inside the sticky PageHeader, above the toolbar) when the page lives under a hierarchy (e.g. Dashboards → Kubernetes); otherwise you may omit breadcrumbs and rely on <Head><title>, the sidebar active item, and the empty state copy.title="Kubernetes Dashboard" and breadcrumbs that repeat the same page name.<Text size="xl"> as the page title in the body.actions, right-aligned. Context pickers go in leading (no title when those slots are used for inputs). Breadcrumbs use the breadcrumbs prop so they stay in the sticky header, not in content.fillViewport on PageLayout.agent_docs/page_layout.md.PageHeader / PageLayout (e.g. AlertsPage.tsx, DBServiceMapPage.tsx, KubernetesDashboardPage.tsx).@/components/PageLayout or @/components/PageHeader.data-testid on the page root for E2E tests.yarn lint:fix in the repo root when done.packages/app/tests/e2e/.import { PageHeader } from '@/components/PageHeader';
import { PageLayout } from '@/components/PageLayout';
| Page | File | Pattern |
|---|---|---|
| List page | AlertsPage.tsx | PageHeader + title + Container (no inputs in header) |
| Tool page with inputs + hierarchy | KubernetesDashboardPage.tsx, ClickhousePage.tsx | PageLayout without title; breadcrumbs + leading + actions in one sticky header |
| Tool page (top-level) | DBServiceMapPage.tsx | PageLayout without title; leading / actions only; no duplicate breadcrumb unless you add a real hierarchy |
| Custom toolbar | SessionsPage.tsx | PageLayout + header = custom PageHeader children (single-row inputs, no title) |
| Custom title | TeamPage.tsx | PageHeader with children only |
Use the correct Tabler icon for each HyperDX data source kind (Log, Trace, Session, Metric, PromQL). Use whenever adding or changing an icon that represents a source kind or a signal type — source selectors, side panels, cross-source actions like "View Trace", tabs, badges, breadcrumbs, or anywhere a log/trace/session/metric is depicted.
Writes end-to-end tests code using Playwright browser automation.
Refactor a large React component file into a directory of smaller files. Use when the user asks to break up, split, or refactor a big component file.
SOC 職業分類に基づく
