Skip to main content
Designkufu

smarthr-ui-page-heading

PageHeadingは、画面全体の最上位見出しを表示するためのコンポーネントです。h1要素として画面タイトルを示すときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-page-heading
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-page-heading/SKILL.md -o .claude/skills/smarthr-ui-page-heading.md

Drops the SKILL.md into .claude/skills/smarthr-ui-page-heading.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

画面全体の最上位見出しを表示するためのコンポーネントです。h1要素として画面タイトルを示すときに使います。

import

import { PageHeading } from 'smarthr-ui'

Props

Props 名 デフォルト値 必須 説明
size "L" | "XL" | "XXL" 'XL' - テキストのサイズ
visuallyHidden boolean - - 視覚的に非表示にするフラグ
autoPageTitle boolean - - title要素の自動生成フラグ Next.js 環境ではこの値にかかわらずtitleは自動生成されません。metadataなどの方法を利用してください。
pageTitle string - - title要素のprefix
pageTitleSuffix string - - title要素のsuffix

実装ルール

PageHeading に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

使い方チェックリスト

使用上の注意 > 画面ごとに1度しか使わない

  • [must] PageHeading は画面のタイトルとして画面ごとに 1 度しか使わない