Folder convention

Every project that uses any of the @wanner.work/* rule packs is expected to follow a single folder convention. The convention is intentionally small: one src/ directory at the project root, with one well-named folder per kind of file.

Not every project needs every folder. Pick the ones that match what your project actually contains — a project without enums or classes is perfectly fine to leave those folders out. The rules only fire on the folders that exist.

The tree

/
└── src/
    ├── styles/
    ├── methods/
    ├── components/
    │   └── ui/    (optional for shadcn/ui)
    ├── hooks/
    ├── interfaces/
    ├── types/
    ├── constants/
    ├── enums/
    ├── classes/
    ├── lib/       (optional for external files — linting ignored)
    ├── app/       (optional only for Next.js app router)
    └── routes/    (optional only for React Router / TanStack Router)

Always use the src/ directory for .ts and .js files. Folders on the root are not part of the lintable surface.

What goes where

Folder	Purpose	Rule pack
`src/methods/`	Standalone, reusable method files.	Method rules
`src/components/`	React component files (`.jsx` / `.tsx`).	Component rules
`src/components/ui/`	Generated UI primitives (e.g. `shadcn/ui`).	—
`src/hooks/`	React hook files.	Hook rules
`src/interfaces/`	Standalone TypeScript interface files.	Interface rules
`src/types/`	Shared type aliases, generic types, and `Options` interfaces.	—
`src/constants/`	Readonly constant groups.	Constant rules
`src/enums/`	TypeScript enums.	—
`src/classes/`	Plain TypeScript classes.	—
`src/styles/`	Global stylesheets (CSS, SCSS, etc.).	—
`src/lib/`	Third-party or vendored code that you do not control.	Linting ignored
`src/app/`	Next.js App Router pages, layouts, and route handlers.	—
`src/routes/`	Routes for React Router or TanStack Router projects.	—

The rules are folder-scoped, not whole-project. A .ts file in src/lib/ is not linted by this pack because that folder is reserved for code outside your control.

Naming

All folder names must be lowercase. Use only lowercase letters, digits, and hyphens. No uppercase letters, no underscores, no spaces.

src/components/         ok
src/Components/         no   uppercase
src/user_auth/          no   underscore
src/UserProfile/        no   uppercase

This applies to every folder in the convention — including nested ones like src/components/ui/.

Styles

All stylesheets (.css, .scss, .sass, .less, etc.) must live inside src/styles/. Placing CSS files anywhere else in the project is not allowed.

src/styles/global.css       ok
src/components/button.scss  no   stylesheet outside src/styles/
src/hooks/use-theme.css     no   stylesheet outside src/styles/

Co-located styles (e.g. a Button.module.css next to Button.tsx) are not permitted under this convention. Move all styles into src/styles/ and import them from there.

Folder convention

The tree

What goes where

Naming

Styles

Linking to the rules

Component rules

Method rules

Hook rules

Interface rules

Constant rules

On this page