Skip to content

Commit 9dd1087

Browse files
committed
docs: Update README.md
1 parent 48d80a7 commit 9dd1087

1 file changed

Lines changed: 25 additions & 273 deletions

File tree

plugins/ui5-guidelines/README.md

Lines changed: 25 additions & 273 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,40 @@
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
4034
ln -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
19267
npm install
19368
npm 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

Comments
 (0)