← 返回 Skills 市场
27
总下载
0
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install 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...
使用说明 (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
安全使用建议
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.
能力评估
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.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install my-frontend-starter - 安装完成后，直接呼叫该 Skill 的名称或使用
/my-frontend-starter触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
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.
元数据
常见问题
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... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 27 次。
如何安装 My Frontend Starter？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install my-frontend-starter」即可一键安装，无需额外配置。
My Frontend Starter 是免费的吗？
是的，My Frontend Starter 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
My Frontend Starter 支持哪些平台？
My Frontend Starter 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 My Frontend Starter？
由 tomekdot（@tomekdot）开发并维护，当前版本 v1.0.0。
推荐 Skills