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/flornkm/shadow-plugin/smooth-shadow-ringnpx skills add flornkm/shadow-plugin --skill smooth-shadow-ringgit clone --depth 1 https://github.com/flornkm/shadow-pluginWhat 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.00067 | $0.01046 |
| Opus 5 | $0.00034 | $0.00523 |
| Sonnet 5 | $0.00013 | $0.00209 |
| Haiku 4.5 | $0.00007 | $0.00105 |
Grade A, and why
smooth-shadow-ring 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 — 89 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Elevated surfaces: use smooth-shadow-ring, never border + shadow
When this applies
Any element that floats above the page surface: cards, dialogs, modals, popovers, dropdowns, menus, tooltips, sheets, toasts, command palettes.
The problem
Putting a border-* (or ring-*) and a shadow-* on the same element draws
two stacked edges: the border paints a hard 1px stroke, and the shadow begins
just outside it. The result is a visible double border, a crisp line then a
soft one. It looks heavy, greyed, and cheap.
The rule
If you are about to write a border-* or ring-* class next to any shadow-*
on an elevated surface, use smooth-shadow-ring-{size} instead. It bakes a 1px
hairline ring into the final shadow layer, so the edge dissolves into the shadow
as one continuous stroke.
border shadow-md→smooth-shadow-ring-mdring-1 ring-neutral-200 shadow-lg→smooth-shadow-ring-lg- Sizes:
smooth-shadow-ring-xs,-sm,-md(or baresmooth-shadow-ring),-lg,-xl,-2xl - Never keep a
borderorringon an element that already hassmooth-shadow-ring-*. The ring is already in there; a second edge doubles up. - If the surface should have no edge stroke at all, use plain
smooth-shadow-{size}(no ring), not a border.
Coloring
The ring and shadow tint independently and compose on the same element:
shadow-{color}tints the shadow, e.g.shadow-blue-500smooth-ring-{color}tints the ring, e.g.smooth-ring-black/10,smooth-ring-blue-500/40
The ring defaults to rgba(0,0,0,0.05) and flips to rgba(255,255,255,0.18)
in dark mode — under a .dark class, data-theme="dark", or (for
OS-preference dark modes) when the page declares color-scheme: light dark.
It never keys off prefers-color-scheme alone, so light-only sites keep the
light ring for every visitor. If the site's dark mode is driven purely by a
prefers-color-scheme media query, make sure it declares
:root { color-scheme: light dark; } so the ring follows.
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 · 89 lines · 67 tokens per session scan A acc6717961c4
smooth-shadow-ring is a skill published in the GitHub repository flornkm/shadow-plugin (133 stars, last pushed 29d ago), licensed MIT. It adds 67 tokens to every session and 1,046 once invoked, about $0.0003 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
absolute-ui
Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and…
tailwindcss
TailwindCSS utility-first styling for Rails.
tailwind-helpers
Production-grade Tailwind CSS patterns for responsive layouts, dark mode, spacing scales, shadcn integration, and accessible color usage. Load before writing any styled UI.
video-shot-demos
为视频/课程/解说文案制作"每镜头一个 HTML"的高完成度网页演示动画（分镜演示页、视频配套演示动画、录屏用动画网页、科普/技术/产品发布可视化镜头）。只要用户提到：给视频做演示动画网页、分镜 HTML、shot 页面、把口播稿/大纲做成动画、视频画面设计网页版、录一段网页动画、或要求改造升级一批已有演示页——就用本 Skill。核心是统一的电影化播放器机制 + 每页完全不同的视觉风格 + 镜头语言 + 同步音效 + 角色表情吐槽，内容完全开放不设限。.
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
frame-liquid-bg-hero
WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.