frontend-skill / site

# frontend

> Production client code for websites (including art-directed and creative marketing sites), web apps, dense product UI, iOS, and Android. Faceted agent skill — loads only the references each job needs.

frontend implements the production client: component and state architecture, full state completeness, forms, accessibility floors, Core Web Vitals and media loading, client security, production SPA session wiring, testing + screenshot self-check, i18n, design-handoff consumption, and hard web-platform craft (Safari/iOS chrome, dual-codec transparent video, CSS/DOM traps) across React, Next.js, Tailwind, shadcn/ui, SwiftUI, Jetpack Compose, and Expo/React Native (Expo default greenfield; bare when required).

SKILL.md is a faceted router: one primary job, at most one platform overlay (native overrides web), a web stack overlay only when the project uses that stack — read those files fully, then ship. Installs as plain Agent Skills format (agentskills.io) on Claude Code, Codex, Cursor, Antigravity, opencode, Grok Build, Hermes, and more.

## Install

- npm/skills.sh: `npx skills add gabros20/frontend-skill`
- Clone + installer: `git clone https://github.com/gabros20/frontend-skill && cd frontend-skill && ./install.sh codex`
- Manual: `cp -R skills/frontend ~/.claude/skills/frontend`

## Docs

- [README.md](https://raw.githubusercontent.com/gabros20/frontend-skill/main/README.md)
- [skills/frontend/SKILL.md](https://raw.githubusercontent.com/gabros20/frontend-skill/main/skills/frontend/SKILL.md)
- [docs/installation.md](https://raw.githubusercontent.com/gabros20/frontend-skill/main/docs/installation.md)
- [docs/usage.md](https://raw.githubusercontent.com/gabros20/frontend-skill/main/docs/usage.md)
- [docs/recipes.md](https://raw.githubusercontent.com/gabros20/frontend-skill/main/docs/recipes.md)

## Reference inventory (`skills/frontend/references/`) — 27 files

### Primary job
- `state-and-data.md` — state machines, fetch/cache, optimistic+rollback, client auth-flow shape
- `state-completeness.md` — loading/empty/error/success/recovery/undo in code
- `forms.md` — validation timing, submit, input types, errors
- `accessibility.md` — ARIA, focus, keyboard, contrast/target/reduced-motion floors
- `performance.md` — CWV, responsive preload, compositor traps, virtualization
- `client-security.md` — tokens, XSS, CSP, CSRF, credentials
- `client-app-wiring.md` — API client, single-flight 401, multi-tab session, flags, error reporting
- `testing.md` — unit/component/UI tests + screenshot dev-loop
- `i18n.md` — logical props, Intl, dir/lang, text expansion
- `design-handoff-and-tokens.md` — handoff.yaml / DESIGN.md consumption
- `client-architecture.md` — feature folders, import zones, section registries

### Platform · web
- `web-platform-css.md` — layout, stacking, color-gamut / color-management
- `web-platform-runtime.md` — Safari/iOS, dual-codec video Pattern A, scrub traps, View Transitions
- `css-craft.md` — blur/backdrop/will-change craft, scrollbars, micro-patterns
- `js-dom-craft.md` — observers, AbortController, media IO abort, timing

### Platform · native
- `swiftui.md`, `swift-concurrency-and-testing.md`
- `compose.md`, `kotlin-and-compose-state.md`
- `react-native.md` — Expo-first RN (Router, managed/prebuild, EAS, env/media); core list/gesture traps; optional `expo/skills` deeper dives; latest docs https://docs.expo.dev

### Web stack (only when used)
- `react-components-and-state.md`, `react-rendering-and-rsc.md`
- `nextjs.md` — App Router/cache/assets traps; optional skills; docs https://nextjs.org/docs
- `data-fetching-libraries.md` — durable cache traps; TanStack Query/Router/Start + SWR; companion skills + official docs
- `tailwind.md`, `shadcn.md`

### Uncovered frameworks (no full overlay)
- Astro: core job + web substrate; optional `astrolicious/agent-skills@astro` · https://docs.astro.build
- Remix / RR framework mode: `remix-run/agent-skills@react-router-framework-mode` · https://reactrouter.com/start/framework/installation
- See SKILL.md uncovered-frameworks block for the full pointer table

### Provenance
- `SOURCES.md`

## Optional
- [Visual guide](https://frontendengskill.vercel.app): router idea, craft domains, surfaces, laws, reference map.