project-structure

Name: project-structure
Availability: InStock
Author: Divine

Map divine-web source layout and boot flow from index.html to AppRouter.

46|28|Updated Sep 8, 2025

Search Tags:#react #routing #file organization #project structure #vite #tsconfig paths #contributor workflow

Ready to run

npx skills add https://github.com/divinevideo/divine-web --skill project-structure-divinevideo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: project-structure
Source: https://github.com/divinevideo/divine-web/tree/main/.agents/skills/project-structure
Command: npx skills add https://github.com/divinevideo/divine-web --skill project-structure-divinevideo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents wasted time and confusion by showing how divine-web is organized so you can quickly locate the correct place to add, move, or modify code.

Core Features & Use Cases

Source-first map of the app: Explains how React, routing, hooks, contexts, utilities, types, tests, config, data, and styles are laid out under src/.
Clear entry-point flow: Describes how index.html leads into main.tsx, App.tsx, and AppRouter.tsx to help trace execution.
Practical contribution guidance: Provides file placement rules and naming conventions (components, pages, hooks, contexts, types, tests) plus build/public/docs/script locations.

Quick Start

Ask for guidance on where to add a new feature by providing what you’re trying to build, for example: “Tell me where to put a new React hook, what naming it should use, and how it should be imported using the @/ alias.”

Frequently Asked Questions about project-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I organize React project files to find the right component fast?▼

To organize React project files effectively, map components, pages, hooks, contexts, utilities, and types under dedicated src/ directories. This structure prevents wasted time by showing exactly where each type of code lives.

What's the best way to add a new React hook to an existing Vite project structure?▼

Adding a new React hook requires placing it in the designated hooks directory under src/ and importing it using the @/ alias configured in tsconfig paths. This maintains consistent file placement and import conventions.

How does React routing work from index.html to the AppRouter?▼

React routing flows from index.html into main.tsx, then App.tsx, and finally AppRouter.tsx. This entry-point sequence traces execution to show how the application boots and initializes routes.

Where should tests and configuration files go in a React project?▼

Tests and configuration files belong in their dedicated directories alongside the src/ structure. Following these file placement rules ensures contribution guidance aligns with existing conventions for build, public, docs, and script locations.

Does this project structure convention support contributor workflow with tsconfig paths?▼

Yes, the project structure convention supports contributor workflow by leveraging tsconfig paths for consistent @/ alias imports. This ensures file placement rules and naming conventions align across components, pages, and hooks.