メニュー
Diagnose layout issues in Gridland components. Spawns the layout-debugger agent with the relevant component. Use when a component renders incorrectly or layout looks wrong.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/thoughtfulllc/gridland --skill debug-layoutコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Guide for creating a new UI component in @gridland/ui. Covers file structure, focus integration, keyboard handling, theme usage, JSDoc, export registration, and documentation.
Review a component for production readiness as a UI framework. Assesses code quality, patterns, tests, docs, and API design. Produces a prioritized fix plan. Use before shipping a new or updated component to users.
Update context files to reflect current codebase state — new components, changed APIs, new patterns, and reasoning behind non-obvious decisions. Routes updates to the correct file based on what changed. Run after any significant design change before committing.
| name | debug-layout |
| description | Diagnose layout issues in Gridland components. Spawns the layout-debugger agent with the relevant component. Use when a component renders incorrectly or layout looks wrong. |
Diagnose layout issues in a Gridland component.
If $ARGUMENTS provided, find the component file matching the argument (component name or file path).
If no argument, ask which component has the layout issue.
Read the component file to understand its JSX structure.
Spawn the layout-debugger agent with the component file path and a description of the visual problem.
Present the diagnosis: what's wrong, why, and how to fix it.
Suggest running bun run demo <component-name> to visually verify the fix.