From 7ffb60d52c59b6090dfc307f414b9ea5f7a45251 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sat, 29 Nov 2025 18:49:53 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 ++++ README.md | 3 + commands/create-angular-app.md | 36 +++++++++++ commands/ng-component.md | 24 ++++++++ commands/ng-module.md | 44 ++++++++++++++ commands/ng-service.md | 28 +++++++++ plugin.lock.json | 61 +++++++++++++++++++ skills/claude-dev-toolkit/SKILL.md | 97 ++++++++++++++++++++++++++++++ 8 files changed, 305 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 commands/create-angular-app.md create mode 100644 commands/ng-component.md create mode 100644 commands/ng-module.md create mode 100644 commands/ng-service.md create mode 100644 plugin.lock.json create mode 100644 skills/claude-dev-toolkit/SKILL.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..b36dbaf --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "claude-dev-toolkit", + "description": "Angular development toolkit with Skills and Commands for scaffolding Angular apps, components, services, and modules", + "version": "1.0.0", + "author": "James Scales", + "skills": [ + "./skills" + ], + "commands": [ + "./commands" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..a32122f --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# claude-dev-toolkit + +Angular development toolkit with Skills and Commands for scaffolding Angular apps, components, services, and modules diff --git a/commands/create-angular-app.md b/commands/create-angular-app.md new file mode 100644 index 0000000..cb91677 --- /dev/null +++ b/commands/create-angular-app.md @@ -0,0 +1,36 @@ +--- +description: Create a new Angular application with routing and guards +argument-hint: [app-name] +--- + +Create a new Angular application named $1 with the following structure: + +1. Use Angular CLI to create the app with routing and SCSS: + ```bash + ng new $1 --routing --style=scss + ``` + +2. Generate essential structure: + ```bash + cd $1 + ng generate guard auth/guards/auth + ng generate service auth/services/auth + ng generate module core + ng generate module shared + ng generate component core/components/layout + ``` + +3. Create a basic folder structure: + - `src/app/core/` - Core functionality (singletons, guards, interceptors) + - `src/app/shared/` - Shared components, directives, pipes + - `src/app/features/` - Feature modules + - `src/app/auth/` - Authentication logic + +4. Initialize git repository if not already done + +5. Create a README.md explaining the project structure and how to run it + +After creation, provide the user with: +- Next steps to run the application +- Explanation of the folder structure +- Common commands they might need diff --git a/commands/ng-component.md b/commands/ng-component.md new file mode 100644 index 0000000..7dbdd7a --- /dev/null +++ b/commands/ng-component.md @@ -0,0 +1,24 @@ +--- +description: Generate a new Angular component +argument-hint: [path/component-name] +--- + +Generate a new Angular component at $1: + +1. Create the component using Angular CLI: + ```bash + ng generate component $1 + ``` + +2. The component will include: + - TypeScript component class + - HTML template + - CSS/SCSS stylesheet + - Spec file for testing + +3. Provide guidance on: + - How to use the component in templates + - Common component patterns (inputs, outputs, lifecycle hooks) + - Where to import it if needed + +If the user didn't specify a path, ask them where they want to create it (e.g., `features/user/components/user-profile` or `shared/components/button`). diff --git a/commands/ng-module.md b/commands/ng-module.md new file mode 100644 index 0000000..7006434 --- /dev/null +++ b/commands/ng-module.md @@ -0,0 +1,44 @@ +--- +description: Generate a new Angular feature module +argument-hint: [module-name] [--routing] +--- + +Generate a new Angular feature module named $1: + +1. Create the module with routing (if requested): + ```bash + ng generate module $1 --routing + ``` + + Or without routing: + ```bash + ng generate module $1 + ``` + +2. The module will include: + - NgModule class with @NgModule decorator + - Routing module (if --routing flag used) + - Proper imports and exports structure + +3. Set up recommended structure: + ``` + src/app/features/$1/ + ├── components/ + ├── services/ + ├── models/ + ├── $1.module.ts + └── $1-routing.module.ts (if routing enabled) + ``` + +4. Provide guidance on: + - How to lazy-load the module in app routing + - How to organize feature components + - When to use shared vs feature modules + - How to export components for use in other modules + +5. If creating a feature module, suggest: + - Creating a landing/container component + - Setting up routing for the feature + - Adding it to the main app routing with lazy loading + +Ask the user if they want routing enabled and what type of module this is (feature, shared, or core). diff --git a/commands/ng-service.md b/commands/ng-service.md new file mode 100644 index 0000000..5986131 --- /dev/null +++ b/commands/ng-service.md @@ -0,0 +1,28 @@ +--- +description: Generate a new Angular service +argument-hint: [path/service-name] +--- + +Generate a new Angular service at $1: + +1. Create the service using Angular CLI: + ```bash + ng generate service $1 + ``` + +2. The service will include: + - TypeScript service class with @Injectable decorator + - Spec file for testing + - providedIn: 'root' for singleton pattern (by default) + +3. Provide guidance on: + - How to inject the service into components + - Common service patterns (HTTP calls, state management, business logic) + - Best practices for service organization + +4. Suggest appropriate location based on service type: + - Core services (singleton, app-wide) → `core/services/` + - Feature-specific services → `features/{feature-name}/services/` + - Shared utilities → `shared/services/` + +If the user didn't specify a path, ask them what type of service it is and suggest the appropriate location. diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..d7370cd --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,61 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jamesscalescode/claude-dev-toolkit:", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "1ea054b85a0602ec70b0324e75614449407aafa6", + "treeHash": "ea4ca4e5dec834922448f4eb2e3e408d43bb87926af79f41f6dc89d9499bdc64", + "generatedAt": "2025-11-28T10:17:56.816972Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "claude-dev-toolkit", + "description": "Angular development toolkit with Skills and Commands for scaffolding Angular apps, components, services, and modules", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "6378815e78b2ed83ab191831ee6f050ed2c92f33ddba3b2d8be6488237c6a85f" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "e446426e4642d6655aeb928bb2631e8fbfb50c803c8bdaf39a7c638574d1acff" + }, + { + "path": "commands/ng-service.md", + "sha256": "e7322cdf280f34c9d7f2c306b9e5a305669c867d2f04b748ac29a67c9efb9ac9" + }, + { + "path": "commands/ng-module.md", + "sha256": "c7608bb2d51e14671389b213388f13204b9590bd9c66f886145810a98155878c" + }, + { + "path": "commands/create-angular-app.md", + "sha256": "038cc717823219c25586a0cb9743dd3a6a03df9688d4beedab0e2bcb385d1e49" + }, + { + "path": "commands/ng-component.md", + "sha256": "f49d3beef708112fc0e73b6fcd049b2868754dd9d81c12cc55a8dd0ad77f1de9" + }, + { + "path": "skills/claude-dev-toolkit/SKILL.md", + "sha256": "6572f11ca66dba5b53b4f6a95f01790f3af2466717218b4b9aed3ff0463c6dd4" + } + ], + "dirSha256": "ea4ca4e5dec834922448f4eb2e3e408d43bb87926af79f41f6dc89d9499bdc64" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/claude-dev-toolkit/SKILL.md b/skills/claude-dev-toolkit/SKILL.md new file mode 100644 index 0000000..7d2c567 --- /dev/null +++ b/skills/claude-dev-toolkit/SKILL.md @@ -0,0 +1,97 @@ +--- +name: claude-dev-toolkit +description: Use this skill when the user wants to create Angular applications, generate Angular components/services/modules, or automate Angular development workflows. Handles scaffolding complete Angular apps with routing and guards, generating individual Angular artifacts, setting up project structure, and initializing git repositories with Angular best practices. +--- + +# Claude Dev Toolkit - Angular Development + +This skill provides automated workflows for Angular development tasks. + +## Capabilities + +### 1. Angular Application Scaffolding +When the user requests an Angular app, create a well-structured Angular application with: +- Routing configuration +- Authentication guards +- Service structure +- Component architecture +- Core and Shared modules +- Best practices for folder organization + +**Command to execute:** +```bash +ng new {app-name} --routing --style=scss +cd {app-name} +ng generate guard auth/guards/auth +ng generate service auth/services/auth +ng generate module core +ng generate module shared +ng generate component core/components/layout +``` + +Create folder structure: +- `src/app/core/` - Core functionality (singletons, guards, interceptors) +- `src/app/shared/` - Shared components, directives, pipes +- `src/app/features/` - Feature modules +- `src/app/auth/` - Authentication logic + +After generation, create a README explaining the structure. + +### 2. Angular Component Generation +Generate Angular components with proper structure: +```bash +ng generate component {path}/{component-name} +``` + +Include component, template, styles, and spec file. Use proper naming conventions. + +### 3. Angular Service Generation +Generate Angular services: +```bash +ng generate service {path}/{service-name} +``` + +Follow singleton pattern for core services, place in appropriate module. + +### 4. Angular Module Generation +Generate feature modules with routing: +```bash +ng generate module {module-name} --routing +``` + +### 5. Git Repository Initialization +Initialize a git repo with Angular-specific best practices: +- Create `.gitignore` for Angular/Node.js projects +- Initialize git +- Create initial commit +- Create a basic README with Angular commands +- Include common Angular build artifacts in .gitignore + +### 6. Angular Guards & Interceptors +Generate guards and HTTP interceptors: +```bash +ng generate guard {path}/{guard-name} +ng generate interceptor {path}/{interceptor-name} +``` + +## Usage Guidelines + +1. **Always verify prerequisites** - Check if Angular CLI is installed (`ng version`) +2. **Ask for confirmation** - Before creating files/folders, confirm names and locations +3. **Follow Angular style guide** - Use Angular naming conventions and best practices +4. **Provide next steps** - After generating, tell user how to use/integrate the code +5. **Document everything** - Create README files and code comments + +## Example Interactions + +User: "Create an Angular app called my-dashboard" +→ Use capability #1, verify ng is installed, create app with routing and guards + +User: "Generate a user service" +→ Use capability #3, create service in appropriate location + +User: "Add an auth guard" +→ Use capability #6, generate guard with authentication logic template + +User: "Create a products feature module" +→ Use capability #4, generate module with routing