laolin5564/collab-dev/collab-dev
Claude Code and agent skill by laolin5564/collab-dev
- community
Checking that the SKILL.md file is still in the repository.
Multi-agent collaborative development. Gemini designs UI/UX (design spec + presentation code), Claude Code fills business logic (TODO functions only), Codex reviews code quality. Use when user says "协作开发", "collab dev", "multi-agent build", or requests multi-agent collaboration for building web apps. Best for visually intensive projects (dashboards, data viz, animated UIs). For simple CRUD apps, solo development may suffice.
Install
npx vskill@latest install laolin5564/collab-dev/collab-devSKILL.md
Collaborative Development
Roles
| Agent | Does | Does NOT | |
|---|---|---|---|
| Gemini | design.md + all visible code (CSS/HTML) | write business logic | |
| OpenClaw | spec.md + server skeleton + TODO markers + validation + fixes | write UI styles or fill TODOs | |
| Claude Code | fill // TODO function bodies only | change CSS/HTML structure | |
| Codex | write review report | modify any code |
First Run: Prerequisites Check
On first trigger, check if ~/.openclaw/skills/collab-dev/.ready exists. If yes, skip to Phase 0. If not, run:
If any ❌, show install guide and stop:
| Tool | Install | Auth | |
|---|---|---|---|
| Gemini CLI | npm i -g @google/gemini-cli | gemini (首次运行自动引导登录) | |
| Claude Code | npm i -g @anthropic-ai/claude-code | claude (首次运行自动引导登录) | |
| Codex CLI | npm i -g @openai/codex | codex (首次运行自动引导登录) |
Tell user: "装好后再说一次「协作开发」即可。"
安装遇到问题? → 读 references/troubleshooting.md(涵盖 OAuth、ACP 权限、双 auth 不同步、session 堆积等 6 个常见坑)
If all ✅, write marker and proceed:
Workflow
Phase -1: PRD (OpenClaw, if needed)
If user only provides a brief idea (e.g. "做一个番茄钟"), clarify requirements before generating PRD.
Step 1: Requirement Clarification (ask until clear)
Ask user these questions one round at a time (don't dump all at once). Stop asking when answers are sufficient:
- Target users: Who will use this? (e.g. individuals, teams, specific audience)
- Core problem: What problem does it solve? What's the user's current pain?
- Key features: What are the 3-5 most important things it must do?
- Data ownership: Is data shared (all users see same) or private (each user owns)?
- Real-time needs: Does anything need live updates across tabs/users?
- Auth: Does it need login/registration?
- Platform: Desktop-first, mobile-first, or both equally?
- Tech stack: What language/framework? (default: Node.js + Express, but any stack works)
Skip questions the user already answered. If user says "你决定" or "随便", make reasonable defaults and state them.
Step 2: Generate PRD
Read references/prd-guide.md for template. Generate PRD with user stories, feature list (P0/P1/P2), data model, interaction patterns, acceptance criteria.
Step 3: User confirms PRD → convert to spec.md
Skip Phase -1 entirely if user already provides a detailed spec or PRD.
Phase 0: Spec (OpenClaw)
Write spec.md with:
- Data model (shared vs private)
- Features with priority (P0/P1/P2)
- Tech stack (from Phase -1, or user's preference)
- Interaction:
.hiddenclass toggle for modals - SSE scope + exclude current connection
- Security: enum field whitelists
- Search strategy: server OR client (not both)
- Field naming: API = DB column names
- API design + acceptance criteria
Do not write UI style hints — leave design freedom to Gemini.
Phase 1a: Design Spec (Gemini)
gemini -p outputs design.md. Prompt must include:
Phase 1b: Presentation Code (Gemini)
gemini -p outputs public/index.html. Prompt rules:
Clean output: sed -i '' '1{/^`/d}; ${/^`/d}' public/index.html
Quality gate: verify design.md names appear in code.
Phase 2: Infrastructure + Skeleton (OpenClaw)
Write server/backend with:
- DB path: absolute, relative to project root (not CWD-dependent)
- Auth secrets: read from env var, with secure random fallback (never hardcode)
- Password hashing: async only (never block main thread/event loop)
- SQL: prepared statements / parameterized queries (never string concat)
- Input validation: enum fields use whitelist, strings trimmed + length-limited
- Real-time (if needed): unique connection ID, online count = deduplicated user count, broadcast excludes sender's connection
- Heartbeat for long connections (30s interval + cleanup)
Integrate Gemini's UI code:
- Add element IDs for JS binding (don't change styles)
- Remove sample/placeholder data
- Verify
.hiddenclass mechanism works - Place empty-state elements outside repeating containers
- Use event delegation (no inline event handlers)
Save Gemini's original UI: cp <ui-file> <ui-file>.gemini-original
Inject skeleton with TODO markers:
Phase 3: Logic + Pre-review (parallel)
3a. Claude Code fills TODOs (ACP, 5min timeout):
Fallback: if no file change in 3min → kill, OpenClaw fills.
3b. Codex pre-reviews skeleton (ACP, simultaneous).
Phase 4: Automated Validation (OpenClaw)
Phase 4 checks (adapt commands to project's tech stack):
4a. Completeness
- Syntax check passes (language-appropriate tool)
- Zero TODO markers remaining
4b. Design consistency
- CSS class/variable names in code match design.md definitions
4c. CSS/JS integration
- Every class toggled by JS has corresponding CSS rules
- No inline
display:noneoutside.hiddenclass and media queries
4d. Security
- Auth secrets come from env vars (no hardcoded strings)
- Password hashing is async
- No raw SQL string concatenation
4e. DOM/UI structure
- No inline event handlers (onclick= etc.)
- Empty-state elements outside repeating containers
4f. Spec coverage
- All P0 acceptance criteria have corresponding implementation
Phase 5: Self-review + Fix
diff index.html index.html.gemini-original— Claude didn't touch presentation- Fix pre-review issues
- Verify mobile, brand elements, port/config
Phase 6: Codex Final Review (ACP)
Dimensions: functionality, design consistency, security, code quality, performance, bug risk (1-10 each).
Phase 7-8: Fix + Ship
Fix Critical/High from review → re-validate → deliver.
Known Issues
| Issue | Workaround | |
|---|---|---|
| Gemini ACP unavailable | Always use gemini -p CLI | |
| Gemini markdown wrapping | Phase 1b: sed cleanup | |
| Claude ACP hangs | 5min timeout + fallback | |
| Claude modifies presentation | Phase 5 diff check | |
| Standard tool projects: Gemini adds little value | Best for visually intensive projects |
Security
- Security scanPassed, 95 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingSKILL.md
Popularity
- Repository stars
- 1
- 7-day trend score
- 3
Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 18 Mar 2026, 7 months ago.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/laolin5564/collab-dev/collab-dev)