diff --git a/skills/uniwind/SKILL.md b/skills/uniwind/SKILL.md
index ec4df06b..3ff8ee3c 100644
--- a/skills/uniwind/SKILL.md
+++ b/skills/uniwind/SKILL.md
@@ -24,9 +24,9 @@ description: >
# Uniwind — Complete Reference
-> Uniwind 1.5.0+ / Tailwind CSS v4 / React Native 0.81+ / Expo SDK 54+
+> Uniwind 1.6.0+ / Tailwind CSS v4 / React Native 0.81+ / Expo SDK 54+
-If user has lower version, recommend updating to 1.5.0+ for best experience.
+If user has lower version, recommend updating to 1.6.0+ for best experience.
Uniwind brings Tailwind CSS v4 to React Native. All core React Native components support the `className` prop out of the box. Styles are compiled at build time — no runtime overhead.
@@ -996,6 +996,25 @@ Perceptually uniform color format — wider gamut, consistent lightness:
}
```
+### Display P3 Colors support
+
+Wide-gamut color format for devices that support the P3 color space (most modern iPhones and Macs). Uniwind parses `color(display-p3 ...)` values and converts them for native use:
+
+```css
+@layer theme {
+ :root {
+ @variant light {
+ --color-primary: color(display-p3 0.2 0.4 1);
+ --color-accent: color(display-p3 1 0.3 0.3);
+ }
+ @variant dark {
+ --color-primary: color(display-p3 0.3 0.5 1);
+ --color-accent: color(display-p3 1 0.4 0.4);
+ }
+ }
+}
+```
+
## Platform Selectors
Apply platform-specific styles directly in className:
@@ -1543,6 +1562,22 @@ React Native uses the Yoga layout engine. Key differences from web CSS:
- **Flexbox by default** — all views use flexbox with `flexDirection: 'column'`
- **Limited CSS properties** — no floats, grid, pseudo-elements
+### Built-in Extra Utilities
+
+Uniwind provides additional utility classes for React Native features not covered by standard Tailwind:
+
+| Class | Effect |
+|-------|--------|
+| `border-continuous` | Sets `borderCurve: 'continuous'` — smooth, superellipse corners (iOS) |
+| `border-circular` | Sets `borderCurve: 'circular'` — standard circular corners (iOS default) |
+
+```tsx
+// Smooth iOS-style rounded corners (like SwiftUI's .continuous)
+
+ Smooth corners
+
+```
+
### Supported (all standard Tailwind)
Layout, spacing, sizing, typography, colors, borders, effects, flexbox, positioning, transforms, interactive states.
@@ -1557,11 +1592,11 @@ Layout, spacing, sizing, typography, colors, borders, effects, flexbox, position
## Uniwind Pro
-Paid upgrade with 100% API compatibility. Built on a 2nd-generation C++ engine for apps that demand the best performance. **$99/seat** (billed annually). Pricing and licensing: [https://uniwind.dev/pricing](https://uniwind.dev/pricing)
+Paid upgrade with 100% API compatibility. Built on a 2nd-generation C++ engine for apps that demand the best performance. Graduated pricing (billed annually): **$99/seat** (1-3), **$49** (4-6), **$29** (7-15), **$1** (16+). Pricing and licensing: [https://uniwind.dev/pricing](https://uniwind.dev/pricing)
### Pricing & Licensing
-- **$99/seat per year** (VAT excluded unless applicable)
+- **Graduated per-seat pricing** (billed annually, VAT excluded unless applicable): $99 for seats 1-3, $49 for 4-6, $29 for 7-15, $1 for 16+
- **Individual License**: Personal Pro license per engineer
- **Team License**: Single key management — add or remove members instantly
- **CI/CD License**: Full support for automated and headless build environments
@@ -1578,13 +1613,13 @@ Paid upgrade with 100% API compatibility. Built on a 2nd-generation C++ engine f
- **Theme transitions**: Native animated transitions when switching themes (fade, slide, circle mask)
- **Priority support**: Don't let technical hurdles slow your team down
-Package: `"uniwind": "npm:uniwind-pro@rc"` in `package.json`.
+Package: `"uniwind": "npm:uniwind-pro@latest"` in `package.json`.
### Installation
1. Set dependency alias in `package.json`:
```json
- { "dependencies": { "uniwind": "npm:uniwind-pro@rc" } }
+ { "dependencies": { "uniwind": "npm:uniwind-pro@latest" } }
```
2. Install peer dependencies:
@@ -1629,18 +1664,78 @@ Pro does **NOT** work with Expo Go. Requires native rebuild.
```
+Custom keyframe animations beyond Tailwind defaults:
+
+| Class | Description |
+|-------|-------------|
+| `animate-wiggle` | Rotational wiggle |
+| `animate-shake` | Horizontal shake |
+| `animate-flash` | Opacity flash on/off |
+| `animate-rubber-band` | Elastic scale stretch |
+| `animate-swing` | Pendulum swing |
+| `animate-tada` | Scale + rotate attention seeker |
+| `animate-heartbeat` | Double-pulse heartbeat |
+| `animate-jello` | Rotational jello wobble |
+| `animate-float` | Gentle vertical float |
+| `animate-breathe` | Subtle breathing scale |
+| `animate-tilt` | Alternating tilt rotation |
+| `animate-glitch` | Rapid horizontal jitter |
+
Components auto-swap to Animated versions when animation classes detected:
| Component | Animated Version |
|-----------|------------------|
| `View` | `Animated.View` |
-| `Text` | `Animated.Text` (iOS only — no Android support from Reanimated) |
+| `Text` | `Animated.Text` |
| `Image` | `Animated.Image` |
| `ImageBackground` | `Animated.ImageBackground` |
| `ScrollView` | `Animated.ScrollView` |
| `FlatList` | `Animated.FlatList` |
-| `TextInput` | `Animated.TextInput` (iOS only) |
-| `Pressable` | `Animated.View` wrapper |
+| `TextInput` | `Animated.TextInput` |
+| `Pressable` | `Animated.Pressable` |
+
+### Entering & Exiting Animations
+
+Drive Reanimated's entering/exiting animations via className — no Reanimated imports needed. Components auto-upgrade when `uw-*` classes are detected.
+
+```tsx
+// Bounce in, bounce out
+{visible && }
+
+// Fade in slowly (1000ms)
+{visible && }
+```
+
+**Entering presets**: `uw-entering-fade-in` `uw-entering-fade-in-right` `uw-entering-fade-in-left` `uw-entering-fade-in-up` `uw-entering-fade-in-down` `uw-entering-slide-in-right` `uw-entering-slide-in-left` `uw-entering-slide-in-up` `uw-entering-slide-in-down` `uw-entering-zoom-in` `uw-entering-zoom-in-rotate` `uw-entering-zoom-in-left` `uw-entering-zoom-in-right` `uw-entering-zoom-in-up` `uw-entering-zoom-in-down` `uw-entering-zoom-in-easy-up` `uw-entering-zoom-in-easy-down` `uw-entering-bounce-in` `uw-entering-bounce-in-down` `uw-entering-bounce-in-up` `uw-entering-bounce-in-left` `uw-entering-bounce-in-right` `uw-entering-flip-in-x-up` `uw-entering-flip-in-x-down` `uw-entering-flip-in-y-left` `uw-entering-flip-in-y-right` `uw-entering-flip-in-easy-x` `uw-entering-flip-in-easy-y` `uw-entering-stretch-in-x` `uw-entering-stretch-in-y` `uw-entering-rotate-in-down-left` `uw-entering-rotate-in-down-right` `uw-entering-rotate-in-up-left` `uw-entering-rotate-in-up-right` `uw-entering-roll-in-left` `uw-entering-roll-in-right` `uw-entering-pinwheel-in` `uw-entering-light-speed-in-right` `uw-entering-light-speed-in-left`
+
+**Exiting presets**: `uw-exiting-fade-out` `uw-exiting-fade-out-right` `uw-exiting-fade-out-left` `uw-exiting-fade-out-up` `uw-exiting-fade-out-down` `uw-exiting-slide-out-right` `uw-exiting-slide-out-left` `uw-exiting-slide-out-up` `uw-exiting-slide-out-down` `uw-exiting-zoom-out` `uw-exiting-zoom-out-rotate` `uw-exiting-zoom-out-left` `uw-exiting-zoom-out-right` `uw-exiting-zoom-out-up` `uw-exiting-zoom-out-down` `uw-exiting-zoom-out-easy-up` `uw-exiting-zoom-out-easy-down` `uw-exiting-bounce-out` `uw-exiting-bounce-out-down` `uw-exiting-bounce-out-up` `uw-exiting-bounce-out-left` `uw-exiting-bounce-out-right` `uw-exiting-flip-out-x-up` `uw-exiting-flip-out-x-down` `uw-exiting-flip-out-y-left` `uw-exiting-flip-out-y-right` `uw-exiting-flip-out-easy-x` `uw-exiting-flip-out-easy-y` `uw-exiting-stretch-out-x` `uw-exiting-stretch-out-y` `uw-exiting-rotate-out-down-left` `uw-exiting-rotate-out-down-right` `uw-exiting-rotate-out-up-left` `uw-exiting-rotate-out-up-right` `uw-exiting-roll-out-left` `uw-exiting-roll-out-right` `uw-exiting-pinwheel-out` `uw-exiting-light-speed-out-right` `uw-exiting-light-speed-out-left`
+
+**Animation modifiers** (pattern: `uw-{entering|exiting|layout}-{modifier}`):
+- Duration: `uw-{type}-duration-75` `uw-{type}-duration-100` ... `uw-{type}-duration-1000` or arbitrary `uw-{type}-duration-{ms}`
+- Delay: `uw-{type}-delay-75` ... `uw-{type}-delay-1000` or arbitrary `uw-{type}-delay-{ms}`
+- Easing: `uw-{type}-ease-linear` `uw-{type}-ease-in` `uw-{type}-ease-out` `uw-{type}-ease-in-out` `uw-{type}-ease-bounce`
+- Spring: `uw-{type}-springify` `uw-{type}-damping-{value}` `uw-{type}-stiffness-{value}` `uw-{type}-mass-{value}`
+
+### Layout Transitions
+
+Animate position/size changes when siblings are added or removed:
+
+```tsx
+
+ {items.map(item => (
+
+ ))}
+
+```
+
+| Class | Description |
+|-------|-------------|
+| `uw-layout-linear-transition` | Smooth linear repositioning |
+| `uw-layout-fading-transition` | Fade during repositioning |
+| `uw-layout-jumping-transition` | Bouncy jump to new position |
+| `uw-layout-curved-transition` | Curved path repositioning |
+| `uw-layout-sequenced-transition` | Sequenced repositioning |
+| `uw-layout-entry-exit-transition` | Combined entry/exit during layout |
### Transitions
@@ -1705,6 +1800,10 @@ import Animated, { FadeIn, FlipInXUp, LinearTransition } from 'react-native-rean
No code changes needed — props connect directly to C++ engine, eliminating re-renders automatically.
+### Suspense Support
+
+Components inside React `Suspense` boundaries are handled correctly. While a subtree is suspended, Uniwind keeps the C++ shadow entries alive so theme updates and runtime changes (dark mode, orientation, etc.) still reach suspended nodes. When the tree unsuspends, styles are already up to date — no flash of stale theme.
+
### Native Insets
Remove `SafeAreaListener` setup — insets injected from native layer:
@@ -1716,24 +1815,27 @@ Remove `SafeAreaListener` setup — insets injected from native layer:
### Theme Transitions (Pro)
-Native animated transitions when switching themes. Import `ThemeTransitionPreset` and pass to `setTheme`:
+Native animated transitions when switching themes. Supported on iOS, Android, and Web.
```tsx
import { Uniwind, ThemeTransitionPreset } from 'uniwind';
// Fade transition
-Uniwind.setTheme('dark', ThemeTransitionPreset.Fade);
+Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.Fade });
// Slide transitions
-Uniwind.setTheme('dark', ThemeTransitionPreset.SlideRightToLeft);
-Uniwind.setTheme('light', ThemeTransitionPreset.SlideLeftToRight);
+Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.SlideRightToLeft });
+Uniwind.setTheme('light', { preset: ThemeTransitionPreset.SlideLeftToRight });
// Circle mask transitions (expand from a corner or center)
-Uniwind.setTheme('ocean', ThemeTransitionPreset.CircleCenter);
-Uniwind.setTheme('dark', ThemeTransitionPreset.CircleTopRight);
+Uniwind.setTheme('ocean', { preset: ThemeTransitionPreset.CircleCenter });
+
+// Blur transitions
+Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.Blur });
+Uniwind.setTheme('dark', { preset: ThemeTransitionPreset.BlurRightToLeft });
// No animation
-Uniwind.setTheme('light', ThemeTransitionPreset.None);
+Uniwind.setTheme('light');
```
Available presets:
@@ -1749,6 +1851,9 @@ Available presets:
| `ThemeTransitionPreset.CircleBottomRight` | Circle mask expanding from bottom-right |
| `ThemeTransitionPreset.CircleBottomLeft` | Circle mask expanding from bottom-left |
| `ThemeTransitionPreset.CircleCenter` | Circle mask expanding from center |
+| `ThemeTransitionPreset.Blur` | Blur out animation |
+| `ThemeTransitionPreset.BlurRightToLeft` | Directional blur from right to left |
+| `ThemeTransitionPreset.BlurLeftToRight` | Directional blur from left to right |
## Setup Diagnostics