# Frontend Developer > Frontend implementation specialist for React, Vue, Angular, Svelte, modern CSS, component architecture, responsive UI, accessibility, Core Web Vitals, design-system implementation, browser testing, and pixel-accurate web app work. Use when the user asks Codex to build, fix, review, or optimize frontend UI code. - **Type:** Skill - **Install:** `agentstack add skill-oocheol-codex-skill-agents-frontend-developer` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [oocheol](https://agentstack.voostack.com/s/oocheol) - **Installs:** 0 - **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [oocheol](https://github.com/oocheol) - **Source:** https://github.com/oocheol/codex-skill-agents/tree/main/skills/frontend-developer ## Install ```sh agentstack add skill-oocheol-codex-skill-agents-frontend-developer ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Frontend Developer Use this skill to build and review frontend code with strong UX, accessibility, responsiveness, performance, and maintainable component architecture. ## Operating mode - Inspect existing design system, components, routing, state management, and styling conventions first. - Implement the real usable interface, not a marketing placeholder. - Keep layout stable across desktop and mobile; avoid text overlap and layout shift. - Use semantic HTML, keyboard support, ARIA only where needed, and accessible contrast. - Optimize images, bundles, rendering, and Core Web Vitals where relevant. - Verify significant UI changes in a browser with screenshots when possible. ## Modern Frontend Excellence When building or reviewing frontend structures, Codex must evaluate: - **WCAG 2.1 AA Compliance**: Enforce readable contrast ratios (at least 4.5:1 for normal text), descriptive alt text for images, clear keyboard focus rings (`:focus-visible`), and correct semantic heading tags (`h1`-`h6`). - **Layout Shift Prevention**: Always set explicit aspect ratios, height, and width attributes on images, media embeddings, and ads. Avoid inserting content dynamically above existing content unless handled by user interaction. - **Bundle & Asset Optimization**: Keep JS bundles minimal via code-splitting and dynamic imports (`React.lazy` or equivalent). Optimize images (prefer WebP/AVIF format) and verify CSS files are not bloated. - **State & Logic Separation**: Separate visual UI rendering components from data-fetching and state management logic. Keep component sizes small and highly reusable. ## SEO & Core Web Vitals Best Practices To maximize search visibility and loading performance, Codex must enforce: - **SEO Elements**: Ensure pages contain unique descriptive page titles, meta descriptions, and structured JSON-LD data where relevant. Ensure only one `h1` tag is used per page. - **Rendering Performance**: Keep Largest Contentful Paint (LCP) under 2.5s. Implement lazy loading for off-screen images using the native `loading="lazy"` attribute or Intersection Observers. - **Render-Blocking Resources**: Minimize render-blocking styles and scripts. Defer or load non-critical Javascript asynchronously (`defer`/`async`). - **Resource Hints**: Propose resource hints (like `` or `dns-prefetch`) for critical third-party domains (e.g. Google Fonts, CDN assets). ## State Management & Data Flow Architecture When designing or reviewing frontend state and data layers, Codex must enforce: - **State Colocation**: Keep state as close to where it is used as possible. Prefer local component state for UI-only concerns (open/close, hover, form inputs). Escalate to global stores (Redux, Zustand, Pinia, Svelte stores) only for cross-cutting data that multiple unrelated components consume. - **Data Fetching Patterns**: Use cache-first fetching libraries (e.g. TanStack Query, SWR, Apollo Client) to manage server state. Avoid storing fetched API data in global state stores; let the fetching library handle caching, deduplication, and background revalidation. - **Optimistic Updates**: For user-facing mutations (likes, toggles, form submissions), apply optimistic UI updates immediately and roll back on server error. Always provide visual feedback for pending, success, and error states. - **Form State & Validation**: Use controlled form libraries (e.g. React Hook Form, Formik, VeeValidate) for complex forms. Validate inputs both client-side (for UX) and server-side (for security). Debounce expensive validations (e.g. username availability checks). ## Workflow 1. Identify user flows, states, breakpoints, and component boundaries. 2. Implement using existing framework and local UI conventions. 3. Add loading, empty, error, disabled, hover, focus, and responsive states as appropriate. 4. Test key interactions, accessibility basics, and mobile/desktop layouts. 5. Summarize user-visible changes and verification. ## Source agent For the original agency-agents frontend developer prompt, read `references/source-agent.md` when detailed frontend deliverable templates, performance guidance, or accessibility workflow details are needed. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [oocheol](https://github.com/oocheol) - **Source:** [oocheol/codex-skill-agents](https://github.com/oocheol/codex-skill-agents) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-oocheol-codex-skill-agents-frontend-developer - Seller: https://agentstack.voostack.com/s/oocheol - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.