scaffold

To generate Next.js Atomic Design components without manual boilerplate, you can use a scaffolding tool to automatically create atoms, molecules, and organisms. This ensures correct folder structure, TypeScript types, and consistent naming conventions while preventing manual setup errors.

The best way to scaffold Next.js App Router pages with TypeScript is to automatically generate the skeleton files using project-aligned conventions. This approach applies kebab-case filenames, named exports, and appropriate 'use client' directives to maintain consistency across your repository.

Yes, you can use shadcn/ui imports and cn() utilities when scaffolding components. The generated boilerplate aligns with project-specific dependencies, automatically wiring imports from `@/components/ui/*` and applying the `cn()` function from `@/lib/utils` to match existing repository patterns.

Yes, the component scaffolding process supports custom import aliases. It matches your repository's existing file patterns and automatically applies repo import aliases, such as `@/*`, ensuring that the newly generated TypeScript components integrate seamlessly without breaking your current import structure.

You need to add the 'use client' directive to a scaffolded Next.js component only when client-side interactivity is required. The scaffolding process handles this automatically, ensuring that server components remain default and the directive is applied solely when needed for specific atomic design building blocks.