frontend-designer

フロントエンドデザイナー

モダンな React、TailwindCSS v4、shadcn/ui を使って、本番環境向けのフロントエンドインターフェースを構築します。プロジェクトのスキャフォールディングから、レンダリング済み UI の監査まで、6 つのモードを備えています。

入力： $ARGUMENTS — モードキーワードと対象、自然言語での UI の説明、またはファイルパス。

---

標準用語

用語	意味	該当しない用語
サーバーコンポーネント	サーバー上でレンダリングされる React コンポーネント。Next.js／Remix App Router ではデフォルトです	「SSR コンポーネント」
クライアントコンポーネント	"use client" ディレクティブを持つ React コンポーネント。ブラウザー上で実行されます	「CSR コンポーネント」
デザイントークン	デザイン上の決定事項（色、余白、フォント）を保持する CSS カスタムプロパティ	「CSS 変数」（汎用的すぎます）
テーマ	@theme {} で設定するデザイントークン一式	「スキン」、「パレット」
コンポーネント	再利用可能な UI の構成要素（React コンポーネントとスタイル）	「ウィジェット」、「モジュール」
プリミティブ	スタイルを持たず、動作を提供する Radix UI のベースコンポーネント	「ベースコンポーネント」
レジストリ	shadcn/ui コンポーネントの配布エンドポイント（ローカルまたはリモート）	「パッケージ」、「ライブラリ」
コンテナークエリー	コンポーネント単位のレスポンシブデザインに使う CSS @container ルール	「メディアクエリー」（ページ単位）
アクション	React 19 のサーバーアクション。フォーム経由でサーバー側で実行される非同期関数	「API 呼び出し」、「ハンドラー」
スキャフォールド	フルスタック構成で新規プロジェクトを作成すること	「ブートストラップ」、「セットアップ」
リファクタリング	既存のフロントエンドコードを最新のベストプラクティスに合わせてモダン化すること	「書き直し」
監査	フロントエンドコードベースの品質とパターンを読み取り専用で分析すること	「レビュー」、「スキャン」
ユーティリティクラス	1 つの CSS 宣言に対応する Tailwind CSS クラス	「ヘルパークラス」
論理プロパティ	RTL 向けに left/right の代わりに start/end を使う CSS プロパティ	「方向プロパティ」
テクスチャヒーリング	等幅フォントのグリフ間隔を調整する Monaspace の手法	—

---

振り分け

$ARGUMENTS を適切なモードに振り分けます。

$ARGUMENTS のパターン	モード	開始位置
scaffold <name> / init <name>	スキャフォールド	モード A
component <name> / create <name>	コンポーネント	モード B
page <name> / view <name> / screen <name>	ページ／ビュー	モード F
theme / theme <path> / tokens / tokens <path>	テーマ	モード C
refactor <path> / style <path>	リファクタリング	モード D
audit / audit <path>	監査	モード E
自然言語による UI の説明（「サイドバーを作成する」、「カードをデザインする」など）	自動：コンポーネント	モード B
自然言語によるページ／ビューの説明（「ランディングページを作成する」、「ダッシュボードをデザインする」など）	自動：ページ／ビュー	モード F
既存の .tsx／.jsx／.css ファイルまたはディレクトリのパス	自動：リファクタリング	モード D
エラーメッセージ／「動作しない」／「壊れている」	自動：監査	モード E
「バックエンド」／「API」／「データベース」／「DevOps」／テスト／状態管理／ルーティング／ビルドツール	対応不可	関連するスキルに案内
空欄	ギャラリー	使用例とともにモードを表示

分類ゲート

曖昧な入力は、振り分ける前に意図を確認します。

手がかり	振り分け先
エラー、動作不良、バグ、クラッシュ、「動かない」	監査
テストランナー、状態管理ライブラリ、ルーター、バンドラー、パッケージマネージャー、CI	対応不可、または別のものに案内
アップグレード、モダン化、移行、更新、変換	リファクタリング
色、ダークモード、トークン、パレット、ブランディング	テーマ
ランディングページ、ダッシュボード、設定、チェックアウト、プロフィール、アプリシェル、ルート、画面	ページ／ビュー
「構築」、「作成」、「デザイン」、「追加」、「新規」＋コンポーネント名	コンポーネント
セットアップ、初期化、開始、新規プロジェクト	スキャフォールド
複数の手がかりが混在	希望するモードをユーザーに尋ねる

ライブドキュメント（任意）

次の場合に限り、ライブドキュメントを参照してください：ユーザーから予期しない動作の報告があった場合、参照資料にプレリリース版 API の記載がある場合、または同梱の参照資料にない機能についてユーザーから質問された場合。

1. Context7 — 「tailwindcss」、「shadcn-ui」、または「react」に対して resolve-library-id を実行し、その後 query-docs を実行します。
2. WebSearch — 特定のトピックについて site:tailwindcss.com、site:ui.shadcn.com、または site:react.dev を検索します。
3. ライブドキュメントと同梱の参照資料の内容が矛盾する場合は、ライブドキュメントを優先します。

---

モード A：スキャフォールド

目標： 最新のフロントエンドスタックをすべて備えた新しいプロジェクトを作成します。

読み込むファイル： references/tailwind-v4.md、references/vite-config.md、references/shadcn-patterns.md、references/typography.md、references/aesthetic-guide.md

A.1 フレームワークの選択

質問するか、状況から判断します。

フレームワーク	使用する場面
Vite + React	SPA、SSR 不要、最速でセットアップしたい場合
Next.js App Router	SSR/SSG、Server Components、本番環境向けのウェブアプリ
Remix	フルスタック、ネストされたルーティング、プログレッシブエンハンスメント

ユーザーから特に指定がない限り、Vite + React をデフォルトとして使用します。

A.2 Tailwind v4 のセットアップ

CSS ファーストの設定を使用します。tailwind.config.js は不要です。

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  --font-display: "Your Display Font", serif;
  --font-body: "Your Body Font", sans-serif;
  --font-mono: "Monaspace Neon", monospace;
}

A.3 shadcn/ui の初期化

npx shadcn@latest init

プロジェクト構造に合わせて components.json を設定します。基本コンポーネントとして button、input、card、dialog、dropdown-menu、toast をインストールします。

A.4 タイポグラフィ

• コード／等幅フォント： Monaspace Neon（またはデザインの方向性に応じて Argon、Krypton、Radon、Xenon）
• ディスプレイ： 独自性と個性があるものにします。Inter、Roboto、Arial、system-ui は使用しません。
• 本文： すっきりと読みやすいものを選び、ディスプレイフォントと組み合わせてコントラストを付けます。
• @font-face の設定と流動的な文字サイズのスケールについては、references/typography.md を読み込みます。

A.5 デザインの方向性

ドメイン適合性の確認とデザイン思考の演習を実施します（下記の「デザインの方向性」セクションを参照）。UI コードを書く前に、適切な方向性を決定します。

A.6 ファイル構造

src/
  components/ui/     # shadcn/ui components (managed by CLI)
  components/        # Custom project components
  lib/               # Utilities, helpers
  hooks/             # Custom React hooks
  styles/            # Global CSS, @theme, @font-face
  app/ or pages/     # Routes (framework-dependent)

A.7 完了

スキャフォールドした UI の完成を宣言する前に、ビジュアル受け入れゲートを実行します。

---

モード B：コンポーネント

目標： 単一のコンポーネントを、プロダクション品質で設計・構築します。

読み込むファイル： references/react-19.md、references/shadcn-patterns.md、references/modern-css.md 条件付き： ビジュアル、ランディングページ、ヒーロー、マーケティング向けのコンポーネントでは、references/aesthetic-guide.md を読み込みます。ユーティリティコンポーネント、フォーム、データテーブルでは読み込みません。

B.1 コンポーネントの分類

コンテキスト	デフォルト	"use client" が必要か
Next.js／Remix App Router	Server Component	フック、イベントハンドラー、またはブラウザー API を使用する場合のみ
Vite + React	Client Component	不要 — すべてのコンポーネントがクライアント側のため、"use client" は不要です

複合コンポーネント（例：<Tabs>、<Accordion>）では、サーバー側のラッパーとクライアント側のインタラクティブなパーツを分けます。

B.2 デザインの意図

構築する前に、以下を確認します。

• 目的： どのような問題を解決するものですか？誰が使用しますか？
• インタラクション： クリック、ホバー、ドラッグ、キーボード、タッチのどれですか？
• レスポンシブな動作： コンテナーのサイズに応じて、どのように適応しますか？
• アクセシビリティ： 必要な ARIA ロールやキーボード操作のパターンは何ですか？

B.3 プリミティブの選択

shadcn/ui に該当するコンポーネント、または近いベースコンポーネントがあるか確認します。インタラクティブなコンポーネント（ダイアログ、ドロップダウン、ポップオーバー、ツールチップ、タブ、アコーディオン、トグル）には、shadcn/ui 経由で Radix UI プリミティブを使用します。ゼロから構築してはいけません。

CLI コマンドとカスタマイズのパターンについては、references/shadcn-patterns.md を読み込みます。

B.4 実装

• Tailwind v4 のユーティリティクラスと @theme {} の CSS カスタムプロパティを使ってスタイルを設定します。
• レスポンシブ対応では、メディアクエリではなく、コンポーネント単位の適応に @container クエリを使用します。
• モダン CSS：親要素に基づくスタイル設定には :has() を、状態変化にはビュー遷移を使用します。
• コンポーネントのファイルは目的を絞った内容にし、フックやユーティリティは別のファイルに切り出します。

B.5 アクセシビリティ

すべてのインタラクティブコンポーネントで必須です。

• キーボード操作（適宜、Tab、Enter、Escape、矢印キーに対応）
• ARIA 属性（ロール、ラベル、説明、ライブリージョン）
• フォーカス管理（モーダル内でフォーカスをトラップし、閉じたときに元に戻す）
• 色のコントラスト：WCAG AA の最低基準（テキストは 4.5:1、大きなテキスト／UI は 3:1）

B.6 完了

レンダリングされたコンポーネントやコンポーネントのデモには、必ずビジュアル受け入れゲートを実行してください。

---

モード C：テーマ

目標： プロジェクトのデザイントークンシステムを設定または再設定します。

読み込み： references/tailwind-v4.md、references/modern-css.md、references/typography.md

C.1 サブディスパッチ

$ARGUMENTS に tokens が含まれている場合は、トークン抽出ワークフローを実行します。

1. .tsx、.jsx、.css ファイル全体から、ハードコードされた色の値（hex、rgb、hsl）を grep します
2. Tailwind ユーティリティを使用していない、ハードコードされたスペーシング／フォントの値を grep します
3. 3 つのレイヤーに整理します。primitive（生の値）→ semantic（用途に基づく名前）→ component（スコープを限定したオーバーライド）
4. 整理されたカスタムプロパティを含む @theme {} ブロックを生成します

C.2 カラーシステム

知覚的に均一な色操作には oklch を使用します。

@theme {
  --color-primary: oklch(0.6 0.2 260);
  --color-primary-light: color-mix(in oklch, var(--color-primary) 70%, white);
  --color-primary-dark: color-mix(in oklch, var(--color-primary) 70%, black);
}

contrast-color() は実験的機能です — 対応するのは Firefox 146+ と Safari TP のみです。手動でフォールバックを用意してください。

/* Fallback for contrast-color() */
--color-on-primary: oklch(1 0 0); /* manually chosen for contrast */

C.3 ダークモード

Tailwind v4 での CSS カスタムプロパティ戦略：

@custom-variant dark (&:where(.dark, .dark *));

.dark セレクターでトークンをオーバーライドします。

.dark {
  --color-surface: oklch(0.15 0 0);
  --color-text: oklch(0.95 0 0);
}

C.4 タイポグラフィのスケール

clamp() を使用した流動的なタイプスケール：

@theme {
  --text-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-lg: clamp(1.125rem, 0.75vw + 1rem, 1.25rem);
  --text-xl: clamp(1.25rem, 1vw + 1.125rem, 1.5rem);
}

C.5 RTL への対応準備

方向性を持つプロパティを確認し、論理プロパティに変換します。

物理プロパティ	論理プロパティ
margin-left	margin-inline-start
padding-right	padding-inline-end
text-align: left	text-align: start
float: right	float: inline-end

---

モード D：リファクタリング

目標： 既存のフロントエンドコードを最新のベストプラクティスに沿って刷新します。

読み込み： references/tailwind-v4.md、references/react-19.md、references/modern-css.md、references/anti-patterns.md

D.1 事前スキャンのチェックリスト

変更を加える前に、プロジェクトをスキャンします。

• tailwind.config.js または tailwind.config.ts を Glob で検索 — v3 のレガシー設定ですか？
• .tsx／.jsx ファイル全体で "use client" の数を grep
• @media と @container の比率を grep — コンポーネントのレスポンシブ対応パターンを確認
• CSS カスタムプロパティ以外にある、ハードコードされた hex／rgb／hsl の色の値を grep
• font-family 宣言を grep — 特徴的なフォントを使用していますか、それともデフォルトですか？
• package.json で React、Tailwind、Vite のバージョンを確認

D.2 移行パターン

移行元	移行先	参照先
tailwind.config.js	CSS ファーストの @import "tailwindcss" + @theme {}	references/tailwind-v4.md
コンポーネントのサイズ指定に使われている @media	@container クエリ	references/modern-css.md
手動で実装されたドロップダウン／モーダル	shadcn/ui 経由の Radix プリミティブ	references/shadcn-patterns.md
ハードコードされた色	@theme {} 内のデザイントークン	モード C
クラスコンポーネント	関数コンポーネント + フック	references/react-19.md
過剰な "use client"	可能な場合は Server Components（Next.js／Remix のみ）	references/react-19.md

D.3 ワークフロー

1. ファイルごとの移行計画を提示 → ユーザー承認ゲート
2. 一度に 1 ファイルずつ変更を実行
3. ファイルごとに検証：プロジェクトのチェックが通り、ビジュアル受け入れゲートでリグレッションがないことを確認
4. 事前スキャンのチェックリストを再実行し、改善を確認

---

モード E：監査

目標： フロントエンドのコードベース品質を読み取り専用で分析します。コードは決して変更しません。

読み込み： references/anti-patterns.md

E.1 事前スキャン

モード D と同じチェックリスト（§D.1）を実行します。

E.2 スコアの評価項目

評価項目	確認する内容
スタックの新しさ	Tailwind v4 の CSS ファーストですか？ React 19 ですか？ 最新の shadcn/ui ですか？
コンポーネントのパターン	サーバーとクライアントを分離していますか？ Radix プリミティブを使用していますか？ 複合コンポーネントを使用していますか？
デザイントークン	@theme を使用していますか？ ハードコードされた値はありますか？ トークンのレイヤーはありますか？
CSS のモダンさ	コンテナークエリーを使用していますか？ :has() を使用していますか？ 論理プロパティを使用していますか？ @supports によるガードはありますか？
タイポグラフィ	個性のあるフォントを使用していますか？ コードに Monaspace を使用していますか？ 流動的な文字サイズのスケールを使用していますか？
アクセシビリティ	ARIA 属性を使用していますか？ キーボードで操作できますか？ フォーカスを管理していますか？ コントラスト比は適切ですか？
視覚的な検証	スクリーンショットやブラウザーで確認しましたか？ モバイル／デスクトップの状態を確認しましたか？ はみ出し、重なり、フォーカス、動きの軽減を確認しましたか？

E.3 レポート形式

## Frontend Audit Report

### Critical (must fix)
- [finding with evidence]

### Warning (should fix)
- [finding with evidence]

### Suggestion (nice to have)
- [finding with evidence]

### Strengths
- [well-implemented patterns]

### Recommended Actions
- [action] → use `/frontend-designer refactor <path>`
- [action] → use `/frontend-designer theme`

---

Mode F：ページ／ビュー

目標： ページ、ルート、画面、ダッシュボード、ランディングページ、またはアプリのシェル全体を設計し、構築します。

読み込むもの： references/react-19.md、references/shadcn-patterns.md、references/modern-css.md、references/typography.md 条件に応じて読み込むもの： マーケティング、ヒーロー、エディトリアル、ポートフォリオ、ゲーム、またはブランド要素の強いページでは、references/aesthetic-guide.md を読み込みます。

F.1 ページのコンテキストを分類する

構築前に、以下の情報を集めます。

• ドメイン： SaaS／管理／運用／ドキュメント／金融、またはマーケティング／ポートフォリオ／エディトリアル／ゲーム／製品紹介
• ユーザーの目的： 主なアクション、繰り返し行うワークフロー、一覧・比較の必要性、意思決定のポイント
• 構成： レイアウトのシェル、ルートのスロット、ナビゲーション、レスポンシブのブレークポイント、読み込み中／空／エラーの状態
• 統合： フレームワークのルーティング規約、サーバー／クライアントの境界、データのプレースホルダー、コンポーネントの再利用

F.2 設計して実装する

1. 美的方向性のドメイン適合ゲートを実行します。
2. カスタム UI を作成する前に、shadcn/ui のプリミティブと既存のプロジェクトコンポーネントを組み合わせます。
3. ページレベルのレイアウトにはメディアクエリーを、コンポーネント内部のレスポンシブ対応にはコンテナークエリーを使用します。
4. データを表示するページでは、意味のある読み込み中、空、エラーの状態を含めます。
5. 完了を宣言する前に、ビジュアル受け入れゲートを実行します。

---

ビジュアル受け入れゲート

レンダリング対象がある場合は、Scaffold、Component、Page/View、Refactor の各出力で実行します。

1. 可能であれば、プロジェクトの開発サーバーを起動するか、起動済みのものを使用します。ライブでのレンダリングを確認できなかった場合は、その理由を述べます。
2. モバイル幅とデスクトップ幅をそれぞれ 1 つずつ確認します。
3. 変更した画面の視覚的な証拠を取得するか、その内容を説明します。
4. 不自然な重なり、テキストの切り詰め、横方向のはみ出し、レイアウトの飛び、判読できない状態がないことを確認します。
5. キーボードのフォーカス順序、視認できるフォーカスインジケーター、該当する場合は Escape／矢印キーの動作、アニメーションの動きの軽減を確認します。
6. WCAG AA のコントラストを確認します。通常のテキストは 4.5:1、大きなテキストと UI インジケーターは 3:1 です。
7. 利用可能な場合は、プロジェクトに関連するスモークテストまたはビルドコマンドを実行します。

---

美的方向性

ビジュアルコンポーネントやページを作成する前に、分野と対象ユーザーに適した方向性を選びます。

分野	標準的な方向性
SaaS、CRM、管理、金融、運用、ドキュメント	控えめ、情報密度が高い、一覧性が高い、予測しやすい
マーケティング、ポートフォリオ、エディトリアル、ブランド、製品紹介	表現力豊か、アセット主導、印象に残る
ゲーム、おもちゃ、実験、アートツール	遊び心がある、没入感がある、インタラクティブ性が高い

デザイン思考：

1. 目的 — このインターフェースはどのような問題を解決しますか？誰が使いますか？
2. トーン — 分野に適したトーンを選びます。極端な美的表現を使うのは、製品のコンテキストがそれを支える場合に限ります
3. 制約 — フレームワーク、パフォーマンス予算、アクセシビリティ要件
4. 差別化 — 何がこれを忘れられないものにしますか？人々の記憶に残る、たったひとつのことは何ですか？

凡庸さを避けるルール：

• Inter、Roboto、Arial、システムフォントをデフォルトで使わないでください
• 白い背景に紫のグラデーションを使わないでください
• どの AI が作ったものでも同じに見える、ありきたりなレイアウトを作らないでください
• 生成ごとに同じ美的方向性に収束させないでください。テーマ、フォント、配色を変化させてください
• 実装の複雑さをビジョンに合わせてください。マキシマリズムには手の込んだコードが必要で、ミニマリズムには精密さが必要です

美的表現の全カタログ、色彩理論、モーションデザイン、空間構成については、references/aesthetic-guide.md を読み込んでください。

---

対象範囲の境界

優先されるもの： frontend-design スキル。このスキルの美的ガイダンスがすべてに優先されます。

対象外：

• バックエンド API、データベース設計、DevOps 設定
• テストフレームワーク（Jest、Vitest）— 標準的なテストパターンを使用してください
• 状態管理ライブラリ（Zustand、Redux、Jotai）— プロジェクトのニーズに応じて選択してください
• ルーティング（React Router、TanStack Router）— フレームワーク固有のドキュメントを参照してください
• SSR フレームワーク全体の設定（Next.js、React 19 のパターンを超える Remix の設定）
• ビルドツール、パッケージ管理 — javascript-conventions に従ってください

---

リファレンスファイル一覧

関連するモードの作業中に必要に応じて読み込みます。すべてを一度に読み込まないでください。

ファイル	内容	読み込むタイミング
references/tailwind-v4.md	CSS ファーストの設定、@theme、@import、Oxide エンジン、ダークモード、コンテナクエリ、v3→v4 の移行	Scaffold、Theme、Refactor
references/shadcn-patterns.md	CLI コマンド、components.json、RTL、レジストリ、Radix プリミティブ、複合コンポーネント、フォーム	Scaffold、Component
references/react-19.md	サーバーとクライアントの判断ツリー（フレームワークに依存）、Actions、useActionState、use()、Suspense	Component、Refactor
references/modern-css.md	コンテナクエリ、:has()、@scope、ビュー遷移、スクロール駆動アニメーション、アンカーポジショニング、color-mix()、@layer	Component、Theme、Refactor
references/typography.md	Monaspace スーパーファミリー、可変フォント、@font-face、フォントの組み合わせ、clamp() を使った流動的な文字サイズ	Scaffold、Theme、Component（ビジュアル）
references/aesthetic-guide.md	デザイン思考、美的表現のカタログ、色彩理論、モーション、空間構成、凡庸さを避けるルール	Component（ビジュアル／ランディング／ヒーロー）、Scaffold
references/vite-config.md	現行の Vite 設定、プラグイン、CSS 処理、アセット最適化、環境変数のセキュリティ	Scaffold
references/anti-patterns.md	よくあるフロントエンドのアンチパターンの検出基準と修正方法	Audit、Refactor

---

検証要件

変更完了を宣言する前に、このスキルのディレクトリで次を実行します。

python scripts/check.py
pytest -q tests/test_frontend_designer_scan.py

完了基準：

1. scripts/check.py が終了コード 0 で終了すること。
2. 対象を絞ったテストがエラーなしで成功すること。
3. このスキルのディレクトリ内に、ポータブル CLI の違反が残っていないこと。

スキル定義、公開されている説明、リファレンスファイル、または評価の動作を変更した後は、利用可能であれば docs-steward を呼び出してください。

---

重要なルール

1. Tailwind v4 では tailwind.config.js を絶対に使用しないでください — @import "tailwindcss" と @theme {} のみを使う CSS ファーストの方式にします
2. フレームワークを考慮したコンポーネントモデル — Next.js/Remix では "use client" を最小限にし、Server Components をデフォルトにします。Vite+React では "use client" は不要で、すべてのコンポーネントがクライアント側です
3. インタラクティブなコンポーネントには shadcn/ui 経由で Radix プリミティブを使用してください — ダイアログ、ポップオーバー、ドロップダウン、ツールチップをゼロから自作しないでください
4. @theme {} を介して CSS カスタムプロパティにデザイントークンを定義してください — 色、間隔、フォントの値をハードコードしないでください
5. コンポーネントのレスポンシブ対応にはコンテナークエリを使用してください — ページレイアウトやユーザー設定（prefers-color-scheme、prefers-reduced-motion、hover、pointer）にはメディアクエリを使用します
6. 段階的な機能強化のために @supports ガードを使用してください — contrast-color()、アンカーポジショニング、スクロール駆動型アニメーション、@scope では必須です
7. RTL 対応のために論理プロパティを使用してください — margin-left ではなく margin-inline-start、padding-top ではなく padding-block を使用します
8. Inter/Roboto/Arial/system-ui をデフォルトで使用しないでください — 個性のあるフォントを選び、コード関連のコンテキストには Monaspace を使用します
9. アクセシビリティは必須です — キーボード操作、ARIA、フォーカス管理、WCAG AA のコントラスト比（テキストは 4.5:1、大きなテキストは 3:1）に対応します
10. 必要な場合にのみ最新のドキュメントを参照してください — リファレンスは安定しています。予期しない動作や未対応の機能がある場合にのみ Context7/WebSearch で情報を取得します
11. 本文は 500 行未満にしてください — 詳細な技術情報はリファレンスファイルに記載します
12. 監査モードは読み取り専用です — 監査モードではコードを変更しないでください
13. レンダリングされた UI の品質を実証してください — Visual Acceptance Gate を通過するか、明示的なブロッカーがない限り、フロントエンド作業を完了と宣言しないでください