New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Smooth Shadow Ring

by flornkm in flornkm/personal-site

Replaces border-plus-shadow combinations on cards, dialogs and other elevated surfaces with the smooth-shadow-ring utilities from the Tailwind shadow-plugin.

No licenceAuto-check passedFrontend & Design

Install Smooth Shadow Ring

skills CLI
$ npx skills add flornkm/personal-site --skill smooth-shadow-ring -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install flornkm/personal-site smooth-shadow-ring --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/flornkm/personal-site.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/smooth-shadow-ring .claude/skills/smooth-shadow-ring && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
smooth-shadow-ring
GitHub stars
150
Token cost
~1.3k tokens
SKILL.md length
566 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
None found

At a glance

Replaces border-plus-shadow combinations on cards, dialogs and other elevated surfaces with the smooth-shadow-ring utilities from the Tailwind shadow-plugin.

  • Styling cards, dialogs, popovers, dropdowns, menus or toasts in a Tailwind project
  • SKILL.md covers The rule, Tuning color, Trap: --shadow / --shadow-lg… and When a border is still fine, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Fixing a visible double border caused by a border and a shadow on one element

What it does

Putting a border or ring next to a shadow on a floating surface draws two stacked edges, a hard 1px line and then a soft one, which reads as a double border. This skill tells the agent to use the `smooth-shadow-ring-*` utilities instead, which fold a hairline ring into the final shadow layer so the edge fades into the shadow as one stroke. Sizes run from `xs` through `2xl`, and a border or ring must not be kept on an element that already has one.

Shadow and ring are tinted separately, with `shadow-` colors for the shadow and `smooth-ring-` colors for the ring. The ring is faint in light mode and lighter in dark mode, switching under a `.dark` class, a dark `data-theme` or a page that declares `color-scheme: light dark`, so sites whose dark mode relies only on `prefers-color-scheme` should declare it. Surfaces that need no edge stroke use the plain `smooth-shadow` sizes, and further notes on ring width are included.

When your agent uses it

  • Styling cards, dialogs, popovers, dropdowns, menus or toasts in a Tailwind project
  • Fixing a visible double border caused by a border and a shadow on one element
  • Choosing ring and shadow colors that hold up in dark mode

Example prompts

  • “Style this dropdown menu as an elevated surface without a double border.”
  • “Replace the border and shadow-lg on our modal with the smooth shadow ring.”
  • “The card edge looks heavy in dark mode; adjust the ring color.”

Requirements

  • A Tailwind project with the shadow-plugin installed

What it can do on your machine

Read from SKILL.md and the folder at commit acc40c8. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • shadow.floriankiem.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Smooth Shadow Ring loads about 1.3k tokens when it runs. Until then it costs about 99 tokens; SKILL.md has 566 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~99
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 566 words (~1,251 tokens).

“Shadows come from shadow-plugin (imported in globals.css). Two families:”

— opening of SKILL.md by flornkm
name
smooth-shadow-ring

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/smooth-shadow-ring of flornkm/personal-site.

Open the folder on GitHubat commit acc40c8

Compare with similar skills

Smooth Shadow Ring next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Smooth Shadow Ring compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Smooth Shadow Ring this skillflornkm/personal-site150—~1.3kAutomated safety check: PassNone
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
DaisyUI 5 Color Rulessaadeghi/daisyui43k—~1.7kAutomated safety check: PassMIT
Tailwind CSS Patternsever-works/ever-works1583 repos~1.6kAutomated safety check: NotesAGPL-3.0
Tailwind V4 Shadcnever-works/ever-works1582 repos~3.8kAutomated safety check: PassMIT
Bryl Minimal Designbryllim/bryl-minimal-design114—~2.9kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • DaisyUI 5 Color Rules

    saadeghi/daisyui

    Rules for using daisyUI 5's semantic color names, such as primary and base-100, so interfaces stay readable across themes.

    43k GitHub stars~1.7k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    158 GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check: notes

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    158 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Bryl Minimal Design

    bryllim/bryl-minimal-design

    Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…

    114 GitHub stars~2.9k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    150 GitHub stars~1.7k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from flornkm/personal-site

All 14 skills in this repo

  • Animation Vocabulary

    flornkm/personal-site

    Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" →…

    150 GitHub starsUsed in 13 repos~3.2k tokens
    Auto-check passed

  • Apple Design

    flornkm/personal-site

    Apple's approach to interface design and fluid, physical motion, translated for the web.

    150 GitHub starsUsed in 19 repos~5.6k tokens
    Auto-check passed

  • Central Icons

    flornkm/personal-site

    ALWAYS ACTIVE. An agent skill from flornkm/personal-site.

    150 GitHub stars~475 tokensUpdated yesterday
    Auto-check: notes

  • Clean Jsx No Inline Ternaries

    flornkm/personal-site

    Keep JSX and component logic clean by minimizing inline ternaries, nested conditionals, and stringified conditional classes.

    150 GitHub stars~988 tokensUpdated yesterday
    Auto-check passed

  • Design System

    flornkm/personal-site

    How to build UI in this repo — compose classes with cn, use the CSS-variable design tokens (never raw hex/px), reuse the typographic and ui/ primitives, and define variants with cva like the…

    150 GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Prefer Container Queries

    flornkm/personal-site

    Enforce Tailwind container queries over viewport breakpoints for responsive components.

    150 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Smooth Shadow Ring

What does Smooth Shadow Ring do?

Replaces border-plus-shadow combinations on cards, dialogs and other elevated surfaces with the smooth-shadow-ring utilities from the Tailwind shadow-plugin. Putting a border or ring next to a shadow on a floating surface draws two stacked edges, a hard 1px line and then a soft one, which reads as a double border. This skill tells the agent to use the `smooth-shadow-ring-*` utilities instead, which fold a hairline ring into the final shadow layer so the edge fades into the shadow as one stroke.

When should I use Smooth Shadow Ring?

Smooth Shadow Ring fits situations like: styling cards, dialogs, popovers, dropdowns, menus or toasts in a Tailwind project; fixing a visible double border caused by a border and a shadow on one element; choosing ring and shadow colors that hold up in dark mode.

How do I install Smooth Shadow Ring in Claude Code?

Run `npx skills add flornkm/personal-site --skill smooth-shadow-ring -a claude-code`. Or copy the skill folder (.agents/skills/smooth-shadow-ring in flornkm/personal-site) into .claude/skills/smooth-shadow-ring in your project. Claude Code loads it when a task matches its description.

How do I install Smooth Shadow Ring in Codex?

Run `npx skills add flornkm/personal-site --skill smooth-shadow-ring -a codex`. Or copy the skill folder (.agents/skills/smooth-shadow-ring in flornkm/personal-site) into .agents/skills/smooth-shadow-ring in your project. Codex loads it when a task matches its description.

Can I use Smooth Shadow Ring in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add flornkm/personal-site --skill smooth-shadow-ring -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/smooth-shadow-ring, .gemini/skills/smooth-shadow-ring, .github/skills/smooth-shadow-ring and .opencode/skills/smooth-shadow-ring in your project.

What does Smooth Shadow Ring need to run?

SKILL.md names no scripts, command-line tools or credentials: Smooth Shadow Ring is instructions for the agent only. Our summary lists: A Tailwind project with the shadow-plugin installed.

Does Smooth Shadow Ring access the network?

SKILL.md names 1 domain. As links in the text: shadow.floriankiem.com. This is read from the text; nothing was executed.

Is Smooth Shadow Ring safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Smooth Shadow Ring use?

No licence was found for Smooth Shadow Ring or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Smooth Shadow Ring use?

About 1.3k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Smooth Shadow Ring?

Skills that share tags, products or a category with Smooth Shadow Ring: UI Styling (Ohh-889/skyroc, 795 stars), DaisyUI 5 Color Rules (saadeghi/daisyui, 43k stars), Tailwind CSS Patterns (ever-works/ever-works, 158 stars) and Tailwind V4 Shadcn (ever-works/ever-works, 158 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Smooth Shadow Ring?

flornkm (a GitHub user) maintains it in flornkm/personal-site, which has 150 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 7, 2026.

Source: flornkm/personal-site on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.