page-development
Generate and remove route pages in `app/routes` using the template `sample-page.tsx` and automatic route wiring in `app/routes.ts`.
SKILL.mdskills/page-development/SKILL.md
GitHubPage Development
When to use
- Creating a new route page from
_template/page/sample-page.tsx. - Registering the new page in
app/routes.tswithout manual edits. - Removing a previously generated page and its route entry.
Quick start
- Generate page:
ill addPage sample-page- or
ill addPage --name sample-page
- CLI creates
app/routes/sample-page.tsx(name is normalized to kebab-case for file and route path). - CLI ensures route config supports
route(...)helper and injects:route('sample-page', 'routes/sample-page.tsx')
- Remove page when needed:
ill removePage sample-page- or
ill removePage --name sample-page
What CLI edits
app/routes.ts- Adds/removes
route('<name-kebab>', 'routes/<name-kebab>.tsx'). - Adds
routeimport when needed. - Returns import back to
index-only if no dynamic page routes remain.
- Adds/removes
app/routes/<name-kebab>.tsx- File is created from
_template/page/sample-page.tsx. - Placeholders are renamed with case-aware replacements:
SamplePage->${NamePascal}sample-page->${nameKebab}Sample Page->${NamePascal}
- File is created from
Naming rules
- Recommended input: kebab-case (
faq-page) or PascalCase (FaqPage). - Result path is always kebab-case (
app/routes/faq-page.tsx). - Component name inside file is PascalCase (
FaqPage).
Final checks
app/routes.tscontains exactly one route line per generated page.app/routes/<name-kebab>.tsxexists and exports a default component.- After removal, route line and page file are both deleted.