I've been stuck in what I call "boilerplate purgatory" for the last six months on our internal component library. Every new React component required the same tedious ritual: create the `.tsx` file, the `.module.scss` file, the `index.ts` barrel export, the `Component.stories.tsx`, and the `Component.test.tsx`. The mental context switch from designing the actual logic to setting up these five empty files was murder on flow state.
Enter Aider. I'd been using it for pair-programming on bug fixes, but its `--template` flag caught my eye. I decided to see if I could weaponize it against the boilerplate problem. The goal was a single command that would generate the entire, interconnected component skeleton from a one-line description.
The setup wasn't trivial, but the payoff was. I created a template directory with Mustache templates for each file type. The key was the `aider.toml` configuration to map a specific prompt pattern to the template set.
Here's the core of the `aider.toml`:
```toml
[template_dirs]
components = "./.aider/templates/components"
[templates.components]
description = "Generate a new React component with stories and tests"
prompt = "Create a new component called {name} that {description}"
files = [
"src/components/{{name}}/{{pascalCase name}}.tsx",
"src/components/{{name}}/{{pascalCase name}}.module.scss",
"src/components/{{name}}/index.ts",
"src/components/{{name}}/{{pascalCase name}}.stories.tsx",
"src/components/{{name}}/{{pascalCase name}}.test.tsx"
]
```
Each template file contains the standard structure with Mustache placeholders. The `.stories.tsx` template imports from the yet-to-exist component file, the `index.ts` re-exports it, etc.
Now, instead of the 15-minute file creation and import dance, I run:
`aider --template components "Create a new component called StatusBadge that displays a colored badge based on an enum prop"`
It generates all five files with correct import paths, a basic prop interface, a placeholder SCSS class, a default Storybook story, and a vitest test skeleton. The generated component is, of course, just a shell—but it's a *correct* shell, with all the cross-references already wired. This eliminates the "module not found" errors that always sneak in when I do this manually at 4 PM on a Friday.
The real win is consistency. Every component now starts with the same linting rules, the same comment structure for props, the same story args pattern. It's like enforcing an API contract for your own component creation process.
I've since expanded this to two other boilerplate-heavy areas:
* **API Service Modules:** Templates for the Axios instance wrapper, request/response type definitions, and a query hook for TanStack Query.
* **Custom Middleware Handlers:** For our Express-based integration layer, generating the skeleton for a new webhook endpoint with validation, logging, and error handling stubs.
The middleware template alone saved me from writing the same `try-catch` block and Slack alert function for the tenth time. It’s not that I couldn't write it; it's that I *shouldn't have to*. Let the machine handle the predictable parts.
Has anyone else used Aider's templating system to automate their own repetitive patterns? I'm particularly curious if you've found clever ways to chain templates or inject context from existing project files that my setup might be missing.
APIs are not magic.
Ooh, I love seeing Aider used this way! The `--template` flag is a game-changer for IaC too. I've been using a similar setup to generate Terraform module scaffolds, but you've given me an idea to bake in some security guardrails from the start.
Could you share a snippet of one of your Mustache templates? I'm curious how you handle the variable substitutions for the component name across all those different file types. I bet the barrel export template is just a one-liner, but the `.stories.tsx` one must have some logic.
Infrastructure as code is the only way