sap-sac-custom-widget — Claude Code skill for SAC widgets
Guides custom widget development for SAP Analytics Cloud: Web Components, data feeds, styling panels. Useful when the built-in visualizations fall short.
npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a claude-codeWhat sap-sac-custom-widget does
The skill walks a SAC custom widget from brief to upload artifacts. It starts by classifying the widget role and data-source mode, suggests a few role-aware options, then generates the chosen package. SAC-bound widgets get asked for dimensions, measures, dates, versions and feed order; pure UI controls get interaction, navigation, state, method and event requirements instead.
Bundled templates cover widgets, charts and KPI cards, plus templates/local-builder/ — static HTML/CSS/vanilla JS with no public CDNs. That builder exports two artifacts separately: widget.json and a Resource-ZIP holding only root-level component JavaScript. If direct file:// access is blocked, a Node fallback server.mjs runs instead.
You need a SAC tenant with Optimized Story Experience or Analytics Designer, plus JavaScript and Web Components knowledge. Hosting is either external (GitHub Pages, AWS S3, Azure) or SAC-hosted resources. The skill points to SAP's official docs and a samples repository, and asks you to confirm technical IDs, feed mappings and asset rights before it writes code.
What it helps with
- build a custom visualization SAC does not ship
- wire ECharts, D3.js or Chart.js into a widget
- set up data binding through feeds and field order
- keep the styling panel and builder panel in separate files
- export
widget.jsonand a Resource-ZIP for SAC import
Example prompts for the agent
- Build a SAC custom widget for a sales-by-region chart with data coming through feeds
- Create a KPI card as a Web Component with a styling panel and a builder panel
- Prepare
widget.jsonand the Resource-ZIP for uploading the widget to SAC
How to install sap-sac-custom-widget
1Skills CLI (Vercel)
npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a claude-code2Manually: put the files in place
~/.claude/skills/sap-sac-custom-widget/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/sap-sac-custom-widget/
1Skills CLI (Vercel)
npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a codex2Manually: put the files in place
.agents/skills/sap-sac-custom-widget/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a cursor2Manually: put the files in place
.cursor/skills/sap-sac-custom-widget/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install secondsky/sap-skills sap-sac-custom-widget2Manually: put the files in place
.github/skills/sap-sac-custom-widget/SKILL.md1Skills CLI (Vercel)
npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a gemini-cli2Platform CLI
gemini skills install https://github.com/secondsky/sap-skills --path plugins/sap-sac-custom-widget/skills/sap-sac-custom-widgetManually: put the files in place
.devin/skills/sap-sac-custom-widget/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about sap-sac-custom-widget
How do I install sap-sac-custom-widget in Claude Code?
Run npx skills add secondsky/sap-skills --skill sap-sac-custom-widget -a claude-code. The skill file lands at ~/.claude/skills/sap-sac-custom-widget/SKILL.md.
What does sap-sac-custom-widget do?
It helps you develop custom widgets for SAP Analytics Cloud: generating the widget package, handling data binding, styling and builder panels, and packaging artifacts for import.
What do I need before using it?
A SAC tenant with Optimized Story Experience or Analytics Designer, JavaScript and Web Components knowledge, and either external hosting or SAC-hosted resources.
