← Back to Skills Marketplace
27
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install my-frontend-starter
Description
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-fro...
README (SKILL.md)
\r \r
My Frontend Starter\r
\r
Project Overview\r
\r
Angular 19 LTS SPA with Angular Material, served via nginx in Docker.\r
\r
Location: src/labs/lab10/my-frontend/\r
\r
Quick Start\r
\r
cd src/labs/lab10/my-frontend\r
\r
# Docker (recommended)\r
docker compose up --build\r
# → http://localhost:4200\r
\r
# Without Docker\r
npm install\r
npm start\r
# → http://localhost:4200\r
```\r
\r
## Project Structure\r
\r
```\r
src/\r
├── app/\r
│ ├── app.component # Root: toolbar + router-outlet\r
│ ├── app.module.ts # Root NgModule (all components declared here)\r
│ ├── app-routing.module.ts # All routes defined here\r
│ ├── users/ # /users — user list from API\r
│ ├── comments/ # /comments — comments from API\r
│ ├── rest/ # /rest — API demo page\r
│ └── rest.service.ts # HTTP service (providedIn: 'root')\r
├── gallery/\r
│ ├── gallery.module.ts # Feature module\r
│ └── gallery.component # /gallery — image gallery\r
└── main.ts # Bootstrap\r
```\r
\r
## Routes\r
\r
| Path | Component | Data Source |\r
|------|-----------|-------------|\r
| `/users` | UsersComponent | JSONPlaceholder `/users` |\r
| `/comments` | CommentsComponent | JSONPlaceholder `/comments` |\r
| `/gallery` | GalleryComponent | picsum.photos |\r
| `/rest` | RestComponent | Static placeholder |\r
\r
## Key Conventions\r
\r
- **All components use `standalone: false`** (NgModule pattern)\r
- **All routes in `AppRoutingModule`** (no `forChild` in feature modules)\r
- **All Material modules imported in `AppModule`**\r
- **Typed API responses** — `User[]`, `Comment[]`, no `any`\r
- **API base**: `https://jsonplaceholder.typicode.com`\r
\r
## Docker\r
\r
| Command | Description |\r
|---------|-------------|\r
| `docker compose up --build` | Build + run |\r
| `docker compose down` | Stop |\r
| `docker compose logs -f` | Logs |\r
\r
Multi-stage: Node 22 (build) → nginx Alpine (~50MB).\r
\r
## Common Issues\r
\r
| Issue | Fix |\r
|-------|-----|\r
| `NG6008: Component is standalone` | Add `standalone: false` to `@Component` |\r
| `TS2792: Cannot find module '@angular/core'` | Set `moduleResolution: "bundler"` in tsconfig |\r
| `TS2307: Cannot find module 'rxjs'` | `npm install [email protected]` |\r
| `NG2003: No suitable injection token` | Add `@Injectable({ providedIn: 'root' })` |\r
| Gallery route redirects to `/users` | Move route from `GalleryModule.forChild` to `AppRoutingModule` |\r
| Dependabot alerts for `tar`, `picomatch`, `tmp` | Dev dependencies only — not in Docker image |\r
\r
## Updating Angular\r
\r
Safe path: 16 → 17 → 19 LTS. Don't jump to 22 (requires TS 6.x, new build system).\r
\r
After updating:\r
1. Delete `node_modules` + `package-lock.json`\r
2. `npm install`\r
3. Add `standalone: false` to all components\r
4. Set `moduleResolution: "bundler"` in tsconfig\r
5. `ng build --configuration development`\r
\r
## Verification\r
\r
1. `ng build --configuration development` — 0 errors\r
2. All 4 routes render correctly\r
3. API calls return 200\r
4. No browser console errors\r
Usage Guidance
Install this only if you are working on the referenced Angular frontend project. Before running the documented Docker or npm commands, review the project dependencies and remember that the sample app uses public demo services such as JSONPlaceholder and picsum.photos.
Capability Assessment
Purpose & Capability
The stated purpose is an Angular 19 SPA starter for a specific project path, and the artifact only documents project structure, routes, conventions, troubleshooting, Docker, npm, and build verification steps.
Instruction Scope
Instructions are scoped to the named frontend project and contain ordinary user-directed development commands; no role changes, hidden directives, credential handling, exfiltration, or unrelated automation were found.
Install Mechanism
The package contains a single non-executable SKILL.md file and no install scripts, binaries, hooks, or generated runtime assets.
Credentials
The guide asks users to run Docker and npm install/start and references public demo APIs, which is expected for a frontend starter but should be run only in the intended project environment.
Persistence & Privilege
No background workers, privilege escalation, credential/session access, or automatic persistence are present; the only file mutations described are normal user-directed dependency/update steps such as node_modules and package-lock handling.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install my-frontend-starter - After installation, invoke the skill by name or use
/my-frontend-starter - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release of Angular 19 SPA starter kit.
- Provides Angular 19 LTS setup with Material Design, Docker (Node/nginx), and example routes.
- Includes usage instructions for both Docker and local development.
- Documents folder structure, route map, key conventions, and troubleshooting tips.
- Lists common errors with solutions and Angular upgrade procedure.
- Ensures typed API usage and best practices for maintainability.
Metadata
Frequently Asked Questions
What is My Frontend Starter?
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-fro... It is an AI Agent Skill for Claude Code / OpenClaw, with 27 downloads so far.
How do I install My Frontend Starter?
Run "/install my-frontend-starter" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is My Frontend Starter free?
Yes, My Frontend Starter is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does My Frontend Starter support?
My Frontend Starter is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created My Frontend Starter?
It is built and maintained by tomekdot (@tomekdot); the current version is v1.0.0.
More Skills