| name | pixiu-frontend-workbench |
| description | Use this skill when designing, implementing, or refactoring Pixiu's frontend Agent Workbench, including session isolation, Skills, MCP, activity trace, workspace, artifacts, and permission-aware execution. |
Pixiu Frontend Workbench Skill
Use this skill when the user asks to design, implement, refactor, or polish Pixiu's web frontend.
The goal is not to create a generic chat page. The goal is to build a clear Agent Workbench for a local-first agent system.
Core product idea
Pixiu's frontend should help users understand and control an agent that can:
- read and edit local files
- call tools
- use MCP servers
- load Skills
- maintain sessions
- produce artifacts
- record evidence
- request permissions
- expose execution activity
The UI should make these agent-system concepts visible and reviewable.
When to use this skill
Use this skill for tasks such as:
- redesigning the Pixiu web UI
- implementing a three-pane workbench layout
- adding project/session navigation
- adding a Skills panel or Skills Center
- adding an Activity or Run Trace panel
- adding tool-call visualization
- adding MCP server status
- adding workspace and artifact views
- improving permission prompts
- refactoring frontend components for clarity
Target layout
Prefer a three-pane desktop layout.
1. Left Sidebar
Purpose: navigation and isolation.
It should include:
- Pixiu brand/logo
- New chat
- Search sessions
- Projects
- Sessions for the current project
- Skills
- MCP
- Workspace
- Settings
- user/profile area
The selected project and selected session should be visually obvious.
2. Center Workbench
Purpose: main interaction and output.
It should include:
- user messages
- assistant responses
- structured response cards
- artifact previews
- file change summaries
- tool/skill summaries when useful
- bottom input composer
Assistant responses should be allowed to contain structured cards, for example:
- Skills used
- Files changed / proposed
- MCP & Tools
- Artifact preview
- Verification summary
3. Right Inspector
Purpose: observability and review.
It should include tabs or sections such as:
- Activity
- Tools
- Skills
- Evidence
- Workspace
This panel should show what the agent did, not hidden chain-of-thought.
Good activity events include:
- parsed task
- selected skill
- loaded SKILL.md
- loaded reference file
- called tool
- requested permission
- read file
- edited file
- ran command
- created artifact
- completed task
Pixiu-specific UI requirements
The UI should clearly show:
-
Session isolation
- The user can distinguish projects and sessions.
- A session belongs to a project/workspace context.
-
Skills as first-class objects
- Skills should not be hidden as plain text.
- The UI should show which skill was selected or loaded.
- The UI should distinguish SKILL.md from reference files.
-
Tool and MCP activity
- Built-in tools and MCP servers should be visible as execution capabilities.
- Tool calls should be grouped and countable when repeated.
-
Workspace state
- Current root, branch, changed files, and artifacts should be visible.
- File changes should be reviewable.
-
Permission mode
- The current permission mode should be visible.
- Permission requests should be reviewable before risky actions.
-
Evidence and artifacts
- Generated files, screenshots, logs, and other evidence should be easy to inspect.
Design principles
- Make the UI feel like a production developer tool.
- Prefer clarity over decoration.
- Use concise labels.
- Use cards for structured agent state.
- Use status icons for pending/running/success/failed/blocked states.
- Keep raw logs collapsible.
- Avoid exposing hidden chain-of-thought.
- Show structured execution summaries instead.
Implementation workflow
When asked to implement this UI, follow this workflow:
- Inspect the existing frontend stack.
- Locate the UI entry point, routes, and main components.
- Identify available styling approach and existing design tokens.
- Propose a minimal component plan before large edits.
- Implement the three-pane layout shell first.
- Add mock data for sessions, skills, tools, activity, workspace, and artifacts if real APIs are not ready.
- Keep mock data in a separate file or clearly marked section.
- Implement left sidebar.
- Implement center chat/workbench.
- Implement right inspector.
- Run typecheck/build.
- Summarize changed files and verification steps.
Suggested components
Use names like these if they fit the existing codebase:
WorkbenchLayoutAppSidebarProjectListSessionListChatPaneMessageCardAssistantSummaryCardsArtifactPreviewRightInspectorActivityTimelineToolCallSummarySkillUsageCardWorkspaceSummaryPermissionModeBadgeComposer
Do not force these names if the project already has a better component structure.
Mock data model
If backend integration is not ready, use realistic mock data for:
- projects
- sessions
- messages
- skills
- loaded skill files
- tool calls
- MCP servers
- activity events
- workspace state
- artifacts
- file changes
Mock data should be easy to replace later.
Done when
The task is complete when:
- the Pixiu UI shows a clear three-pane Agent Workbench
- the selected project and session are visible
- Skills, Tools, MCP, Workspace, Activity, and Artifacts are visible as first-class concepts
- the right panel shows a believable execution trace
- the center panel supports chat plus structured workbench cards
- the layout works well on a desktop 16:9 screen
- available typecheck/build commands pass
- changed files and verification steps are summarized
Reference files
If more detail is needed, load the following reference file through the skill tool:
references/ui-layout-spec.md
