chore: add Claude Code skills for architecture and testing

Author: danstepanov

.claude/skills/add-test/SKILL.md

@@ -0,0 +1,54 @@
+---
+name: add-test
+description: Scaffold a test for a react-native-css feature following the project's testing conventions.
+argument-hint: [feature-or-css-property]
+allowed-tools: Read, Grep, Glob, Edit, Write
+---
+
+## Context
+
+react-native-css has three test domains in `src/__tests__/`:
+
+- `babel/` — Babel plugin tests using `babel-plugin-tester`
+- `compiler/` — CSS compilation tests verifying JSON output
+- `native/` — Runtime tests for style application
+
+## Conventions by domain
+
+### Babel tests (`src/__tests__/babel/`)
+
+Use `babel-plugin-tester`:
+
+```typescript
+import { pluginTester } from "babel-plugin-tester";
+
+pluginTester({
+  plugin,
+  tests: {
+    "test name": {
+      code: `import { View } from 'react-native';`,
+      output: `import { View } from 'react-native-css/components';`,
+    },
+  },
+});
+```
+
+### Compiler tests (`src/__tests__/compiler/`)
+
+Verify CSS → JSON compilation output structure.
+
+### Native tests (`src/__tests__/native/`)
+
+Test runtime style application on native platform.
+
+## Steps
+
+1. **Identify the feature**: What needs testing? Use `$ARGUMENTS` as the starting point.
+
+2. **Determine the domain**: Is this a babel transform, compiler output, or runtime behavior?
+
+3. **Find existing tests**: Search the appropriate `src/__tests__/` subdirectory for similar tests.
+
+4. **Write the test**: Follow the conventions of the domain.
+
+5. **Run the test**: Execute `yarn test`. Note: ignore `ExperimentalWarning: VM Modules` warnings — they're expected.

.claude/skills/architecture/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: architecture
+description: Explain the react-native-css architecture, compiler pipeline, and key files. Use when a contributor wants to understand how the codebase works.
+allowed-tools: Read, Grep, Glob
+---
+
+You are explaining the architecture of **react-native-css** to a contributor.
+
+Start by reading `DEVELOPMENT.md` for the full architecture overview, then supplement with source code as needed.
+
+## How to explain
+
+1. **Start with the big picture**: react-native-css is a standalone CSS polyfill for React Native. It works independently of Tailwind — any `.css` file can be used. Nativewind v5 depends on this as its core engine.
+
+2. **Show the compiler pipeline**: Walk through how a CSS rule becomes a React Native style:
+   - Metro transformer intercepts `.css` files (`src/metro/metro-transformer.ts`)
+   - lightningcss parses the CSS AST
+   - `compile()` processes rules, media queries, keyframes, variables (`src/compiler/compiler.ts`)
+   - Output is a `ReactNativeCssStyleSheet` (JSON)
+   - Injection code registers styles with the native runtime (`src/metro/injection-code.ts`)
+
+3. **Explain the babel plugin**: It rewrites React Native imports so components get `className` support:
+   - `import { View } from 'react-native'` → `import { View } from 'react-native-css/components'`
+
+4. **Explain the runtime**:
+   - Reactive style system (`src/native/reactivity.ts`) — observables for media queries, color scheme
+   - StyleCollection singleton (`src/native-internal/`) — isolated to avoid circular deps
+   - Platform-aware: different outputs for native (JSON) vs web (browser CSS)
+
+5. **Show relevant code**: Read source files to illustrate. The compiler and runtime are the most complex parts.
+
+6. **Clarify the boundary**: This repo owns compilation, runtime, babel, and Metro integration. Nativewind adds Tailwind-specific theming on top.