ワンクリックでManusで任意のスキルを実行

agent-ui-workflows

スター5

フォーク0

更新日2026年5月1日 09:17

Build or modify Fleet Pi's React Agent Elements UI, including InputBar controls, tool cards, question prompts, resource drawer, model picker, mode selector, and streaming state.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

Qredence

Qredence/fleet-pi

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Agent UI Workflows

Use this skill for UI changes in the chat surface or shared Agent Elements package.

Key Files

Chat page composition: apps/web/src/routes/index.tsx
Chat message and tool types: packages/ui/src/components/agent-elements/chat-types.ts
Input composer: packages/ui/src/components/agent-elements/input-bar.tsx
Mode and model controls: packages/ui/src/components/agent-elements/input/
Tool dispatch: packages/ui/src/components/agent-elements/tools/tool-renderer.tsx
Tool metadata: packages/ui/src/components/agent-elements/tools/tool-registry.ts
Question prompt: packages/ui/src/components/agent-elements/question/

Design Rules

Keep controls compact and scannable; this is an operational coding tool, not a landing page.
Use existing Agent Elements primitives and direct-file imports.
Prefer icon buttons with aria-label and title for compact actions.
Keep InputBar mode/model controls inside leftActions.
Avoid editing apps/web/src/routeTree.gen.ts manually.

Validation

pnpm --filter web typecheck
pnpm --filter @workspace/ui typecheck
pnpm --filter web lint
pnpm --filter @workspace/ui lint

このリポジトリの他の Skills

同じリポジトリ

openui

Qredence/fleet-pi

Build generative UI apps with OpenUI and OpenUI Lang — the token-efficient open standard for LLM-generated interfaces. Use when mentioning OpenUI, @openuidev, generative UI, streaming UI from LLMs, component libraries for AI, or replacing json-render/A2UI. Covers scaffolding, defineComponent, system prompts, the Renderer, and debugging OpenUI Lang output.

2026-07-035

fleet-pi-orientation

Qredence/fleet-pi

Map the Fleet Pi codebase before planning or editing. Use when asked what the app does, where chat/session/resource code lives, or how the monorepo fits together.

2026-05-095

frontend-design

Qredence/fleet-pi

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

2026-05-055

chat-runtime-debugging

Qredence/fleet-pi

Diagnose Fleet Pi chat runtime failures, including NDJSON streams, Pi sessions, Bedrock model errors, resource loader diagnostics, queueing, aborts, and Plan mode question flow.

2026-05-055

name	agent-ui-workflows
description	Build or modify Fleet Pi's React Agent Elements UI, including InputBar controls, tool cards, question prompts, resource drawer, model picker, mode selector, and streaming state.

Agent UI Workflows

Use this skill for UI changes in the chat surface or shared Agent Elements package.

Key Files

Chat page composition: apps/web/src/routes/index.tsx
Chat message and tool types: packages/ui/src/components/agent-elements/chat-types.ts
Input composer: packages/ui/src/components/agent-elements/input-bar.tsx
Mode and model controls: packages/ui/src/components/agent-elements/input/
Tool dispatch: packages/ui/src/components/agent-elements/tools/tool-renderer.tsx
Tool metadata: packages/ui/src/components/agent-elements/tools/tool-registry.ts
Question prompt: packages/ui/src/components/agent-elements/question/

Design Rules

Keep controls compact and scannable; this is an operational coding tool, not a landing page.
Use existing Agent Elements primitives and direct-file imports.
Prefer icon buttons with aria-label and title for compact actions.
Keep InputBar mode/model controls inside leftActions.
Avoid editing apps/web/src/routeTree.gen.ts manually.

Validation

pnpm --filter web typecheck
pnpm --filter @workspace/ui typecheck
pnpm --filter web lint
pnpm --filter @workspace/ui lint