11# UI5 Guidelines Plugin
22
3- ** Version 1.0.0 ** | UI5 development guidelines and best practices for Claude Code
3+ UI5 development guidelines and best practices for Claude Code.
44
5- Version-aware skill covering modern UI5 coding standards and architectural patterns. Derived from official SAP UI5 documentation (1.136.7). For TypeScript conversion, use the dedicated ` ui5-typescript-conversion ` plugin.
6-
7- ** Status** : ✅ Production Ready | ✅ Unit tests passing | ⚠️ Integration tests available
5+ ** Status** : ✅ Production Ready
86
97---
108
119## Features
1210
1311### 📋 ui5-best-practices
14- Modern UI5 coding standards and architectural patterns:
15- - Async module loading (` sap.ui.define ` )
12+
13+ Covers modern UI5 coding standards and architectural patterns derived from official SAP UI5 guidelines:
14+ - Async module loading
1615- Data binding with OData types
17- - Form creation (ColumnLayout)
18- - Event handlers (typed events UI5 >= 1.115.0)
1916- CSP compliance
20- - XML event handling ($parameters, $source, $event)
21- - Test Starter setup
17+ - TypeScript event handlers
2218- CAP integration
23- - Version detection and runtime checks
24- - Component metadata configuration
19+ - Form creation rules
20+ - MCP tooling integration
2521
26- ** Note** : For TypeScript conversion, install the separate [ ` ui5-typescript-conversion ` ] ( https://github.com/UI5/plugins-claude/tree/main/plugins/ui5-typescript-conversion ) plugin.
22+ ** Note** : For TypeScript conversion, use the separate [ ` ui5-typescript-conversion ` ] ( https://github.com/UI5/plugins-claude/tree/main/plugins/ui5-typescript-conversion ) plugin.
2723
2824---
2925
3026## Installation
3127
32- ### Manual Installation
33-
3428``` bash
35- # Clone the skills branch
36- git clone -b feat-ui5-skills https://github.com/UI5/plugins-claude.git ui5-guidelines-plugin
37- cd ui5-guidelines-plugin /plugins/ui5-guidelines
29+ # Clone the repository
30+ git clone https://github.com/UI5/plugins-claude.git
31+ cd plugins-claude /plugins/ui5-guidelines
3832
3933# Link to Claude plugins directory
4034ln -s $( pwd) ~ /.claude/plugins/ui5-guidelines
4135```
4236
43- ### Enable in Claude Settings
44-
45- Add to ` ~/.claude/settings.json ` :
37+ Enable in ` ~/.claude/settings.json ` :
4638
4739``` json
4840{
@@ -52,283 +44,43 @@ Add to `~/.claude/settings.json`:
5244}
5345```
5446
55- ### Verify Installation
56-
57- ``` bash
58- # Check plugin is linked
59- ls ~ /.claude/plugins/ui5-guidelines/skills
60-
61- # Should show: ui5-best-practices
62- ```
63-
64- Restart Claude (CLI or VSCode extension) to load the plugin.
47+ Restart Claude to load the plugin.
6548
6649---
6750
6851## Usage
6952
70- Skills trigger automatically based on your questions. No commands needed - just ask UI5 questions naturally.
71-
72- ### Example Triggers
73-
74- Ask UI5 questions and the appropriate skill activates:
53+ Skills trigger automatically when you ask UI5-related questions. No commands needed.
7554
55+ ** Examples:**
7656```
7757"How do I set up async module loading in UI5?"
78- → ui5-best-practices skill activates
79-
80- "Show me XML event handler with $source model"
81- → ui5-best-practices skill activates
82-
83- "How to configure CSP in Component.js?"
84- → ui5-best-practices skill activates
85- ```
86-
87- ### What the Skill Covers
88-
89- ** ui5-best-practices:**
90- - Async module loading (` sap.ui.define ` )
91- - Data binding with OData types
92- - Form creation (ColumnLayout)
93- - Event handlers (typed events UI5 >= 1.115.0)
94- - CSP compliance
95- - XML event handling ($parameters, $source, $event)
96- - Test Starter setup
97- - CAP integration
98- - Version detection patterns
99- - Component metadata configuration
100-
101- ### Quick Examples
102-
103- ``` javascript
104- // Ask for best practices
105- " What's the correct way to load a UI5 module?"
106- " How do I use OData types in data binding?"
107- " Show me $parameters usage in XML event handlers"
108- " How to set up Test Starter in UI5?"
58+ "Show me how to use OData types in data binding"
59+ "What's the correct way to create forms in UI5?"
10960```
11061
11162---
11263
113- ## Quick Reference
114-
115- ### ui5-best-practices Patterns
116-
117- ** Key Rules:**
118- - ❌ NO global access: ` sap.m.Button `
119- - ✅ YES explicit import: ` import Button from "sap/m/Button" `
120- - ✅ Use OData types: ` sap.ui.model.odata.type.Decimal `
121- - ✅ Forms: ` ColumnLayout ` (NOT ` SimpleForm ` )
122- - ✅ Events: ` Button$PressEvent ` (UI5 >= 1.115.0)
123- - ✅ CAP: Run ` cds watch ` from root
124-
125- ** Code Examples:**
126- ``` javascript
127- // ❌ WRONG - Global access
128- var btn = new sap.m.Button ();
129- < Text text= " {path: 'price', formatter: '.formatCurrency'}" / >
130-
131- // ✅ CORRECT - Explicit import and OData types
132- import Button from " sap/m/Button" ;
133- < Text text= " {
134- path: 'price',
135- type: 'sap.ui.model.odata.type.Decimal',
136- formatOptions: {style: 'currency'}
137- }" / >
138- ```
139-
140- ** Common Violations:**
141- | Violation | Fix |
142- | -----------| -----|
143- | ` sap.m.Button ` global access | ` import Button from "sap/m/Button" ` |
144- | Custom formatters for numbers/dates | Use OData types (` sap.ui.model.odata.type.* ` ) |
145- | ` SimpleForm ` for forms | Use ` Form ` with ` ColumnLayout ` |
146- | Generic event types | Use specific types (` Button$PressEvent ` ) |
147-
148-
149- ### TypeScript Conversion
150-
151- For TypeScript conversion, use the dedicated ** [ ui5-typescript-conversion] ( https://github.com/UI5/plugins-claude/tree/main/plugins/ui5-typescript-conversion ) ** plugin:
152-
153- ``` bash
154- claude plugin install ui5-typescript-conversion@claude-plugins-official
155- ```
156-
157- The TypeScript conversion plugin provides comprehensive guidance for:
158- - Project setup (tsconfig, package.json, ui5.yaml)
159- - Controller/Component conversion
160- - Custom control migration with ts-interface-generator
161- - MetadataOptions configuration
162- - Test conversion (OPA5, QUnit)
163- - Type safety enforcement
164- ---
165-
16664## Testing
16765
168- The UI5 Guidelines plugin has a ** three-level testing approach** . See [ TESTING.md] ( TESTING.md ) for complete documentation.
169-
170- ### Test Levels
171-
172- ** Level 1: Unit Tests** (Structure & Performance) ✅
173- - 15 structure tests, 8 performance tests
174- - Validates plugin configuration and token budgets
175- - Fast, deterministic, no API calls
176-
177- ** Level 2: Proxy Tests** (Triggering Simulation) ⚠️
178- - 20 triggering tests with simulated keyword matching
179- - ** Important** : These do NOT test real Claude behavior
180- - Use for development feedback and keyword coverage
181-
182- ** Level 3: Integration Tests** (Live API) 🔬
183- - 20 test cases per provider (Anthropic API, Claude Code CLI)
184- - Tests actual Claude model behavior
185- - Multi-provider support with cost tracking
186- - ** Status** : 6 critical bugs fixed, 11 enhancements pending
187-
188- ### Quick Test
189-
19066``` bash
191- cd plugins/ui5-guidelines
19267npm install
19368npm run build
194-
195- # Run unit tests (Level 1 & 2) - Free, fast
196- npm test
197-
198- # Run integration tests (Level 3) - Requires API key
199- export ANTHROPIC_API_KEY=" sk-ant-..."
200- npm run test:integration:api # Anthropic API (~$0.15-0.35)
201- npm run test:integration:claude # Claude Code CLI (free)
202- npm run test:integration:cross # Cross-provider consistency
203- ```
204-
205- ** Expected output (unit tests):**
206- ```
207- ✅ Structure: 14/14 passing (100%)
208- ⚠️ Triggering: 26/26 passing (100% - simulation only)
209- ✅ Performance: 6/6 passing (100%)
69+ npm test # Unit tests (fast)
70+ npm run test:integration # Integration tests (requires API key)
21071```
21172
212- ### Run Specific Tests
213-
214- ``` bash
215- # Unit tests (fast, no cost)
216- npm run test:structure # Plugin structure validation
217- npm run test:triggering # Keyword coverage (simulation)
218- npm run test:performance # Context budget checks
219-
220- # Integration tests (slow, costs money)
221- npm run test:integration # All providers
222- npm run test:integration:api # Anthropic API only
223- npm run test:integration:claude # Claude Code CLI only
224-
225- # Watch mode (development)
226- npm run test:watch # Auto-rerun on changes
227- ```
228-
229- ### Understanding Test Results
230-
231- ** ⚠️ Important** : Proxy test results (97.8%) show keyword coverage, NOT real Claude behavior.
232-
233- For real-world accuracy, see integration test results:
234- - Target: >90% accuracy with real Claude API
235- - Cost: ~ $0.15-0.35 per full test run
236- - Run: Daily schedule or before releases
237-
238- ### View Metrics
239-
240- ``` bash
241- npm run metrics # Last 7 days
242- npm run metrics:week # Last 7 days
243- npm run metrics:month # Last 30 days
244- npm run metrics:optimize # Optimization tips
245- ```
246-
247- ### Documentation
248-
249- - ** [ TESTING.md] ( TESTING.md ) ** - Complete testing guide
250- - ** [ TESTING_LIMITATIONS.md] ( TESTING_LIMITATIONS.md ) ** - Why proxy tests ≠ real tests
251- - ** [ TESTING_ROADMAP.md] ( TESTING_ROADMAP.md ) ** - Future enhancements
252- - ** [ PLAN.md] ( PLAN.md ) ** - Testing framework implementation plan
73+ See [ TESTING.md] ( TESTING.md ) for details.
25374
25475---
25576
256- ## Troubleshooting
257-
258- ### Skills Don't Trigger
259-
260- ** Problem:** Asking UI5 questions but skills don't activate
261-
262- ** Fix:**
263- 1 . Verify plugin is enabled in ` ~/.claude/settings.json ` :
264- ``` json
265- "enabledPlugins" : { "ui5-guidelines" : true }
266- ```
267- 2 . Check symlink exists:
268- ``` bash
269- ls ~ /.claude/plugins/ui5-guidelines
270- ```
271- 3 . Restart Claude (CLI or VSCode extension)
272- 4 . Use specific UI5 keywords in your questions:
273- - ` sap.ui.define ` , ` OData types ` , ` $parameters ` , ` CSP `
274-
275- ### Installation Issues
276-
277- ** Problem:** Plugin not found after symlink
278-
279- ** Fix:**
280- ``` bash
281- # Remove old symlink
282- rm ~ /.claude/plugins/ui5-guidelines
283-
284- # Clone correct branch
285- git clone -b feat-ui5-skills https://github.com/UI5/plugins-claude.git ui5-guidelines-plugin
286- cd ui5-guidelines-plugin/plugins/ui5-guidelines
287-
288- # Create fresh symlink
289- ln -s $( pwd) ~ /.claude/plugins/ui5-guidelines
290-
291- # Verify
292- ls ~ /.claude/plugins/ui5-guidelines/skills
293- ```
294-
295- ---
296-
297- ## Testing
298-
299- For contributors: A comprehensive test suite is available on the [ test/ui5-skills-testing] ( https://github.com/UI5/plugins-claude/tree/test/ui5-skills-testing ) branch.
300-
301- ---
302-
303- ## Version Information
77+ ## Support
30478
305- - ** Plugin Version:** 1.0.0
306- - ** UI5 Version:** 1.136.7
307- - ** Coverage:** 78% of MCP server resources
308- - ui5-best-practices: 78% (28/36 topics)
79+ - ** Plugin Issues** : [ GitHub Issues] ( https://github.com/UI5/plugins-claude/issues )
80+ - ** SAP UI5 Documentation** : [ ui5.sap.com] ( https://ui5.sap.com )
30981
31082---
31183
31284## License
31385
314- Apache-2.0 - See [ LICENSE] ( ../../LICENSE.txt ) for details
315-
316- ---
317-
318- ## Related Documentation
319-
320- - ** Test Suite:** [ test/ui5-skills-testing branch] ( https://github.com/UI5/plugins-claude/tree/test/ui5-skills-testing )
321- - ** SAP UI5 Documentation:** [ ui5.sap.com] ( https://ui5.sap.com )
322- - ** TypeScript Conversion:** [ ui5-typescript-conversion plugin] ( https://github.com/UI5/plugins-claude/tree/main/plugins/ui5-typescript-conversion )
323-
324- ---
325-
326- ## Support
327-
328- For issues or questions:
329- - ** Plugin Issues:** [ GitHub Issues] ( https://github.com/UI5/plugins-claude/issues )
330- - ** SAP UI5 Questions:** [ SAP Community] ( https://community.sap.com )
331-
332- ---
333-
334- ** Plugin Status:** ✅ Production Ready | 78% Coverage | 1 Skill Active
86+ Apache-2.0
0 commit comments