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