Frontend skills for Codex
Skills that encode current frontend practice: React 19 and Server Components, the Next.js App Router and its caching model, TanStack, Vue 3 and Nuxt 4, Svelte 5 runes, Angular signals, Astro, Tailwind CSS v4, modern CSS layout and animation, Three.js, accessibility audits against WCAG 2.2 and the tooling that ships it all.
curl -fsSL codexskills.dev/install.sh | sh -s -- --category frontend Installs all 51 into ~/.agents/skills/. Or download the zip.
All 51 Frontend skills
Each opens the full SKILL.md, example prompts and every way to install it.
-
Angular Signals
Computed over effects, ready for zoneless -
Angular Standalone Migration
Retire NgModules one green build at a time -
ARIA Patterns
Widgets screen readers announce correctly -
Astro Sites
Static by default, islands only where they earn it -
Browser Storage
The right store for every byte you keep client-side -
Chrome Extensions (MV3)
Manifest V3 extensions that survive the service worker -
CSS Animations
Smooth motion with zero JavaScript -
CSS Architecture
Let layers decide the cascade, not selector weight -
D3 Visualizations
Bespoke charts with honest scales and keyed joins -
Frontend Error Handling
No white screens, no silent failures, no retry storms -
Frontend i18n
Plurals, RTL and locale URLs done properly -
GSAP Animations
Scroll storytelling without leaks or jank -
htmx Patterns
Server-rendered interactivity without a SPA -
Lit Web Components
Custom elements that work in every framework -
Micro-frontends
Split the frontend only when teams truly need it -
Modern CSS Layout
Components that fit any slot, pages that never overflow -
Motion for React
Exit animations that actually play -
Next.js App Router
Folders, boundaries and handlers that behave as expected -
Next.js Caching
Every cached value gets a lifetime, a tag and an owner -
Next.js Pages to App Migration
Move route by route and ship after each one -
Next.js Server Actions
Treat every action as a public POST endpoint -
Nuxt 4
Fetch once, render per route, hydrate clean -
Pinia State
Small stores, reactive reads, real tests -
PWA and Service Workers
Installable, offline-ready, and safe to update -
Radix UI Primitives
Accessible behavior, your own styling -
React 19 Patterns
Let Actions own pending, errors and reset -
React Hook Form + Zod
One schema, typed fields, errors on the right input -
React Performance
Profile the interaction, then fix the fan-out -
React Router v7
Loaders, actions and fetchers the framework way -
React Server Components
Put the client boundary at the smallest leaf -
React Three Fiber
3D in React without re-rendering every frame -
Redux Toolkit
Slices, typed hooks and RTK Query without legacy boilerplate -
Responsive Images
The right bytes for every screen -
shadcn/ui
Own your components, theme them with tokens -
SolidJS
Run components once, update only what changed -
Storybook Stories
Stories that document and test every state -
Svelte 5 Runes
Derive state, reserve effects for the outside world -
SvelteKit
Server loads, real forms, the right adapter -
Tailwind CSS v4
Config in CSS, upgrade without visual drift -
TanStack Query
Exact keys, deliberate staleTime, honest mutations -
TanStack Router
URLs, search params and loaders that type-check -
TanStack Start
Server functions that validate, loaders that stay portable -
Three.js Scenes
Correct colors, steady frames, no GPU leaks -
TypeScript React Types
Props that reject misuse and never need a cast -
View Transitions
Native page morphs that degrade cleanly -
Vite Config
A vite.config.ts where every line earns its place -
Vue 3 Composition API
Script setup components that never lose reactivity -
WCAG 2.2 Accessibility Audit
Findings mapped to criteria, with fixes -
Web Font Loading
Fast fonts, zero layout shift on swap -
webpack to Vite
Leave Create React App without breaking prod -
Zustand State
Small stores, narrow selectors, versioned persistence
No Frontend skill matches that.
Where to start
Install the ones that match requests you make every week. Name one with $chrome-extensions when you want it for sure; otherwise Codex picks by description.
Start with
- Chrome Extensions (MV3)Manifest V3 extensions that survive the service worker
- Next.js CachingEvery cached value gets a lifetime, a tag and an owner
- Tailwind CSS v4Config in CSS, upgrade without visual drift
Install a few by name
curl -fsSL codexskills.dev/install.sh | sh -s -- angular-signals angular-standalone-migration 104-line POSIX script. No sudo, no telemetry. Read install.sh
By stack
In collections
Frontend FAQ
How do I install every Frontend skill at once?
Run curl -fsSL https://codexskills.dev/install.sh | sh -s -- --category frontend to put all 51 in ~/.agents/skills/, or add --project to install them into the current repository's .agents/skills/. You can also download the category zip and unpack it yourself.
Does installing 51 skills slow Codex down?
Hardly. At startup Codex sees only each skill's name and description, a few dozen words apiece, and reads a full SKILL.md only when a task needs it. Install the whole category if the work fits; unused skills cost almost nothing.
Which Frontend skill should I start with?
Start with Chrome Extensions (MV3), Next.js Caching, Tailwind CSS v4. They cover the requests that come up most in this category. Mention one with $chrome-extensions to try it.