Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/sap/fundamental-styles/layout-patternsnpx skills add SAP/fundamental-styles --skill layout-patternsgit clone --depth 1 https://github.com/SAP/fundamental-stylesWhat 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 | $0.00026 | $0.06680 |
| Opus 5 | $0.00013 | $0.03340 |
| Sonnet 5 | $0.00005 | $0.01336 |
| Haiku 4.5 | $0.00003 | $0.00668 |
Grade A, and why
layout-patterns 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 3d 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.
How it starts
The opening of the file, as written. The whole thing — 779 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Layout Patterns Skill
This skill provides common UI layout patterns using fundamental-styles components. Use this to build complete, production-ready interfaces by combining multiple components correctly.
When to Use This Skill
Use this skill when:
- The user asks "How do I build a [pattern name]?"
- The user needs to combine multiple components
- The user wants a complete working example
- The user asks about common UI patterns (login, dashboard, master-detail, etc.)
Pattern 1: Login Form
A complete login form with email/password fields, validation, and action buttons.
Components used:
fd-form-item- Form field containersfd-form-label- Field labelsfd-input- Text inputsfd-button- Action buttonsfd-message-strip- Error feedback
When to use:
- Authentication pages
- Sign-in forms
- User credential entry
Complete example:
<div style="max-width: 400px; margin: 2rem auto;">
<!-- Error message (hidden by default) -->
<div class="fd-message-strip fd-message-strip--error" role="alert" style="display: none;" id="login-error">
<p class="fd-message-strip__text">Invalid email or password. Please try again.</p>
</div>
<form>
<!-- Email field -->
<div class="fd-form-item">
<label class="fd-form-label fd-form-label--required" for="email"> Email </label>
<input
class="fd-input"
type="email"
id="email"
placeholder="[email protected]"
required
aria-required="true"
/>
</div>
<!-- Password field -->
<div class="fd-form-item">
<label class="fd-form-label fd-form-label--required" for="password"> Password </label>
<input
class="fd-input"
type="password"
id="password"
placeholder="Enter your password"
required
aria-required="true"
/>
</div>
<!-- Action buttons -->
<div class="fd-form-item">
<button class="fd-button fd-button--emphasized" type="submit" style="width: 100%;">Sign In</button>
</div>
<div class="fd-form-item" style="text-align: center;">
<a href="#" class="fd-link">Forgot password?</a>
</div>
</form>
</div>
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.
- 3d ago First seen · 779 lines · 26 tokens per session scan A 3c609de92276
layout-patterns is a skill published in the GitHub repository SAP/fundamental-styles (232 stars, last pushed 5d ago), licensed Apache-2.0. It adds 26 tokens to every session and 6,680 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.
Other skills, from other repositories
metrics-instrumentation
Specification for instrumenting an opik-backend workflow with operational OpenTelemetry metrics — per-stage throughput/latency/error counters and native histograms, dimensioned per-customer (workspace). Use when a pipeline (scoring, ingestion, experiments, jobs) needs per-stage visibility. Covers metric emission only…
obsidian-markdown
Explain, draft, or validate Obsidian Flavored Markdown syntax: properties, wikilinks, embeds, callouts, tags, comments, highlights, block references, math, and Mermaid. Use when the user explicitly requests Obsidian note formatting or syntax help, not for general Markdown or broad vault operations.
wiki-lint
Run a deterministic, read-only health check on an Obsidian wiki. Use for lint, vault health check, audit wiki health, find orphans, find dead links, frontmatter audit, provenance audit, or wiki audit. Reports graph, link, frontmatter, provenance-ledger, empty-section, and stale-index findings; it does not reason…
new-changelog
Create the next desktop changelog entry when asked to add a changelog file or prepare the next release note under packages/changelog/content. Use this when the task is specifically about determining the next version and creating the markdown entry.
predictor-hand-skill
Expert knowledge for AI forecasting — superforecasting principles, signal taxonomy, confidence calibration, reasoning chains, and accuracy tracking.
getting-started
Get started with your Open SaaS project — fetches docs, checks Wasp installation, and helps you start your database and app.