「layout」の検索結果

OpenClaw Control UIの画面変更を、状態別の比較ギャラリーと実ブラウザの操作テストで確認し、利用者のコメントや変更前後の画像を残すスキル。

• 読み込み・空・エラー状態の比較
• 画面変更への意見を集めたいとき
• 模擬Gatewayでチャット操作を検証

OpenClawの管理画面でセッションや画面配置を整理し、ダッシュボードを作るスキル。接続先の確認や、遠隔公開時の表示・通信不具合の調査も扱います。

• セッションをグループ化・固定したいとき
• 専用セッションにダッシュボードを作成
• タブやウィジェットを配置したいとき

新しい機能や企画を作り始める前に、対話で目的や希望、制約を整理します。必要に応じて図や試作品で認識を確かめ、作業の規模に合った設計をまとめるスキルです。

• 新機能の目的を明確にしたいとき
• 講演や事業のアイデア整理
• 画面や部屋の配置を見比べたいとき

開発用スキルの初回利用に向けて、課題の管理先、仕分け用ラベル、用語集や設計判断の記録の配置を確認し、リポジトリ共通の設定文書を整えるスキル。

• 開発用スキルの初期設定
• 課題管理先と仕分けラベルの整理
• 用語集と設計判断の記録の配置決め

React / Next.jsのボタン、モーダル、通知、ページ遷移に動きを加え、表示・消去やスクロールに連動するアニメーションを実装するスキル。

• ボタンの操作に動きを付けたいとき
• モーダルや通知の表示・消去
• Next.js App Routerのページ遷移

Spring BootやQuarkusのJavaコードを、命名、例外処理、データの変更制限、テストなどの規約に沿って書き、レビューするスキル。

• Javaコードの規約レビュー
• Optionalやstreamsの使い方の確認
• パッケージとプロジェクト構成の整理

HTMLとCSSで見た目を作り、文字や画像に動きを付けてMP4・WebM動画に書き出します。字幕付きナレーションや商品紹介、Webサイトからの動画制作にも対応します。

• 動くタイトルや文字イントロの制作
• ナレーションに字幕を付けたいとき
• Webサイトを紹介動画にしたいとき

動く図形を避けて流れる文章や、文字が散らばる演出、単語を使ったゲームを、文字の位置を事前に計算して単一のHTMLで作るスキルです。

• 動く図形を避ける文章表現
• クリックで文字が散らばる演出
• 単語や文字を使ったゲーム制作

テーマや写真から、１色または２色のインクで刷ったようなポスターや表紙の画像を作ります。余白、網点、文字の大小を組み合わせ、生成用プロンプトと配色情報もまとめます。

• テーマから単色ポスターを作りたいとき
• 写真を網点ポスターに仕上げたいとき
• ２色刷り風の小冊子の表紙制作

Web画面のデザインをAIエージェントと見直すための指針です。23のサブコマンドと避けたい表現の例を備え、専用CLIで61のルールに基づく検出も行えます。

• Web画面のデザインを見直したいとき
• 文字組み・配色・配置の調整
• 多用されがちなデザイン表現の確認

文章やテーマをもとに、知識解説・伝記・手順説明の漫画を作るスキルです。画風やコマ割りを選び、構成案、登場人物の設定、画像生成用の指示とページ画像を整えます。

• 難しい概念を漫画で説明したいとき
• 人物の伝記を漫画にしたいとき
• 手順を漫画で紹介したいとき

構成図やフローチャート、処理のやり取りを手描き風の図にし、Excalidrawで編集できるファイルとして保存します。共有リンクの作成にも対応するスキルです。

• システム構成を図解したいとき
• 業務手順をフローチャートにしたいとき
• システム間のやり取りを整理したいとき

開発中のHermesデスクトップ画面から、要素の有無や実際のCSS値、優先されたルール、コンソール出力を取得し、表示変更の反映や原因を確認するスキル。

• 動作中の画面でUI変更を確認したいとき
• 適用されたCSSルールの調査
• デザイントークンの実際の値の確認

StripeやLinearなど54のサイトの配色・文字・余白を参考に、HTML/CSSのページを制作します。部品や画面幅に応じた表示も揃えるスキル。

• Stripeを参考にしたLP制作
• Linearを参考にしたダッシュボード制作
• 資料サイトのデザイン制作

Webアプリをブラウザで操作して不具合を探し、再現手順やスクリーンショット付きの報告書にまとめるスキル。フォームや画面遷移、表示崩れ、JavaScriptエラーを確認します。

• 公開前に主要な操作の流れを点検したいとき
• フォームの正常・異常・空欄入力を試したいとき
• 表示崩れやJavaScriptエラーの記録

Markdown原稿を、余白・改ページ・ページ番号を整えたPDFに変換。表紙やクリックできる目次、透かし、図の描画にも対応し、配布用の文書に仕上げるスキル。

• Markdownメモを配布用PDFにしたいとき
• 表紙と目次付きのレポート作成
• 文書にDRAFTの透かしを付けたいとき

実際のブラウザで画面表示や操作を確かめ、エラー・通信・表示速度を調べます。修正前後の画像比較やアクセシビリティの確認も行うスキルです。

• レイアウトやスタイルの不具合調査
• ブラウザエラーやAPI通信の調査
• 修正前後の画面を比較したいとき

Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.

日本語の概要は準備中です。原文の説明を表示しています。

Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: "saas landing", "marketing page", "product landing".

日本語の概要は準備中です。原文の説明を表示しています。

Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.

日本語の概要は準備中です。原文の説明を表示しています。

Open Orbit briefing skill — selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear, Notion, Slack, 飞书, Calendar, Gmail, Drive, Sentry, Vercel, …) and renders a single adaptive bento-grid dashboard at the top of "我的设计". Each connector module picks its own UI form (list, avatar stack, status ring, heatmap, file grid, alert card, …) based on the data shape it returns, so the layout scales as Orbit's connector ecosystem grows. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against the user's live connector data.

日本語の概要は準備中です。原文の説明を表示しています。

A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed `assets/template.html` and pasting one screen archetype from `references/layouts.md`. Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".

日本語の概要は準備中です。原文の説明を表示しています。

Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually — it is invoked by Orbit's daily-digest scheduler against live GitHub data.

日本語の概要は準備中です。原文の説明を表示しています。

An editorial-style poster — newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbered sections with annotated pull-quote captions. Reads like a Sunday-paper full-page essay or a thoughtful launch poster. Use when the brief asks for "magazine poster", "editorial poster", "newsprint", "essay layout", or "manifesto".

日本語の概要は準備中です。原文の説明を表示しています。