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 ominou5/funnel-architect-plugin --skill design-systemgit clone --depth 1 https://github.com/ominou5/funnel-architect-pluginWrote 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/ominou5/funnel-architect-plugin/design-system)<a href="https://agentmods.dev/skills/ominou5/funnel-architect-plugin/design-system"><img src="https://agentmods.dev/badge/skills/ominou5/funnel-architect-plugin/design-system.svg" alt="Measured on agentmods" 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.00034 | $0.01757 |
| Opus 5 | $0.00017 | $0.00879 |
| Sonnet 5 | $0.00007 | $0.00351 |
| Haiku 4.5 | $0.00003 | $0.00176 |
Grade A, and why
design-system 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 8d 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 — 275 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Funnel Design System
Every funnel must look premium. This design system ensures visual consistency and a professional brand feel across all pages.
Color Palettes
Default — Modern Dark
:root {
/* Backgrounds */
--bg-primary: #0F172A;
--bg-secondary: #1E293B;
--bg-card: #334155;
--bg-elevated: #475569;
/* Text */
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
/* Accent — CTA color */
--accent: #3B82F6;
--accent-hover: #2563EB;
--accent-glow: rgba(59, 130, 246, 0.3);
/* Success / Warning / Error */
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
/* Borders */
--border: rgba(255, 255, 255, 0.1);
--border-hover: rgba(255, 255, 255, 0.2);
}
Alternative — Clean Light
:root {
--bg-primary: #FFFFFF;
--bg-secondary: #F8FAFC;
--bg-card: #FFFFFF;
--bg-elevated: #F1F5F9;
--text-primary: #0F172A;
--text-secondary: #475569;
--text-muted: #94A3B8;
--accent: #6366F1;
--accent-hover: #4F46E5;
--accent-glow: rgba(99, 102, 241, 0.2);
--border: rgba(0, 0, 0, 0.08);
--border-hover: rgba(0, 0, 0, 0.15);
}
Alternative — Warm Conversion
:root {
--bg-primary: #1A1A2E;
--bg-secondary: #16213E;
--bg-card: #0F3460;
--text-primary: #EAEAEA;
--text-secondary: #B8B8D1;
--accent: #E94560;
--accent-hover: #D63851;
--accent-glow: rgba(233, 69, 96, 0.3);
}
Spacing Scale
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}
section {
padding: var(--space-16) var(--space-4);
}
@media (min-width: 768px) {
section { padding: var(--space-20) var(--space-8); }
}
@media (min-width: 1024px) {
section { padding: var(--space-24) var(--space-16); }
}
Component Styles
Primary CTA Button
.cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 32px;
background: var(--accent);
color: #FFFFFF;
font-size: 1.125rem;
font-weight: 700;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
min-height: 48px;
box-shadow: 0 4px 14px var(--accent-glow);
}
.cta-primary:hover {
background: var(--accent-hover);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--accent-glow);
}
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.
- 8d ago First seen · 275 lines · 34 tokens per session scan A 3880fed6409c
design-system is a skill published in the GitHub repository ominou5/funnel-architect-plugin (79 stars, last pushed 6mo ago), licensed MIT. It adds 34 tokens to every session and 1,757 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-30.
Other skills, from other repositories
sxo
Search Experience Optimization (SXO) — the bridge between SEO and UX/CRO. Audits the full journey from the SERP click to the on-page goal: SERP click-through factors (title/meta/rich results that win the click), then post-click experience signals that keep users and drive conversions — above-the-fold relevance and…
shiny-bslib-theming
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…
brand-yml
Create and use brand.yml files for consistent branding across Shiny apps and Quarto documents. Covers: (1) Creating new brand.yml files, (2) Applying to Shiny (R and Python), (3) Using in Quarto, (4) Modifying existing files, and (5) Troubleshooting. Includes complete specifications and integration guides.
interface-craft
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…
presentation-design
Designs slide decks and one-pagers that carry an argument rather than decorate one — deck structure, headlines that state the takeaway, charts that make a single point, and the different rules board decks and conference talks follow. Use this to build or fix a pitch deck, board deck, or conference talk, to design a…
ux-product-auditor
Audits a website, app, onboarding flow, or design for usability, conversion, and product problems, tying every finding to a business outcome and a severity. Use this to review an interface, diagnose low conversion or activation, find where users drop off, get structured product feedback, or decide which UX fixes to…