AI Blocks › Build and ship software
React app structure planner
Point it at a React or React Native app. Get a clear folder layout and rules for what may import what.
React app structure planner is a free AI skill for the job "Build and ship software". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33 · Level: advanced · Thinking: high
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
A clear folder layout for your React or React Native app, plus simple rules for what may import what. Any contributor can then answer where code lives without asking anyone. It organises the app into feature modules. Each module owns its own pages, components, hooks, state, types and one public entry point. Pages are folders, not single files, holding the code only they use. The skill also sorts state into server state and UI state, so you know where each belongs. The structure fits Next.js, Vite, Remix and Expo with any state or styling library. Point it at an existing app and it shows how to move toward this layout.
You give it
- Your app folder or a description of it
- Framework in use
- Current pain points (optional)
You get
- Folder layout by feature
- Import rules between layers
- Server state versus UI state guide
- Steps to migrate an existing app
Use it when
- Your React project has become a tangle of folders.
- New team members keep asking where code should go.
- Features are importing each other in a circle.
- You are starting a React Native app and want a clean base.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can read your project files.