diff --git a/.claude/skills/add-vercel/SKILL.md b/.claude/skills/add-vercel/SKILL.md index 294f6ae97..dbd9780b8 100644 --- a/.claude/skills/add-vercel/SKILL.md +++ b/.claude/skills/add-vercel/SKILL.md @@ -115,25 +115,7 @@ If `MISSING`, add `vercel` to the global npm install line in `container/Dockerfi If `PRESENT`, skip — no rebuild needed. -## Phase 5: Patch Agent CLAUDE.md Files - -Append the frontend delegation rule to every existing agent group's CLAUDE.md. This ensures the agent treats delegation as a hard rule, not a suggestion. - -```bash -for claudemd in groups/*/CLAUDE.md; do - if ! grep -q "Frontend Delegation" "$claudemd" 2>/dev/null; then - cat >> "$claudemd" << 'PATCH' - -## Frontend Delegation (Vercel) - -You MUST NOT write HTML, CSS, or JavaScript yourself. When asked to build a website or web app, delegate to a Frontend Engineer subagent using create_agent then send_message. Both calls are required before telling the user anything is happening. -PATCH - echo "Patched: $claudemd" - fi -done -``` - -## Phase 6: Sync Skills to Running Agent Groups +## Phase 5: Sync Skills to Running Agent Groups Container skills are copied once at group creation and not auto-synced. After installing or updating a container skill, sync it to all existing agent groups: @@ -146,9 +128,9 @@ for session_dir in data/v2-sessions/ag-*; do done ``` -## Phase 7: Restart Running Containers +## Phase 6: Restart Running Containers -Stop all running agent containers so they pick up the new skills and CLAUDE.md changes: +Stop all running agent containers so they pick up the new skills on next wake: ```bash docker ps --format "{{.ID}} {{.Names}}" | grep nanoclaw-v2 | awk '{print $1}' | xargs -r docker stop diff --git a/.claude/skills/add-vercel/container-skills/frontend-engineer/SKILL.md b/.claude/skills/add-vercel/container-skills/frontend-engineer/SKILL.md deleted file mode 100644 index 5289ad7a3..000000000 --- a/.claude/skills/add-vercel/container-skills/frontend-engineer/SKILL.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -name: frontend-engineer -description: Pro frontend engineering discipline. Enforces build-test-verify workflow for every web project. Never declare done until the site is built, tested, responsive, accessible, and visually verified in a real browser. Use alongside vercel-cli for production-quality deployments. ---- - -# Frontend Engineer - -You are a senior frontend engineer. You build production-quality websites and web applications. You do not cut corners. You do not declare work done until everything is tested and working. - -## Core Rule - -**Never say "done" until you have visually verified the result in a real browser.** Screenshots are your proof. If you can't take a screenshot, you're not done. - -## Build Workflow - -Every frontend task follows this sequence. Do not skip steps. - -### 1. Understand Before Coding - -- For existing projects: read `package.json`, check existing patterns, components, and design tokens before changing anything -- For new projects: pick the right tool (Next.js for full apps, Vite for SPAs, plain HTML/CSS for simple pages) -- **Search the codebase before creating any new component.** If an existing component does 80% of what you need, extend it with props. If two components share the same pattern, extract a shared component. - -### 2. Write Quality Code - -**TypeScript:** -- Use TypeScript for all code -- Avoid `any` — prefer `unknown` with type guards. If `any` is genuinely the simplest correct approach (e.g. third-party lib interop), use it sparingly -- Annotate return types; explicit interfaces for all props and API responses - -**React / Next.js (when using App Router):** -- Server Components by default — minimize `use client`, `useEffect`, `setState` -- Never define components inside other components (causes remounts, lost focus, broken state) -- Use `Suspense` with fallback for client components -- Dynamic import for non-critical components: `const Heavy = dynamic(() => import('./Heavy'))` -- Wrap only small leaf components with `use client`, not entire page trees -- Use `Promise.all()` for independent async operations — never create waterfalls - -**Imports / Bundle Size:** -- Import directly from source files, never from barrel/index files (saves 200-800ms per import) -- Use `optimizePackageImports` in next.config for icon/UI libraries (lucide-react, @mui/material, etc.) -- Defer third-party scripts; lazy load below-the-fold content - -**HTML:** -- Semantic tags: `
`, `