diff --git a/container/Dockerfile b/container/Dockerfile index 32ae1a0..32ce0b9 100644 --- a/container/Dockerfile +++ b/container/Dockerfile @@ -31,7 +31,7 @@ ENV AGENT_BROWSER_EXECUTABLE_PATH=/usr/bin/chromium ENV PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium # Install agent-browser and claude-code globally -RUN npm install -g agent-browser @anthropic-ai/claude-code +RUN npm install -g agent-browser @anthropic-ai/claude-code vercel # Create app directory WORKDIR /app diff --git a/container/skills/frontend-engineer/SKILL.md b/container/skills/frontend-engineer/SKILL.md new file mode 100644 index 0000000..5289ad7 --- /dev/null +++ b/container/skills/frontend-engineer/SKILL.md @@ -0,0 +1,157 @@ +--- +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: `
`, `