Skip to main content
affpapa.org
RU EN
skill CX Codex

progressive-blur-header-swiftui — Claude Code skill

This skill adds a SwiftUI sticky header with a gradual blur effect. Use it for interfaces styled after Apple Music, Photos, or the App Store.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a claude-code
Open on GitHub

What progressive-blur-header-swiftui does

The skill helps add the StickyBlurHeader SwiftUI component, placing scrolling content beneath the header while the blur changes gradually across its height. It exposes settings for the maximum blur radius, fade distance, and tint opacity at the top and middle of the header.

Header height is measured with GeometryReader and PreferenceKey, so layouts can react when the header content changes. The package is added through Swift Package Manager from https://github.com/dominikmartn/ProgressiveBlurHeader. It requires iOS 16+ and Swift 5.9+.

What it helps with

  • add a sticky header to a SwiftUI screen
  • create a variable blur below a navigation header
  • match an Apple Music or App Store style
  • handle a header whose height changes

Example prompts for the agent

  • Add a SwiftUI sticky header with a gradual blur using StickyBlurHeader.
  • Connect ProgressiveBlurHeader and place a scrolling list under the header.
  • Set up a SwiftUI screen with adjustable blur and tint for light and dark mode.

How to install progressive-blur-header-swiftui

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a claude-code

2Manually: put the files in place

~/.claude/skills/progressive-blur-header-swiftui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/progressive-blur-header-swiftui/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about progressive-blur-header-swiftui

How do I install progressive-blur-header-swiftui in Claude Code?

Run npx skills add reason-machines/trending-skills --skill progressive-blur-header-swiftui -a claude-code, then use ~/.claude/skills/progressive-blur-header-swiftui/SKILL.md.

What does progressive-blur-header-swiftui do?

It helps add a SwiftUI sticky header with content scrolling underneath and a blur that changes gradually across the header area.

What does progressive-blur-header-swiftui require?

The component targets iOS 16+ and Swift 5.9+. Add its package through Swift Package Manager.

Similar skills

Everything for Frontend and UI →
swiftui-design nexu-io A skill that guides SwiftUI interface design by clear rules, avoiding typical AI-code mistakes. Directs design decisions, validates brand assets, and reviews layouts across five dimensions. CX Codex +1 2,900installs swiftui-design-principles arjitj2 A skill that hands your coding agent fixed rules for spacing, type and color in SwiftUI and WidgetKit, so the UI reads as a native app instead of generated markup. CX Codex +1 1,300installs swiftui-design-skill wholiver Designs custom SwiftUI screens for iOS and macOS without generic AI clichés. Useful when drafting interface prototypes or picking a distinct visual direction. CX Codex +1 1,000installs swiftui-graphics AThevon A skill for advanced SwiftUI visuals: Metal shaders, .visualEffect, iOS 26 Liquid Glass and Canvas. Useful once built-in modifiers stop being enough. CX Codex +1 939installs swiftui-animation jamesrochabrun Guides AI coding agents through building SwiftUI spring animations and Metal shader effects on iOS and macOS. CX Codex +1 567installs progressive-blur MengTo This skill creates a top or bottom CSS progressive blur with layered backdrop-filter masks. Use it for a soft fade at the viewport edge. CX Codex +1 1,700installs

From the same set186

maoxuan-skill-cognitive-framework A skill that hands your agent a set of thinking models drawn from Mao Zedong's writings: find the principal contradiction, plan from the weaker side, gather allies. CX Codex +1 513installs pokeclaw-android-ai-agent This skill guides an on-device Android agent built with Gemma 4, LiteRT-LM tool calls, and Accessibility Service control. CX Codex +1 507installs codex-oauth-automation-extension Installs a Chrome extension that walks the whole OpenAI OAuth signup and login: pulls the email code, confirms the callback, repeats for several rounds. CX Codex +1 505installs rattles-terminal-spinners A Claude skill covering rattles, a minimal Rust library for terminal spinners. Useful when a CLI needs a loading indicator without extra dependencies. CX Codex +1 497installs puremac-macos-cleaner This skill guides coding agents through building PureMac, adding custom cleanup targets, and automating macOS system maintenance with zero telemetry. CX Codex +1 484installs talk-normal-llm-prompt This skill steers an LLM away from filler and padded phrasing while keeping the useful content. Use it for API calls, project rules, or direct assistant instructions. CX Codex +1 479installs moss-tts-nano-speech A skill that shows the agent how to run MOSS-TTS-Nano, a tiny multilingual speech model with voice cloning that works on CPU. CX Codex +1 478installs html-ppt-skill Builds static HTML slide decks using standalone CSS and JavaScript without build pipelines. Helpful when you need an animated presentation right in the browser. CX Codex +1 476installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor