Build original frontend engineering collection with React, Query, Tailwind and icon qualification

[jdavis-software]

Delivered scope

The requested frontend collection is implemented as 25 original problem-oriented skills, each with a concrete procedure, original worked recipe, failure boundaries and three not-run host scenarios. Official framework documentation and selected open-source skill repositories informed requirements; upstream skill prose, design databases and application templates were not copied.

Coverage: React component architecture, rendering/performance and state ownership; TanStack Query; Next.js application architecture and Server Component boundaries; Tailwind CSS; design systems and design briefs; responsive layout; accessibility; React Hook Form; URL/navigation state; data/loading/error boundaries; storage/offline; background work; performance budgets; component/browser testing; visual regression; frontend security; motion; behavior-preserving refactoring; icon systems including React Icons; headless components including shadcn, Radix and Base UI.

Discovery and composition

• Frontend Engineering is a new primary category with 21 of the new skills. Four design-oriented additions enrich the existing Design & Communication category.
• Three overlapping bundles: Modern React Applications, Frontend Performance and Reliability, and Interface Design Systems. They reference canonical skill packages rather than copying them.
• Public static guide: /examples/frontend-engineering/, with state-ownership examples, an accessible icon recipe, native state-matrix disclosures and links to runnable source.
• Bundle resolution includes an explicit reviewed list of companion files; it does not install or execute them.
• Inventory: 113 entries / 104 original skills / 9 tools / 16 bundles / 15 categories. The 75 new host-scenario inputs remain not-run; the accumulated 294 inputs are not agent-host test results.

Actual executable React fixture

evals/frontend is an original, independently locked client-rendered example using React, TanStack Query v5, React Hook Form, Tailwind CSS v4 and named Bootstrap Icons through React Icons. It implements workspace-and-filter query identity, URL-owned navigation, validation with draft retention, scoped invalidation, serialized optimistic favorite updates with rollback, stale-data retention during background failure, explicit themes and semantic controls.

Tests exercise the actual QueryClient and browser-visible React behavior against controlled synthetic responses. The build compiles actual Tailwind CSS, includes required third-party notices and measures a predeclared compressed asset budget. Libraries and icon glyphs remain third-party software, not original toolkit claims.

The fixture's exact npm lock was generated by npm and installed using npm ci --ignore-scripts. Its React/DOM 19.3.0, Query 5.103.1, Hook Form 7.88.0, React Icons 5.7.0 and Tailwind/CLI 4.3.3 pins are recorded separately. The root Astro dependency graph and pnpm-lock.yaml are unchanged.

Final combined-candidate verification — passed

Final head d0efc182278be0df5a9381fca80903e9b1198e16, tree ae6f301ccc01f0c9fc6e4ccfd580bf57db27ca41, tested against main 14e143d113bc9f3288b9987bc3a5239d419b8c58. Downloaded production build-info.json identifies combined candidate d685f4604b1c38538b70e7e7a952bdeb7ecb5340 and the complete inventory above.

Validate toolkit and Qualify frontend fixture both completed successfully.

Check	Actual result
Frozen root installation; catalog/category/bundle/source/README validation	Passed
Root Node tests	262 passed
Sourcekit Python regressions	80 passed
Publicationcheck Python regressions	70 passed
Astro diagnostics and production build	Zero errors/warnings; two existing unused-symbol hints; build passed
Website Chromium browser/request cases	58 passed, zero unexpected/flaky/skipped
Isolated fixture install and TypeScript check	Passed
Actual React/Tailwind fixture build	Passed
Fixture domain and actual QueryClient tests	14 passed
Fixture React browser cases	24 passed, zero unexpected/flaky/skipped
Fixture source/lock preservation	git diff --exit-code passed

The downloaded fixture measurements report 95,943 gzip bytes of JavaScript against a 150,000-byte cap, and 3,427 gzip bytes of CSS against a 12,000-byte cap. These are the small synthetic fixture's compressed files, not field Web Vitals or an application-wide performance certification.

Browser coverage and actual defects fixed

The new site journeys cover category discovery, query/icon skill details, canonical sources, bundle navigation, guide disclosures, keyboard behavior and light/dark themes. Existing catalog search, no-JavaScript content, navigation and overflow assertions remain covered.

Actual React tests cover workspace isolation and URL history, form validation and server-error draft retention, duplicate submit prevention, optimistic rollback, background failure with retained data, late search results, malformed payload rejection, literal hostile-looking labels, accessible icon names/hidden decorative glyphs, keyboard refresh, reduced motion and long-label layout.

An initial run exposed duplicate sibling React keys because the list and form both used the workspace ID. Corrected these to separate items: and form: identities, then reran the workspace-switch assertions. Stale existing inventory/bundle/category test counts were also updated to the new canonical inventory. No required test or assertion was skipped to obtain a pass.

Existing Playwright automation ran desktop Chromium and iPhone 13-sized Chromium emulation. Final screenshots were inspected: static guide in dark/light and mobile layouts, and the actual React fixture in desktop dark/mobile light. The existing restrained dark/light and lime visual identity is preserved; card/column layouts stack on mobile; no clipping/overlap was observed in reviewed screenshots and the document-overflow assertions pass. This is not physical-device/Safari or screen-reader certification.

Artifact integrity

• Final website build/screenshots/report, ZIP SHA-256 fc4308543dcdbad12d1640fb4c02648287958fc83ab35e2e33217a319047959f. Embedded report confirms 58 expected passes and exact candidate/counts.
• Final React build/screenshots/report, ZIP SHA-256 6d86fe0f2105aea216ce6981f2c2e364f8a535533d07def5655c2233ff13c2e9. Report confirms 24 expected passes; measurements and third-party notices were inspected.

Both archives were downloaded and their digests verified before inspection.

Limits and preservation

The public guide is static Astro content, not the React fixture running inside the published website. The fixture can be run from a full checkout using the documented loopback-only development server. It uses no real accounts, production APIs or persistent product data.

No Next.js server deployment/RSC/hydration, real authentication/authorization, IndexedDB migration, Web Worker lifecycle, Motion/Radix/shadcn integration or agent-host effectiveness is certified by these client-fixture tests. The relevant skills describe separate task-specific qualification. Query-key partitioning is not tenant authorization.

No root website dependency/lockfile upgrades, new scheduler, model/provider spending, private credentials, original-content license decision, or private DriftGate/AvatarOps repo/config/MCP changes. Third-party package licenses and the actual Bootstrap icon-family notice are retained. All temporary source-transfer/export workflows and fragments are absent from the final source tree.

Canonical scope and commands: docs/FRONTEND_ENGINEERING.md. Research: docs/research/FRONTEND_ENGINEERING.md. After merge, verify main validation, the frontend fixture workflow, Pages deployment and the exact public revision before reporting publication complete.