Menü
Implements UI fixes in the Electron + React renderer layer
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Finishes an already-started Mission renderer feature by validating the existing draft, applying minimal follow-up fixes, and committing.
Expands Mission automated coverage, integration flows, and E2E-readiness for the Electron Mission GUI
Implements Mission renderer routing, MissionPage, Mission Control panels, and Mission-specific interaction UX in the Electron app
Implements Mission protocol, backend/session plumbing, Electron IPC, store reconciliation, and restore logic for Mission GUI
End-to-end UI testing for the Droi Electron app using agent-browser via CDP. Use this skill when the user asks to test the Droi desktop application, run E2E tests, automate UI interactions, verify session management, or validate UI changes after development. Triggers: "test the app", "E2E test", "UI test", "agent-browser test", "test session creation", "test session deletion", "verify the UI works", "run automated tests".
| name | ui-worker |
| description | Implements UI fixes in the Electron + React renderer layer |
NOTE: Startup and cleanup are handled by worker-base. This skill defines the WORK PROCEDURE.
Use for features that modify React components, Zustand store selectors, CSS/Tailwind styling, and scroll behavior in the renderer layer (src/renderer/src/).
Read the feature description carefully. Identify all files mentioned and understand the expected behavior.
Read all relevant source files before making any changes. Understand the current implementation, imports, and patterns used.
Plan your changes. For each file, identify what needs to change and why. Consider edge cases.
Implement changes incrementally. Make one logical change at a time. After each change, verify it compiles:
pnpm typecheck
Run the full check pipeline:
pnpm format && pnpm lint:fix && pnpm check
Fix any errors before proceeding.
Manual verification (where applicable):
Commit your changes with a conventional commit message.
{
"salientSummary": "Moved New Project button from SidebarContent to SidebarHeader and wrapped project list in ScrollArea. Ran pnpm check (pass). Sidebar header is now fixed, only project list scrolls.",
"whatWasImplemented": "Restructured app-sidebar.tsx: extracted New Project SidebarMenuItem into SidebarHeader section above SidebarContent. Wrapped the project Collapsible list inside ScrollArea component. Adjusted CSS classes for proper flex layout.",
"whatWasLeftUndone": "",
"verification": {
"commandsRun": [
{ "command": "pnpm typecheck", "exitCode": 0, "observation": "No type errors" },
{ "command": "pnpm check", "exitCode": 0, "observation": "Format, lint, typecheck all pass" }
],
"interactiveChecks": [
{ "action": "Reviewed DOM structure in code", "observed": "SidebarHeader contains New Project, SidebarContent contains ScrollArea with project list, SidebarFooter contains Settings" }
]
},
"tests": { "added": [] },
"discoveredIssues": []
}