Menu
Component organization patterns for React applications. Use when creating components, organizing files, or structuring routes. ALWAYS keep 1 component per file and routes simple.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Standard Schema socka contracts (defineSocka), v1 wire envelopes, SockaSession/SockaWebSocketClient, React useSockaSession and SockaSessionProvider, SockaError.
SockaDoSession and SockaWebSocketDO on Cloudflare Durable Objects—contract, handlers, wireFormat, SockaError; extends websocket-do BaseSession.
Standard Schema v1 for socka contracts and wire validation—Zod, Valibot, or any compatible library; no Zod-only public surface.
Enforce strict TypeScript typing without escape hatches. Never use `any`, `as` casts to bypass the compiler, or similar workarounds—find the proper typed solution instead.
React Router v7 routing patterns and environment variable configuration. Use when adding routes, configuring routing, or setting up environment variables.
Read when implementing multi-phase work after a plan exists. Mandatory—mkdir+touch then Write/StrReplace (no heredocs), update the temp punch list at every phase boundary, one item at a time, per-phase tests. Complements punch-list-planning for authors.
| name | component-organization |
| description | Component organization patterns for React applications. Use when creating components, organizing files, or structuring routes. ALWAYS keep 1 component per file and routes simple. |
Each component in its own file with a clear, descriptive name.
// ✅ Good - components/admin/settings/SiteInfoSection.tsx
export function SiteInfoSection({ siteName, siteUrl, onUpdate }) {
return <div className="space-y-4">{/* ... */}</div>;
}
// ❌ Bad - Multiple components in one file
export function SiteInfoSection() { ... }
export function ThemeSection() { ... }
export function SEOSection() { ... }
app/
├── components/
│ ├── ui/ # Primitives (button, input, card)
│ ├── shared/ # Cross-feature shared
│ └── [feature]/ # Feature-specific
│ └── [page]/ # Page-specific
├── features/
│ └── [feature]/
│ ├── components/
│ ├── hooks/
│ └── stores/
└── routes/
└── ... # Thin wrappers
Routes are thin wrappers: keep loaders/actions in the route, move JSX to a page component.
// ✅ Good - routes/admin/settings.tsx
import { SettingsPage } from "~/components/admin/settings/SettingsPage";
export const loader = async ({ request }: Route.LoaderArgs) => {
const settings = await getAllSettings();
return { settings };
};
export default function SettingsRoute() {
const { settings } = useLoaderData<typeof loader>();
return <SettingsPage settings={settings} />;
}
// ❌ Bad - Large JSX in route file
export default function SettingsRoute() {
return (
<div>
{/* 800+ lines of JSX */}
</div>
);
}
The page component composes smaller section components:
// components/admin/settings/SettingsPage.tsx
import { SiteInfoSection } from "./SiteInfoSection";
import { ThemeSection } from "./ThemeSection";
export function SettingsPage({ settings }) {
return (
<div className="container">
<SiteInfoSection data={settings.siteInfo} />
<ThemeSection data={settings.theme} />
</div>
);
}
components/ui/components/shared/components/[feature]/ or features/[feature]/components/components/[feature]/[page]/Create a new file for each component. Prefer small, focused files.