skills.rest
wanghaisheng
wanghaishengCOMMUNITY
Explore all skills by this author →
Website𝕏@edwin_uestcGitHub

1k-ui-recipes

Provides cross-platform UI recipes for React Native and web components.

Updated Apr 15, 2026
Search Tags:#ui#patterns#cross-platform#recipes#react-native#keyboard#web
One-click install
npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-ui-recipes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 1k-ui-recipes
Source: https://github.com/wanghaisheng/web3-scaffold-app-monorepo/tree/main/.claude/skills/1k-ui-recipes
Command: npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-ui-recipes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides bite-sized UI recipes and patterns to fix common cross-platform UI issues in React Native and web components, enabling consistent and polished interfaces.

Core Features & Use Cases

  • iOS Tab Bar Scroll Offset: dynamic padding trick to prevent content from being hidden behind the bottom tab bar.
  • Smooth State Transitions with startViewTransition: defer heavy re-renders to yield smooth updates on web with a fallback on native.
  • Horizontal Scroll in Collapsible Tab Headers: bidirectional gestures and programmatic tab content control to keep header and content scrolls in sync.
  • Android Bottom Tab Touch Interception: a temporary GestureDetector-based workaround to bypass native tab bar touch interception (Android only).
  • Keyboard Avoidance for Input Fields: keyboard-aware views and animated padding to keep inputs visible when the keyboard is shown.
  • iOS Overlay Navigation Freeze: use resetAboveMainRoute to atomically clear overlay routes and avoid navigation freeze.
  • Web: keyboardDismissMode handling: avoid global blur side-effects by gating on native vs web, and pausing background carousels when not visible.

Quick Start

Try applying the included UI recipes to your app by wiring up the patterns to your tab pages, headers, and inputs for a smoother cross-platform experience.

Frequently Asked Questions about 1k-ui-recipes

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

FAQPage Schema
How do I fix content being hidden behind the bottom tab bar in React Native?▼

To fix content hidden behind the bottom tab bar in React Native, apply a dynamic padding trick that offsets the scroll view, preventing UI elements from being obscured by the navigation tab bar.

How do I keep input fields visible when the keyboard is shown in React Native?▼

Keep input fields visible when the keyboard appears by implementing keyboard-aware views with animated padding, ensuring the UI smoothly adjusts and inputs remain accessible without manual scrolling.

What is the best way to sync horizontal scroll in collapsible tab headers?▼

The best way to sync horizontal scroll in collapsible tab headers is using bidirectional gestures and programmatic tab content control, keeping both header and content scroll positions perfectly aligned.

How do I avoid global blur side-effects when handling keyboardDismissMode on the web?▼

To avoid global blur side-effects during web keyboardDismissMode handling, gate your logic by checking native versus web platforms and pause background carousels when they are not visibly active.

Why does my iOS overlay navigation freeze and how can I clear it?▼

iOS overlay navigation freezes due to route stacking conflicts; clear it atomically by using the resetAboveMainRoute pattern to remove overlay routes and restore normal navigation state.

How can I achieve smooth state transitions for heavy re-renders on the web?▼

Achieve smooth state transitions for heavy web re-renders by using the startViewTransition API to defer updates, yielding visually smooth animations with a reliable fallback for native environments.

Related Skills

Explore More Software Engineering Skills→
jeiusjeius
1

gluestack-ui-v4:performance

Enforce Gluestack wrappers and performance patterns for React Native and web components.

Community
Advanced
sebc-devsebc-dev

capacitor-keyboard

Handle keyboard visibility, accessory bars, and scroll in Capacitor apps.

Community
Intermediate
freekmurzefreekmurze
997

agent-browser

Automate browser interactions for web testing, form filling, screenshots, and data extraction.

Community
Basic
zaid-khan-codezaid-khan-code
3

react-native

Standardize React Native app structure with components, hooks, and platform-specific code.

Community
Intermediate