[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7EV0JKX4R27AXDHVRZPJ64H":3,"skill-same:01M7EV0JKX4R27AXDHVRZPJ64H":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":26,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":29,"ownerDescription":6,"updatedAt":30,"install":31,"resources":44},"01M7EV0JKX4R27AXDHVRZPJ64H","ams-nativewind-pro",null,"TanNhatCMS\u002Fjarvis","TanNhatCMS","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F113796420?v=4","01M753MV17KG5CD3152G3WQEQY","KietNT","01M7EKEDYVYQ6PWVJJMZ911VMX",0,"MIT","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fams-nativewind-pro\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: nativewind-pro\ndescription: Style React Native apps with Tailwind CSS via NativeWind: setup, responsive design, dark mode, custom themes, and platform quirks. Use when building React Native UIs with utility classes.\ncategory: development\n---\n\n# NativeWind Pro\n\nA practical guide to NativeWind — Tailwind CSS for React Native: setup, writing utility-first styles that compile to native, responsive and dark-mode patterns, custom themes, and the platform quirks that differ from web Tailwind.\n\n## Overview\n\nNativeWind brings Tailwind's utility classes to React Native by compiling `className` strings into React Native styles at build time. You write `\u003CView className=\"flex-1 bg-white dark:bg-black px-4\">` and get native styling without StyleSheet boilerplate. It uses the Tailwind CSS engine under the hood, so most of your Tailwind knowledge transfers — with important exceptions where the web and native diverge.\n\n## When to use\n\n- Styling React Native or Expo apps with utility classes.\n- Sharing design tokens\u002Ftheme between web (Tailwind) and native codebases.\n- Dark mode, responsive breakpoints, and platform-specific styles in RN.\n- Migrating a StyleSheet-heavy codebase toward utility styling.\n\n## Core concepts\n\n- **Build-time compilation.** NativeWind's Babel plugin converts `className` to RN styles. Arbitrary values (`w-[137px]`) work; fully dynamic class strings don't — the compiler must see the class names statically.\n- **`tailwind.config.js` shared.** Same config format as web Tailwind: theme extension, custom colors, fonts, spacing. One source of design tokens.\n- **Dark mode.** `dark:` variant via the `class` strategy (toggle with `useColorScheme` or a theme store). Set `darkMode: 'class'` in config.\n- **Responsive.** Breakpoints (`sm:`, `md:`) map to screen widths via Dimensions — useful for tablets\u002Ffoldables, less central than on web.\n- **Platform variants.** `ios:` and `android:` prefixes for platform-specific tweaks (shadows, elevation, ripple areas).\n- **CSS interop caveats.** No cascade, no global CSS, no pseudo-elements. Some utilities have no RN equivalent (`float`, `grid` — use flexbox).\n\n## Practical workflow\n\n**1. Setup (Expo example).**\n```bash\nnpx expo install nativewind tailwindcss react-native-reanimated\nnpx tailwindcss init\n```\nAdd the Babel plugin (`nativewind\u002Fbabel`), create `global.css` with `@tailwind` directives (or the v4 `@import \"tailwindcss\"`), import it at the app root, and point `tailwind.config.js` content at your source files.\n\n**2. Write utility-first components.**\n```tsx\nimport { View, Text, Pressable } from 'react-native';\n\nexport function Card({ title, onPress }: Props) {\n  return (\n    \u003CPressable\n      onPress={onPress}\n      className=\"rounded-2xl bg-white p-4 shadow-sm active:opacity-70 dark:bg-zinc-900 ios:shadow-md android:elevation-2\"\n    >\n      \u003CText className=\"text-base font-semibold text-zinc-900 dark:text-white\">{title}\u003C\u002FText>\n    \u003C\u002FPressable>\n  );\n}\n```\n\n**3. Theme via config.** Extend colors, fontFamily (load fonts with `expo-font` first), borderRadius in `tailwind.config.js`. Use semantic names (`bg-surface`, `text-muted`) so dark mode flips in one place.\n\n**4. Handle dynamic styles.** For truly dynamic values (e.g., width from a measurement), fall back to `style={}` — don't try to interpolate class names at runtime; the compiler can't see them.\n\n**5. Verify on both platforms.** Shadows (`shadow-*` iOS vs `elevation` Android), text rendering, and border behavior differ. Check every custom component on iOS and Android.\n\n## Common pitfalls\n\n- **Dynamic class names.** `` className={`bg-${color}-500`} `` compiles to nothing — the Babel plugin needs literal class strings. Use lookup maps of full class names instead.\n- **Web-only utilities.** `hover:` (mostly meaningless on touch), `grid`, `backdrop-blur`, `truncate` nuances — check RN support; use `numberOfLines` for truncation.\n- **Missing content globs.** Classes in files not covered by `tailwind.config.js` `content` silently don't generate. Include all source dirs.\n- **Font loading.** Custom `fontFamily` utilities need the font actually loaded (expo-font `useFonts`) before render, or text falls back\u002Fflashes.\n- **Dark mode default.** Forgetting `darkMode: 'class'` (or the v4 equivalent) means `dark:` variants never activate.\n- **Style prop conflicts.** Mixing `className` and `style` on the same element — `style` wins on conflicts, which can surprise. Prefer one source per element.\n- **Over-specific arbitrary values.** `w-[137px]` everywhere defeats the design system. Extend the theme with real tokens instead.\n- **Version mismatch.** NativeWind v2 vs v4 have different setup (CSS-first config in v4). Follow the docs for your exact major version; mixing instructions breaks the Babel pipeline.\n","# NativeWind Pro\n\nA practical guide to NativeWind — Tailwind CSS for React Native: setup, writing utility-first styles that compile to native, responsive and dark-mode patterns, custom themes, and the platform quirks that differ from web Tailwind.\n\n## Overview\n\nNativeWind brings Tailwind's utility classes to React Native by compiling `className` strings into React Native styles at build time. You write `\u003CView className=\"flex-1 bg-white dark:bg-black px-4\">` and get native styling without StyleSheet boilerplate. It uses the Tailwind CSS engine under the hood, so most of your Tailwind knowledge transfers — with important exceptions where the web and native diverge.\n\n## When to use\n\n- Styling React Native or Expo apps with utility classes.\n- Sharing design tokens\u002Ftheme between web (Tailwind) and native codebases.\n- Dark mode, responsive breakpoints, and platform-specific styles in RN.\n- Migrating a StyleSheet-heavy codebase toward utility styling.\n\n## Core concepts\n\n- **Build-time compilation.** NativeWind's Babel plugin converts `className` to RN styles. Arbitrary values (`w-[137px]`) work; fully dynamic class strings don't — the compiler must see the class names statically.\n- **`tailwind.config.js` shared.** Same config format as web Tailwind: theme extension, custom colors, fonts, spacing. One source of design tokens.\n- **Dark mode.** `dark:` variant via the `class` strategy (toggle with `useColorScheme` or a theme store). Set `darkMode: 'class'` in config.\n- **Responsive.** Breakpoints (`sm:`, `md:`) map to screen widths via Dimensions — useful for tablets\u002Ffoldables, less central than on web.\n- **Platform variants.** `ios:` and `android:` prefixes for platform-specific tweaks (shadows, elevation, ripple areas).\n- **CSS interop caveats.** No cascade, no global CSS, no pseudo-elements. Some utilities have no RN equivalent (`float`, `grid` — use flexbox).\n\n## Practical workflow\n\n**1. Setup (Expo example).**\n```bash\nnpx expo install nativewind tailwindcss react-native-reanimated\nnpx tailwindcss init\n```\nAdd the Babel plugin (`nativewind\u002Fbabel`), create `global.css` with `@tailwind` directives (or the v4 `@import \"tailwindcss\"`), import it at the app root, and point `tailwind.config.js` content at your source files.\n\n**2. Write utility-first components.**\n```tsx\nimport { View, Text, Pressable } from 'react-native';\n\nexport function Card({ title, onPress }: Props) {\n  return (\n    \u003CPressable\n      onPress={onPress}\n      className=\"rounded-2xl bg-white p-4 shadow-sm active:opacity-70 dark:bg-zinc-900 ios:shadow-md android:elevation-2\"\n    >\n      \u003CText className=\"text-base font-semibold text-zinc-900 dark:text-white\">{title}\u003C\u002FText>\n    \u003C\u002FPressable>\n  );\n}\n```\n\n**3. Theme via config.** Extend colors, fontFamily (load fonts with `expo-font` first), borderRadius in `tailwind.config.js`. Use semantic names (`bg-surface`, `text-muted`) so dark mode flips in one place.\n\n**4. Handle dynamic styles.** For truly dynamic values (e.g., width from a measurement), fall back to `style={}` — don't try to interpolate class names at runtime; the compiler can't see them.\n\n**5. Verify on both platforms.** Shadows (`shadow-*` iOS vs `elevation` Android), text rendering, and border behavior differ. Check every custom component on iOS and Android.\n\n## Common pitfalls\n\n- **Dynamic class names.** `` className={`bg-${color}-500`} `` compiles to nothing — the Babel plugin needs literal class strings. Use lookup maps of full class names instead.\n- **Web-only utilities.** `hover:` (mostly meaningless on touch), `grid`, `backdrop-blur`, `truncate` nuances — check RN support; use `numberOfLines` for truncation.\n- **Missing content globs.** Classes in files not covered by `tailwind.config.js` `content` silently don't generate. Include all source dirs.\n- **Font loading.** Custom `fontFamily` utilities need the font actually loaded (expo-font `useFonts`) before render, or text falls back\u002Fflashes.\n- **Dark mode default.** Forgetting `darkMode: 'class'` (or the v4 equivalent) means `dark:` variants never activate.\n- **Style prop conflicts.** Mixing `className` and `style` on the same element — `style` wins on conflicts, which can surprise. Prefer one source per element.\n- **Over-specific arbitrary values.** `w-[137px]` everywhere defeats the design system. Extend the theme with real tokens instead.\n- **Version mismatch.** NativeWind v2 vs v4 have different setup (CSS-first config in v4). Follow the docs for your exact major version; mixing instructions breaks the Babel pipeline.\n",{},"main","af388a77c2fe5e0b4fd879cca4300a0ffa9a6579","skills\u002Fams-nativewind-pro",1,"https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis","https:\u002F\u002Fgithub.com\u002FTanNhatCMS","https:\u002F\u002Fmrkiet.name.vn","2026-11-07 14:23:08",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add TanNhatCMS\u002Fjarvis --skill ams-nativewind-pro",{"tool":37,"command":38},"bunx","bunx skills add TanNhatCMS\u002Fjarvis --skill ams-nativewind-pro",{"tool":40,"command":41},"pnpm","pnpm dlx skills add TanNhatCMS\u002Fjarvis --skill ams-nativewind-pro","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fams-nativewind-pro\u002FSKILL.md",true,[],[46,53,61,68,75,82],{"skillNo":47,"name":48,"nameZh":6,"description":49,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":50,"categories":51,"keywords":52,"publishedAt":18},"01M7EWYJR0J8DARY7E59Z6Y9MV","web-scrape","Turn web pages into LLM-ready markdown via the Firecrawl API (renders JS, anti-bot handling). Use when browser_open\u002Ffetch fails on JS-heavy pages, or when you need clean markdown\u002Fstructured extraction from a site. Requires FIRECRAWL_API_KEY.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fweb-scrape\u002FSKILL.md",[],[],{"skillNo":54,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":57,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":18},"01M7EWYBN5P6F2AJG3FR24T9BP","design-taste-frontend","tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML\u002FCSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, \"AI-made\", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Ftaste-design\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Ftaste-design\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":18},"01M7EWY8FQFNQ2GB7NZZWGSSDX","test-driven-development","Use when implementing any feature or bugfix, before writing implementation code","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-tdd\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":18},"01M7EWY5SHBFRH1HDHVWM9K7TV","systematic-debugging","Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-debugging\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":18},"01M7EWY3NM0Z0JAKS7HDZ24K66","requesting-code-review","Use when completing tasks, implementing major features, or before merging to verify work meets requirements","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-code-review\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":18},"01M7EWY0WRMWX4M9ZFY0WKC593","brainstorming","You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in software or out of it (a talk, a business, a renovation).","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-brainstorming\u002FSKILL.md",[],[]]