# Design Pattern Guidelines

> Guides correct implementation of SmartHR product page layout patterns. Use when implementing collection (table/list) pages, single-object detail pages, or any page that follows the SmartHR design system layout conventions. Covers spacing, button variants, pagination placement, テーブル操作エリア/一時操作エリアの配置ルール, and DoAndDont avoid-patterns to prevent common mistakes.

- Skill: `kufu/design-pattern-guidelines` (Agent Skill, multi-file: 24 files)
- Install (CLI): `npx skillmds@latest add kufu/design-pattern-guidelines`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kufu/design-pattern-guidelines/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: kufu (https://skillmd.com/u/kufu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kufu/design-pattern-guidelines

---


# SmartHR デザインパターン ガイド

SmartHRプロダクトのページレイアウトパターンを正しく実装するためのガイド。

**重要**: デザインパターンに関する実装は、事前知識のみで答えず、必ず下記の該当ドキュメントを実際に読んでから実装すること。余白トークン・Button variant・ページネーション位置・テーブル操作エリアの構造は頻繁に更新される。また、`<DoAndDont type="dont">` に記載されたアンチパターンには、一見正しく見えても誤りのある実装が含まれているため、必ず確認すること。

## どのパターンを実装するか迷っているとき

パターンが未確定なら、**まず [pattern-selector.md](pattern-selector.md) を読む**こと。UI要件からパターンを特定してから次のステップに進む。

## 対象パターンが分かっているとき

**`patterns/<pattern-name>.mdx` を必ず読んでから**実装すること。
どのファイルを読むべきかは **[pattern-selector.md](pattern-selector.md)** を参照すること（ページレイアウト・テーブル/リスト・ダイアログ・フォーム・権限など全パターンの対応表がある）。

## コンポーネントの props を必ず確認する

デザインパターンの実装例に登場するコンポーネントを使う際は、**`component-guidelines` スキルを併用して props・型・使用ルールを確認してから実装すること**。

パターンドキュメントはレイアウト構造を示すものであり、各コンポーネントの正確な prop 値（型の選択肢・デフォルト値・必須フラグなど）は記載されていない。事前知識で prop 値を推測すると、存在しない値を渡す誤りが生じる（例: `StatusLabel` の `type` に `'inactive'` や `'success'` を渡すなど）。

### 手順

1. デザインパターンドキュメント（`patterns/*.mdx`）で実装の全体構造を把握する
2. 実装例に含まれる smarthr-ui コンポーネントについて、`component-guidelines` スキルの `components/<ComponentName>.md` を読んで props を確認する
3. 確認した props に基づいて実装する

## MDXの読み方

各パターンファイルは以下を含む:
- **実装例（`tsx editable` コードブロック）**: 正しい構造・コンポーネント・propsの組み合わせ。そのまま参考にすること。
- **`<DoAndDont type="dont">` ブロック**: やってはいけない実装。Astroコンポーネントの記法だが、内容は必ず読み、避けること。
- **散文のルール**: 余白・構造・命名に関する制約。