my-frontend-starter
Skill1 starsChanged 5 months agoMITView on GitHub
My Frontend — Angular 19 SPA starter with Material Design, Docker, and nginx. Use when working on the my-frontend project (KUL-2023-API/src/labs/lab10/my-frontend).
- Installs packages
In this repository10 other files it gives its agents.
- github-actions-node24-scannerSkill
- github-pages-deploySkill
- maniaplanet-items-organizerSkill
- self-improvementSkill
- angular-frontendSkill
- computer-use-cua-firefoxSkill
- openplanet-plugin-devSkill
- pursuit-mapsSkill
- pyplanetSkill
- rename-git-commitsSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 92
Add standalone: false to all components
- Distinctive: line 99
All 4 routes render correctly
- Distinctive: line 101
No browser console errors
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
My Frontend Starter
Project Overview
Angular 19 LTS SPA with Angular Material, served via nginx in Docker.
Location: src/labs/lab10/my-frontend/
Quick Start
cd src/labs/lab10/my-frontend
# Docker (recommended)
docker compose up --build
# → http://localhost:4200
# Without Docker
npm install
npm start
# → http://localhost:4200Project Structure
src/
├── app/
│ ├── app.component # Root: toolbar + router-outlet
│ ├── app.module.ts # Root NgModule (all components declared here)
│ ├── app-routing.module.ts # All routes defined here
│ ├── users/ # /users — user list from API
│ ├── comments/ # /comments — comments from API
│ ├── rest/ # /rest — API demo page
│ └── rest.service.ts # HTTP service (providedIn: 'root')
├── gallery/
│ ├── gallery.module.ts # Feature module
│ └── gallery.component # /gallery — image gallery
└── main.ts # BootstrapRoutes
| Path | Component | Data Source |
/users | UsersComponent | JSONPlaceholder /users |
/comments | CommentsComponent | JSONPlaceholder /comments |
/gallery | GalleryComponent | picsum.photos |
/rest | RestComponent | Static placeholder |
Key Conventions
- All components use
standalone: false(NgModule pattern) - All routes in
AppRoutingModule(noforChildin feature modules) - All Material modules imported in
AppModule - Typed API responses —
User[],Comment[], noany - API base:
https://jsonplaceholder.typicode.com
Docker
| Command | Description |
docker compose up --build | Build + run |
docker compose down | Stop |
docker compose logs -f | Logs |
Multi-stage: Node 22 (build) → nginx Alpine (~50MB).
Common Issues
| Issue | Fix |
NG6008: Component is standalone | Add standalone: false to @Component |
TS2792: Cannot find module '@angular/core' | Set moduleResolution: "bundler" in tsconfig |
TS2307: Cannot find module 'rxjs' | npm install rxjs@7.8.1 |
NG2003: No suitable injection token | Add @Injectable({ providedIn: 'root' }) |
Gallery route redirects to /users | Move route from GalleryModule.forChild to AppRoutingModule |
Dependabot alerts for tar, picomatch, tmp | Dev dependencies only — not in Docker image |
Updating Angular
Safe path: 16 → 17 → 19 LTS. Don't jump to 22 (requires TS 6.x, new build system).
After updating:
- Delete
node_modules+package-lock.json npm install- Add
standalone: falseto all components - Set
moduleResolution: "bundler"in tsconfig ng build --configuration development
Verification
ng build --configuration development— 0 errors- All 4 routes render correctly
- API calls return 200
- No browser console errors
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.