skills.rest
Kototoro-app
Kototoro-appOFFICIAL
Explore all skills by this author →
GitHub

haze-blur

Configure and style Haze blur effects in Kotlin-based UI development for Android 11+.

467|36|Updated Oct 28, 2025
Search Tags:#Android#UI design#Kotlin#blur effect#Haze
One-click install
npx skills add https://github.com/Kototoro-app/Kototoro --skill haze-blur
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: haze-blur
Source: https://github.com/Kototoro-app/Kototoro/tree/main/.claude/skills/ui/haze-blur
Command: npx skills add https://github.com/Kototoro-app/Kototoro --skill haze-blur

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides expert guidance on configuring and styling Haze blur effects, ensuring optimal visual effects in your applications.

Core Features & Use Cases

  • Haze Blur Configuration: Offers detailed instructions for setting blur radius, tint/color effects, noise, and alpha.
  • Material Styles: Supports HazeMaterials, CupertinoMaterials, and FluentMaterials for various design styles.
  • Progressive Blur: Allows gradient blurs for a more nuanced effect.
  • Masking: Enables the use of brushes as opacity masks for custom blur effects.
  • Dynamic Styling: Reactively adjusts blur properties based on user input or state changes.
  • Use Case: If you are developing an app with UI elements that require a sophisticated blur effect, this Skill can help you achieve the desired look with ease.

Quick Start

Apply the haze-blur skill to your UI element to apply a custom blur effect with a specified radius and color tint.

Frequently Asked Questions about haze-blur

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Haze blur effects in Kotlin for Android UI development?▼

Haze blur effects are customized in Kotlin UI development by setting specific parameters for blur radius, tint colors, noise, and alpha. This Skill provides detailed instructions to achieve optimal visual effects on Android 11+.

What design styles are supported for Android blur effects?▼

Supported design styles for Android blur effects include HazeMaterials, CupertinoMaterials, and FluentMaterials. These allow you to match the visual effect with various platform-specific design languages.

Can I create a gradient blur effect on Android 11+?▼

Yes, you can create a gradient blur effect on Android 11+ using the progressive blur feature. This allows for nuanced visual effects by applying gradient blurs to your UI components.

How do I use brushes as opacity masks for custom blur effects in Kotlin?▼

You can use brushes as opacity masks for custom blur effects in Kotlin through the masking feature. This enables highly customized blur designs by controlling the visibility of the blur layer.

Does Haze blur support dynamic styling based on user input?▼

Haze blur supports dynamic styling by reactively adjusting blur properties based on user input or state changes. This ensures the visual effect responds interactively within your application.

Related Skills

Explore More Software Engineering Skills→
Kototoro-appKototoro-app
467

haze-patterns

Implement blur effects and UI patterns with the Haze library in Kotlin.

Official
Advanced
xxihxxih
1

liquid-glass-design

Render dynamic liquid-glass materials for iOS 26+ UI components.

Community
Intermediate
shaharKeisarAppsshaharKeisarApps

quality-expert

Configure Detekt, ktlint, and Spotless for Kotlin Multiplatform modules.

Community
Advanced
Kototoro-appKototoro-app
467

haze-custom-effects

Build custom VisualEffect implementations for the Haze application using Kotlin.

Official
Advanced