skills/.system/jwebmp-tsclient/SKILL.md
TypeScript client generation for JWebMP plugins. Provides annotations and utilities for generating TypeScript interfaces, components, services, and modules from Java code. Supports @TsDependency, @TsDevDependency, @NgComponent, @NgDataService annotations. Use when creating JWebMP plugins that generate TypeScript code, defining npm dependencies, or building Angular-integrated components.
npx skillsauth add guicedee/ai-rules jwebmp-tsclientInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
TypeScript client generation for JWebMP plugins.
Declare npm runtime dependencies:
@TsDependency(value = "@angular/core", version = "^20.0.0")
@TsDependency(value = "rxjs", version = "^7.8.0")
public class MyComponent { }
Declare npm dev dependencies:
@TsDevDependency(value = "@types/node", version = "^20.0.0")
@TsDevDependency(value = "typescript", version = "^5.0.0")
public class MyPlugin { }
Mark class for Angular component generation:
@NgComponent("my-component")
public class MyComponent implements INgComponent<MyComponent> {
@Override
public String render() {
return "<div>My Component</div>";
}
}
Mark class for Angular service generation:
@NgDataService
public class MyService implements INgDataService<MyService> {
@Override
public Object getData(AjaxCall<?> call, AjaxResponse<?> response) {
return fetchData();
}
}
public interface INgComponent<J extends INgComponent<J>> {
String render();
default void configure(IComponentHierarchyBase<?, ?> component) { }
}
public interface INgDataService<J extends INgDataService<J>> {
Object getData(AjaxCall<?> call, AjaxResponse<?> response);
default void receiveData(AjaxCall<?> call, AjaxResponse<?> response) { }
}
public interface INgDirective<J extends INgDirective<J>> {
String getSelector();
Map<String, String> getInputs();
Map<String, String> getOutputs();
}
Plugin automatically generates:
module com.jwebmp.core.base.angular.client {
requires transitive com.jwebmp.client;
exports com.jwebmp.core.base.angular.client;
exports com.jwebmp.core.base.angular.client.annotations;
exports com.jwebmp.core.base.angular.client.services;
}
<dependency>
<groupId>com.jwebmp.plugins</groupId>
<artifactId>tsclient</artifactId>
</dependency>
com.jwebmp.core.base.angular.clientdevelopment
Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos).
tools
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations.
development
WebAwesome icon integration for JWebMP — modern, open-source icon library. Provides 1,500+ icons with solid/regular styles, sizing, rotation, animation, and CSS utilities. Drop-in FontAwesome alternative with fresh designs. Use when working with WebAwesome icons, modern icon designs, or as FontAwesome alternative in JWebMP applications.
development
WebAwesome Pro integration for JWebMP with premium icons and features. Extends jwebmp-webawesome with additional styles, premium icons, and advanced features. Use when working with WebAwesome Pro icons or premium WebAwesome features in JWebMP applications.