Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsPragmatic React & TypeScript Conventions
Enforce one obvious owner, typed data contracts, and clean Suspense boundaries so your React codebase survives a year of product edits.
Free
Pragmatic React & TypeScript Conventions
Example session with this skill installed
We're migrating our internal billing dashboard to React 19 with TypeScript strict mode, using TanStack Query, TanStack Router, and MUI v7. The invoices feature in src/features/invoices has grown organically: components fetch their own data, loading spinners are nested three levels deep, and someone cast the API response to any to silence a build error. Please review the feature against our frontend conventions, restructure data access around suspense queries at the right boundaries, fix the MUI Grid usages, and give me a merge-readiness report with before/after notes.
- Read your context and instructions
- Compiled the pragmatic react
- Generated the UI component
Summary
Reviewed the invoices feature (7 components, 2 routes) against the React/TS conventions. Three ownership violations and one missing suspense boundary were fixed; the module is now merge-ready.
| Area | Before | After |
|---|---|---|
| Data fetching | Inline fetch in InvoiceTable.tsx, manual isLoading flags in 3 children | useSuspenseQuery at route boundary via invoiceApi.getSummary |
| Types | any-cast on API response, shared AppState blob | Typed InvoiceSummary DTO in features/invoices/types |
| Layout | Cross-feature imports from src/utils/invoices.ts | Public features/invoices/index.ts exports only |
| Styling | Legacy <Grid xs={12}> v5 syntax (11 sites) | <Grid size={{ xs: 12, md: 6 }} /> |
| Performance | Search hit the API on every keystroke | useDebouncedValue(query, 300) |
| Bundle | Reports editor eager-loaded in main chunk | lazy() + WorkspaceSkeleton fallback |
Next steps
- Run tsc --noEmit and route smoke tests before merging
- Adopt the same pattern for features/projects next sprint
- Add the 10-point merge checklist to your PR template
pragmatic-react-typescript-conventions.tsx
TSX · React component
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
The problem
React codebases often degrade into a mess of prop drilling, inconsistent loading states, and untyped data fetching. Maintenance becomes impossible when business logic is scattered across generic UI components without clear ownership.
What it does
- Enforces a feature-based folder structure to isolate domain logic from shared UI.
- Standardizes Suspense-based data fetching to eliminate repetitive loading booleans.
- Provides strict TypeScript patterns for DTOs and API contracts.
- Updates component implementations to use MUI v7 syntax and TanStack Router conventions.
- Integrates performance defaults like debouncing, memoization, and lazy loading.
Frameworks & tools
React, TypeScript, Material UI (MUI) v7, TanStack Query (React Query), and TanStack Router.
Why this beats prompting it yourself
General-purpose LLMs often suggest outdated React patterns or mix competing state management styles. This skill provides a cohesive architectural blueprint, ensuring every component follows a predictable structure that scales without architectural drift.
Use cases
- Refactoring legacy class or hook-based components to modern Suspense patterns.
- Scaffolding new feature modules with colocated types and API hooks.
- Conducting PR reviews to ensure MUI v7 and TypeScript best practices are met.
Known limitations
Requires a project setup using TanStack Query and Router. Not intended for small, single-file prototypes where architectural overhead is unnecessary.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
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
2 installs
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 10 days ago
- Free to download with an account