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 skills add Kong/ai-marketplace --skill portal-brandinggit clone --depth 1 https://github.com/Kong/ai-marketplaceWrote 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.
[](https://agentmods.dev/skills/kong/ai-marketplace/portal-branding)<a href="https://agentmods.dev/skills/kong/ai-marketplace/portal-branding"><img src="https://agentmods.dev/badge/skills/kong/ai-marketplace/portal-branding/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.
<a href="https://agentmods.dev/skills/kong/ai-marketplace/portal-branding"><img src="https://agentmods.dev/badge/skills/kong/ai-marketplace/portal-branding.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00043 | $0.01574 |
| Opus 5 | $0.00022 | $0.00787 |
| Sonnet 5 | $0.00009 | $0.00315 |
| Haiku 4.5 | $0.00004 | $0.00157 |
Grade A, and why
portal-branding 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 12d 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 — 164 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Konnect Dev Portal page branding
Goal
Reproduce a brand or an existing website's look on Dev Portal MDC pages: colors, fonts, imagery, and spacing, through MDC components and page-level styling. Work in MDC page files, locally or in a repo. Do not push destructive changes to a live portal through the Konnect API unless the user explicitly asks.
Clarify First
Ask two or three high-impact questions, each with a default to confirm; do not interrogate:
- source to match: a URL or short brand description
- target page or pages
- which details must be exact, which can be approximate
- light or dark base
Tool Selection
- Author, format, validate, and preview MDC with the
portal-page-designtoolchain, which uses the Konnect MCP server for verified components, design tokens, validation, and preview. This skill adds the brand-specific steps below. - If the MCP server is not connected, recommend connecting it. Without it there is no preview or parity loop: work from general MDC knowledge and the user's files, ask them to preview in the Portal Editor, and say plainly the result is less reliable.
- Capturing the source and comparing results need a browser. If no browser automation (Playwright or an agent browser) is available, have the user install one first.
- If a local preview extension is available, use it for live preview while editing.
Workflow
- Confirm the source (URL or brand cues) and target MDC page.
- Capture the brand cues (see Capture the brand).
- Build the look with components and page-level styling (see Apply the brand).
- Preview and compare to the source across widths, then iterate (see Parity loop).
- Check contrast against every background.
- Report what matched; for anything the page cannot express, offer a concrete alternative, not a silent miss.
Capture the brand
Aim for a small set of concrete cues, not a pile of screenshots:
- Brand and accent colors: dominant non-neutral colors on primary buttons, links, and highlights. Record hex.
- Base tone: light or dark.
- Typography: heading, body, and monospace fonts, plus the weights used.
- Imagery: logos, icons, and hero images with source URLs. Prefer SVG.
- Spacing and shape: dense or airy, plus corner-radius and border feel.
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.
- 12d ago First seen · 164 lines · 43 tokens per session scan A e91fdf0bf9b0
portal-branding is a skill published in the GitHub repository Kong/ai-marketplace (5 stars, last pushed 22d ago), licensed MIT. It adds 43 tokens to every session and 1,574 once invoked, about $0.0002 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-31.
Other skills, from other repositories
dxf
Generate, regenerate, and validate 2D DXF drawings from Python build123d sources. Use for DXF files, .py drawing scripts, @dxf models, 2D profiles, outlines, templates, gaskets, panels, flat patterns, laser/plasma/waterjet cut layouts, and 2D drawing exports of CAD geometry.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
drag-pane
Drag-and-drop pane resizing implementation for two-pane plugin layouts. Covers mouse event handling via the internal/mouse package, hit region registration, drag delta calculation, width clamping, state persistence, and pane layout management. Use when working on pane resizing, drag interactions, layout management, or…
agent-communication-protocol
Open protocol for AI agent interoperability enabling standardized communication between agents, applications, and humans across different frameworks.
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating interfaces, pages, or components in a project that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers installation…