A component-scaffolding skill for Angular applications that use fundamental-ngx, a UI component library. It generates starting structures for dialogs, tables, cards, forms, app shells, and responsive grids.

Creating a dialog, data table, content card, form, application shell, or responsive layout grid. It can use library usage guides, APIs, and documented examples to shape the result.

It provides the correct component patterns, selectors, inputs, imports, and examples needed to start a working UI component. This reduces mistakes when combining library components.

How SAP/fundamental-ngx configures Claude Code

About the project

Fundamental Library for Angular is an SAP-maintained Angular component library implementing SAP's design system and wrapping UI5 Web Components. Angular developers use its typed UI components and higher-level composites to build SAP-style web interfaces. Catalogue entries provide skills, agents, instructions, and a rule for working with the library.

SAP/fundamental-ngx · 294 stars · on GitHub · sap.github.io

Reuse

Borrowing it

Nothing to install: this file belongs to SAP/fundamental-ngx. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/SAP/fundamental-ngx/main/.claude/skills/scaffold/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/SAP/fundamental-ngx

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/sap/fundamental-ngx/scaffold/github.svg)](https://agentmods.dev/skills/sap/fundamental-ngx/scaffold)

Your own site

<a href="https://agentmods.dev/skills/sap/fundamental-ngx/scaffold"><img src="https://agentmods.dev/badge/skills/sap/fundamental-ngx/scaffold/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/sap/fundamental-ngx/scaffold"><img src="https://agentmods.dev/badge/skills/sap/fundamental-ngx/scaffold.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 26 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,008 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00026	$0.01008
Opus 5	$0.00013	$0.00504
Sonnet 5	$0.00005	$0.00202
Haiku 4.5	$0.00003	$0.00101

Measured 9d ago against content hash 619654ac5c24, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

scaffold scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/scaffold/SKILL.md · 119 lines

How it starts

The opening of the file, as written. The whole thing — 119 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Scaffold: $ARGUMENTS

If $ARGUMENTS is empty, ask the user which pattern they want. Supported patterns:

dialog — modal dialog (template / component-ref / object-based variants)
table — data table (fd-table / fdp-table / ui5-table variants)
card — content card with header and body
form — form layout with form-items and validation
shell — app shell with shellbar and navigation
layout-grid — responsive grid layout

Phase 1: Identify Pattern

Parse the pattern name from $ARGUMENTS. If a variant is specified (e.g., dialog component-ref), note it for Phase 3.

Phase 2: Gather Context

Use the @fundamental-ngx/mcp MCP server tools to get accurate, up-to-date information:

Call get_usage_guide with the pattern name to get:
- Decision tree for choosing variants
- Composition patterns (correct parent/child nesting)
- Common pitfalls to avoid
- Related components
Call get_component_api for the primary component to get:
- Correct selector (element vs attribute)
- Available inputs and their types
- Required imports
Call get_component_examples to get real working examples from the docs app.

If the MCP server is not available, fall back to reading libs/mcp-server/src/data/usage-guides.ts directly.

Phase 3: Choose Variant

If the pattern has multiple variants (e.g., dialog has 3 API surfaces):

If the user specified a variant in $ARGUMENTS, use it
Otherwise, present the decision tree from get_usage_guide and ask the user to choose

Phase 4: Determine Target Location

Ask the user where to generate the component:

Path relative to their project (e.g., src/app/dialogs/confirm-dialog)
Component name (e.g., ConfirmDialog)

If the user provides just a name, default to src/app/components/<name>/.

Phase 5: Generate Component

Create a complete Angular component with:

TypeScript file (.component.ts):
- Correct imports from @fundamental-ngx/core, @fundamental-ngx/platform, or @fundamental-ngx/ui5-webcomponents
- ChangeDetectionStrategy.OnPush
- Signal-based state (signal(), computed())
- input() / output() for component API
- Proper selector with fd- prefix conventions

Read the full file on GitHub · 119 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

9d ago First seen · 119 lines · 26 tokens per session scan A 619654ac5c24

Subscribe to this mod's changes

scaffold is a skill published in the GitHub repository SAP/fundamental-ngx (294 stars, last pushed 4d ago), licensed Apache-2.0. It adds 26 tokens to every session and 1,008 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Frontend TypeScript angular angular-components design-system fundamentals open-source

angular-best-practices

Official Angular v22 coding best practices — signals, standalone, native control flow, zoneless, host bindings, Signal Forms, inject(), and accessibility (WCAG AA / AXE). Use whenever writing, generating, or reviewing Angular/TypeScript code in this repo.

anousss007/ng-blatui · 60 tokens

ng-blatui

Use the ng-blatui Angular UI library in an app — install, import components (bui-prefixed, signal-based, zoneless, SSR-safe), theme with Tailwind v4 + oklch tokens, localize dates/numbers/labels, and discover the full catalog via the registry, api.json, llms.txt or the ng-blatui-mcp MCP server. Invoke when building…

anousss007/ng-blatui · 108 tokens

neuralng-angular

Build or update Angular 22+ interfaces with NeuralNg when exact component selection, imports, forms, accessibility, SSR, icons, or theming guidance is needed.

hasanaydin7/NeuralTech · 38 tokens

igniteui-angular-figma-to-app

Translate Figma app screens designed using the Indigo.Design UI Kits into production Angular applications with Ignite UI for Angular. The Indigo.Design UI Kits are Figma component libraries available in four design-system variants — Material, Fluent, Bootstrap, and Indigo — each with light and dark themes. Designers…

IgniteUI/igniteui-angular · 210 tokens

igniteui-angular-generate-from-image-design

Implement Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built…

IgniteUI/igniteui-angular · 124 tokens

igniteui-angular-theming

Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between…

IgniteUI/igniteui-angular · 130 tokens

fundamental-ngx: Skill for Claude Code