diff --git a/plugins/ui5/README.md b/plugins/ui5/README.md index fa34919..83256d9 100644 --- a/plugins/ui5/README.md +++ b/plugins/ui5/README.md @@ -1,21 +1,91 @@ -# UI5 plugin for Claude +# UI5 Plugin for Claude + +Complete SAPUI5 / OpenUI5 plugin for Claude Code with MCP tools, API documentation access, linting capabilities, and development guidelines. + +--- ## Key Features -- Helps with the creation of new UI5 projects when working with Claude Code -- Supports the developer to detect and fix UI5-specific errors -- Provides additional UI5-specific information for Claude Code +### 🛠️ MCP Tools +- **Create and validate UI5 projects** - Project scaffolding and validation +- **Access API documentation** - Query UI5 control APIs and documentation +- **Run UI5 linter** - Code quality validation and best practices checks +- **UI5 tooling integration** - Version info and project management + +### 📋 Skills: ui5-best-practices +Development guidelines and coding standards derived from official SAP UI5 guidelines: +- **Async module loading** - sap.ui.define patterns +- **Data binding with OData types** - Type-safe data binding +- **CSP compliance** - Content Security Policy best practices +- **TypeScript event handlers** - Modern event handling (UI5 >= 1.115.0) +- **CAP integration** - Integration with SAP Cloud Application Programming Model +- **Form creation rules** - Form and SimpleForm patterns +- **i18n management** - Internationalization workflows +- **Component initialization** - ComponentSupport patterns + +**Note**: For TypeScript conversion specifically, use the separate [`ui5-typescript-conversion`](https://github.com/UI5/plugins-claude/tree/main/plugins/ui5-typescript-conversion) plugin. + +--- ## Installation -Via Claude CLI: +### Via Claude CLI ```bash claude plugin install ui5@claude-plugins-official ``` -In Claude Code: +### In Claude Code ``` /plugin install ui5@claude-plugins-official ``` +### Manual Installation +```bash +# Clone the repository +git clone https://github.com/UI5/plugins-claude.git +cd plugins-claude/plugins/ui5 + +# Link to Claude plugins directory +ln -s $(pwd) ~/.claude/plugins/ui5 +``` + +Enable in `~/.claude/settings.json`: +```json +{ + "enabledPlugins": { + "ui5": true + } +} +``` + +Restart Claude to load the plugin. + +--- + +## Usage + +### MCP Tools +Use MCP tools explicitly when you need specific UI5 tooling functions: +``` +"Use get_api_reference to look up sap.m.Button" +"Run ui5 linter on my project" +"Get UI5 version information" +``` + +### Skills (Auto-Triggered) +Skills trigger automatically when you ask UI5-related questions: +``` +"How do I set up async module loading in UI5?" +"Show me how to use OData types in data binding" +"What's the correct way to create forms in UI5?" +"How to handle TypeScript events in UI5 >= 1.115.0?" +``` + +--- + +## Support + +- **Plugin Issues**: [GitHub Issues](https://github.com/UI5/plugins-claude/issues) +- **SAP UI5 Documentation**: [ui5.sap.com](https://ui5.sap.com) +- **Claude Code Documentation**: [claude.ai/code](https://claude.ai/code) diff --git a/plugins/ui5/skills/ui5-best-practices/SKILL.md b/plugins/ui5/skills/ui5-best-practices/SKILL.md new file mode 100644 index 0000000..ee9e875 --- /dev/null +++ b/plugins/ui5/skills/ui5-best-practices/SKILL.md @@ -0,0 +1,510 @@ +--- +name: ui5-best-practices +description: | + UI5 development best practices and coding standards derived exclusively from official SAP UI5 guidelines. Use when writing UI5 applications to ensure modern, maintainable code following SAP standards. Covers: async module loading (sap.ui.define, ES6 imports, core:require), ComponentSupport initialization, data binding with OData types, i18n management, CSP compliance (no inline scripts), TypeScript event types (UI5 >= 1.115.0), MCP tooling (get_api_reference, run_ui5_linter), CAP integration patterns, and form creation rules (never SimpleForm, always Form with ColumnLayout). + + Keywords: ui5 coding standards, async loading, sap.ui.define, data binding, odata types, i18n translation, CSP no inline scripts, TypeScript event handlers, Button$PressEvent, ui5 linter, API reference, ComponentSupport, form layout, ColumnLayout, CAP integration, cds watch +--- + +# UI5 Best Practices and Coding Standards + +## Overview + +This skill enforces UI5 development standards derived from official SAP guidelines. It covers the four critical areas: coding guidelines, tooling integration, CAP integration, and form creation rules. + +--- + +## 1. Module Loading - CRITICAL + +### Never Use Global Access + +**NEVER** access UI5 framework objects globally (e.g., `sap.m.Button`). Always declare dependencies explicitly for asynchronous loading. + +#### JavaScript +```javascript +// ❌ WRONG - Global access +var oButton = new sap.m.Button(); + +// ✅ CORRECT - Explicit dependency +sap.ui.define(["sap/m/Button"], function(Button) { + var oButton = new Button(); +}); + +// ✅ CORRECT - Dynamic loading with sap.ui.require +sap.ui.require(["sap/m/MessageBox"], function(MessageBox) { + MessageBox.show("Hello"); +}); +``` + +#### TypeScript +```typescript +// ❌ WRONG - Global namespace +const button: sap.m.Button; + +// ✅ CORRECT - Import module +import Button from "sap/m/Button"; +const button: Button; +``` + +#### XML Views +```xml + + + + + +``` + +**Why**: Ensures proper async loading, improves performance in production builds. + +**Reference**: UI5 documentation page "Require Modules in XML View and Fragment" + +--- + +## 2. Component Initialization + +Use `sap/ui/core/ComponentSupport` for declarative initialization of the **initial (root)** component: + +```html + + + + +
+
+ +``` + +**Reference**: UI5 documentation page "Declarative API for Initial Components" + +**Note:** Nested components should be managed via component usages (declared in the manifest.json of the containing component) + +--- + +## 3. Data Binding Best Practices + +### Always Use Built-in Data Types + +**ALWAYS** use data binding in views to connect UI controls to data or i18n models. + +**Priority order**: +1. OData types (`sap/ui/model/odata/type/*`) - **Preferred** +2. Simple types (`sap/ui/model/type/*`) - Only when no OData equivalent +3. Custom types - For special two-way binding scenarios or complex validation +4. Custom formatters - Only for unique business logic (one-way binding) + +```xml + + + + + + + + +``` + +**Common OData Types**: +- `sap.ui.model.odata.type.Decimal` - Numbers with decimals +- `sap.ui.model.odata.type.String` - Text with length constraints +- `sap.ui.model.odata.type.DateTime` - Date and time + +**Common Simple Types** (use only when no OData equivalent): +- `sap.ui.model.type.DateInterval` - Date ranges +- `sap.ui.model.type.FileSize` - File size formatting + +**Example**: For number formatting with thousands separator, prefer `sap.ui.model.odata.type.Decimal` with `formatOptions: {groupingEnabled: true}` over `sap.ui.model.type.Integer` or a custom formatter. + +### When to Use Custom Types + +Custom types are needed for **special two-way binding scenarios** where built-in types don't provide the required validation or conversion logic. + +**Example: Custom Type for Email Validation with Two-Way Binding** + +```javascript +// controller/EmailType.js +sap.ui.define(["sap/ui/model/SimpleType"], function(SimpleType) { + return SimpleType.extend("my.app.type.EmailType", { + formatValue: function(oValue) { + return oValue; + }, + parseValue: function(oValue) { + return oValue; + }, + validateValue: function(oValue) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (oValue && !emailRegex.test(oValue)) { + throw new sap.ui.model.ValidateException("Invalid email format"); + } + } + }); +}); +``` + +**Usage in View**: +```xml + + + + + +``` + +**Why Custom Types**: +- ✅ Two-way binding support (formatValue + parseValue + validateValue) +- ✅ Real-time validation as user types +- ✅ Model updates immediately on valid input +- ❌ Custom formatters only work for one-way (display) binding + + +### Data Binding in Views + +**ALWAYS** use data binding to connect controls to models: + +```xml + + + + + + + + + + +``` + +--- + +## 4. Internationalization (i18n) + +### Translation Workflow Guidelines + +When modifying `.properties` files, follow the appropriate workflow based on your project type: + +**For development and testing**: +- Update `i18n.properties` (base file) only +- Changes will be reflected immediately for development + +**Production translation workflows**: +- **SAP S/4HANA apps**: **NEVER** manually edit localized files (`i18n_de.properties`, `i18n_fr.properties`, etc.) + - Translation is handled through SAP's internal translation process +- **Apps using SAP Translation Hub or Translation Export/Import (TEW)**: **DO NOT** touch localized files + - Translations are generated automatically from the base file +- **Manually translated apps only**: Apply changes to all locale files to maintain consistency + +**Why**: Professional translation workflows generate localized files from the base `i18n.properties` file. Manual edits to localized files will be overwritten during the translation process. + +--- + +## 5. Security - Content Security Policy + +### Never Use Inline Scripts or Styles + +**NEVER** use inline scripts or inline styles in HTML. They violate the recommended CSP settings for UI5 applications. + +```html + + + + + +
Styled text
+ + + + + + +
Styled text
+``` + +**Requirements**: +- All application logic must reside in dedicated JS or TS files +- All styling must reside in dedicated CSS files +- Inline `