How does this skill differ from a general React coding assistant?

This skill enforces a specific 'house-standard' architecture for large-scale, multi-tenant React apps, prioritizing strict layering and server-side rendering (SSR) over generic, library-heavy development patterns.

What technical environments and AI agents are compatible with this skill?

The skill is designed for React 17+ TypeScript environments and is compatible with major AI agents that support code analysis and generation within a professional IDE or CLI workflow.

Can I use this skill if my project relies on Tailwind CSS or React Query?

No, this skill is purpose-built for a specific engineering standard that uses custom Fetchers, Redux, and CSS Modules; it intentionally excludes support for Tailwind, React Query, or CSS-in-JS.

Does this skill handle authentication and security patterns?

The skill provides specialized logic for the Express BFF (Backend-for-Frontend) bridge and Redux auth SDK to ensure secure, cookie-based token handling that is safe for SSR.

What is included in the purchase of this skill?

Upon purchase, you receive the full agent skill profile containing the logic, architectural constraints, and validation rules required to guide your AI in maintaining this specific React standard.

Does it support internationalization (i18n) and feature flagging?

Yes, the skill includes logic for managing i18n localization requirements and feature flag lifecycles to ensure all new code is production-ready for global, branded portals.

Production React Engineering

Example session with this skill installed

Add a paginated "My listings" page that loads its data on the server and has a delete action.

Read your context and instructions
Compiled the production react engineering
Generated the UI component

Summary

Added a server-rendered "My listings" page that follows the house patterns instead of pulling in new libraries. Example output; file names are illustrative.

What the agent decided

Concern	Pattern used	Instead of
Data loading	Fetcher framework slice, loaded in the route's `onEnter` so the server renders it	React Query or a `useEffect` fetch
HTTP	A method on the `BackendAPI` class	Calling `fetch()` in the component
Delete	Thunk that calls the API, then refreshes the Fetcher slice	Local component state
Styling	`MyListings.module.css` plus `classnames`	Tailwind or styled-components
Auth	Identity from a selector, token stays in the cookie	Reading a token from localStorage
Loading code	Loadable wrapper on the route	`React.lazy`

Shape of the component

import * as React from 'react';

type Props = {
  readonly pageSize: number;
};

const MyListings = ({ pageSize }: Props) => {
  const [page, setPage] = React.useState(1);
  // data comes from the Fetcher slice, loading and error from FetchState
  return null;
};

export default MyListings;

Next steps

Add a component test with the provider-wrapped render helper.
Add the route to the loadable map so the page is code split.

module.css

TSX · React component

Generated

Example file from a real run - the skill writes it into your workspace.

Connects securely to your tools. The creator never sees your data.

About this skill

One house style for a big React codebase

Teams lose weeks to "which library should we use for this?" This skill gives your agent a clear answer for every common frontend decision, so new code looks like it was written by the same team that wrote the rest of the app.

How it helps

No library roulette. Before the agent reaches for React Query, Tailwind, React Router or axios, it checks the house pattern: a Fetcher framework with plain Redux, CSS Modules, an SSR router, and a fetch-based API class.
Safer auth. Tokens live in HttpOnly cookies set by a backend-for-frontend, never in Redux or localStorage.
Faster, consistent pages. Server-side data loading in route handlers, code splitting with a loadable library, and a build-time desktop/mobile split.
Forms and charts that match. Formik with Yup, and lightweight SVG charts.
Easier reviews. Checklists and anti-patterns tell the agent, and the reviewer, what to avoid.

What's inside

A short SKILL.md with the non-negotiable foundations, plus 6 reference guides: structure and components and styling, state and data and performance, auth and API and errors, UI and forms and charts, routing and config and i18n, and search and testing.

Use it when

Building or reviewing React components, hooks, routes, Redux state, API calls, protected routes, forms, search, charts or feature flags, or scaffolding a new frontend that should follow these conventions.

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Free forever

No account required to browse

Production React Engineering