Help us improve
Share bugs, ideas, or general feedback.
From react-native-gleam
Scans a React Native codebase for skeleton/shimmer loading patterns and refactors them to use react-native-gleam. Invoke via /gleam.
npx claudepluginhub rambowasreal/react-native-gleam --plugin react-native-gleamHow this skill is triggered — by the user, by Claude, or both
Slash command
/react-native-gleam:gleamThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
When the user runs /gleam, follow these steps in order:
Creates p5.js generative art with seeded randomness, noise fields, and interactive parameter exploration. Use for algorithmic art, flow fields, or particle systems.
Share bugs, ideas, or general feedback.
When the user runs /gleam, follow these steps in order:
Search the ENTIRE project for anything that could be replaced by shimmer loading. Be thorough — check every screen, component, and hook. Look for:
Existing skeleton/shimmer libraries:
moti/skeleton (MotiSkeletonGroup, Skeleton)react-native-skeleton-placeholder (SkeletonPlaceholder)react-native-shimmer-placeholder (ShimmerPlaceholder)@rneui/themed or react-native-elements (Skeleton, LinearProgress)react-content-loader (ContentLoader)Reanimated-based loading animations:
react-native-reanimated used for shimmer/pulse/fade loading effectsAnimated.View opacity loops for loading statesMotiView with repeating animations for loadingNative loading indicators:
ActivityIndicator from react-nativeSpinner componentsLoading state patterns:
isLoading, loading, fetching, pending, isFetching state variablesloading ? <Placeholder> : <Content>if (loading) return <X>loading statesEmpty state placeholders:
List EVERY candidate found. Present as a numbered list:
src/screens/HomeScreen.tsx:42 — ActivityIndicator while fetching user datasrc/screens/ProfileScreen.tsx:18 — MotiSkeletonGroup from moti/skeletonsrc/components/CardList.tsx:55 — reanimated opacity loop for loading shimmerAsk the user which ones they want to convert to react-native-gleam. They can pick by number (e.g. "1, 3, 5") or say "all".
Wait for their answer.
For each selected candidate, refactor to use GleamView or GleamView.Line. Replace the loading indicator/conditional with the appropriate pattern:
import { GleamView } from 'react-native-gleam';
<GleamView
loading={isLoading}
style={{ width: '100%', height: 80, borderRadius: 12 }}
>
<ActualContent />
</GleamView>
GleamView.Line)<GleamView loading={isLoading}>
<GleamView.Line style={{ height: 22, borderRadius: 6, width: '70%' }}>
<Text>{title}</Text>
</GleamView.Line>
<GleamView.Line style={{ height: 16, borderRadius: 4, width: '50%' }} delay={100}>
<Text>{subtitle}</Text>
</GleamView.Line>
</GleamView>
Key rules:
GleamView wraps content — no conditional rendering needed. Children are hidden when loading={true} and shown when loading={false}delay and onTransitionEnd are per-lineonTransitionEnd on individual Lines, not the parentFlatList/VirtualizedList cells, keep the wrapper pattern and make loading reflect the absence of stable content, not background refetching. For example, with server-state data use loading={isPending && !data} instead of loading={isFetching} so recycled cells do not re-enable shimmer over already loaded content.FlatList recycling section by scrolling enough to recycle cells, toggling loading, and confirming loaded content remains visible after cells reattach.| Prop | Type | Default | Description |
|---|---|---|---|
loading | boolean | true | Toggle shimmer on/off |
speed | number | 1000 | Shimmer cycle duration (ms) |
direction | GleamDirection | LeftToRight | Animation direction |
delay | number | 0 | Phase offset (ms) for stagger |
transitionDuration | number | 300 | Transition duration (ms). 0 = instant |
transitionType | GleamTransition | Fade | Transition style |
intensity | number | 1 | Highlight strength (0–1) |
baseColor | ColorValue | #E0E0E0 | Shimmer background color |
highlightColor | ColorValue | #F5F5F5 | Moving highlight color |
onTransitionEnd | function | — | { nativeEvent: { finished: boolean } } |
| Prop | Type | Default | Description |
|---|---|---|---|
style | ViewStyle | — | Size/shape of shimmer bar |
delay | number | 0 | Phase offset for this line |
onTransitionEnd | function | — | Per-line transition callback |
import { GleamDirection, GleamTransition } from 'react-native-gleam';
GleamDirection.LeftToRight // 'ltr'
GleamDirection.RightToLeft // 'rtl'
GleamDirection.TopToBottom // 'ttb'
GleamTransition.Fade // opacity crossfade
GleamTransition.Shrink // scales down while fading
GleamTransition.Collapse // collapses vertically then horizontally