architecture
Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.
Best use case
architecture is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.
Teams using architecture should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/architecture/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How architecture Compares
| Feature / Agent | architecture | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Explain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
You are explaining the architecture of **Nativewind v5** 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**: Nativewind v5 is a thin Tailwind CSS v4 integration layer on top of `react-native-css`. Most logic is NOT in this repo. 2. **Show the pipeline**: Walk through how a Tailwind class like `bg-red-500` goes from CSS to a React Native style, referencing the specific files involved: - `theme.css` — Tailwind v4 theme with RN-specific values - `src/plugin.tsx` — `@map` variant generates `@nativeMapping` directives - `src/metro.tsx` — `withNativewind()` wraps react-native-css's Metro config - `src/babel.tsx` — re-exports react-native-css's babel plugin - `src/index.tsx` — re-exports react-native-css's runtime API 3. **Clarify the boundary**: What belongs here vs. in react-native-css. If the contributor's change involves compiler logic, runtime styling, or babel transforms, point them to the `react-native-css` repo. 4. **Show relevant code**: Read the actual source files to illustrate points. The src/ is small enough to show most of it. 5. **Answer follow-up questions** by searching the codebase.
Related Skills
debug-nw
Debug a Nativewind v5 setup issue. Walks through common configuration problems with metro, babel, postcss, and dependencies.
triage
Triage a Nativewind or react-native-css GitHub issue. Reads the issue, determines version/repo, creates a reproduction, tests against latest published and local HEAD, then drafts a comment.
add-test
Scaffold a test for a Tailwind utility or Nativewind feature following the project's testing conventions.
langchain-architecture
Master the LangChain framework for building sophisticated LLM applications with agents, chains, memory, and tool integration.
Agent Memory Architecture
Complete zero-dependency memory system for AI agents — file-based architecture, daily notes, long-term curation, context management, heartbeat integration, and memory hygiene. No APIs, no databases, no external tools. Works with any agent framework.
hexagonal-architecture
Design, implement, and refactor Ports & Adapters systems with clear domain boundaries, dependency inversion, and testable use-case orchestration across TypeScript, Java, Kotlin, and Go services.
understanding-streamlit-architecture
Explains Streamlit's internal architecture including backend runtime, frontend rendering, and WebSocket communication. Use when debugging cross-layer issues, understanding how features work end-to-end, planning architectural changes, or onboarding to the codebase. Covers ForwardMsg/BackMsg protocol, script rerun model, element tree, widget state management, and more.
software-architecture
Guide for quality focused software architecture. This skill should be used when users want to write code, design architecture, analyze code, in any case that relates to software development.
site-architecture
Plan or restructure website hierarchy, navigation, URL patterns, breadcrumbs, and internal linking. Use when mapping pages, sections, and site structure, but not for XML sitemap auditing or schema markup.
robius-app-architecture
CRITICAL: Use for Robius app architecture patterns. Triggers on: Tokio, async, submit_async_request, 异步, 架构, SignalToUI, Cx::post_action, worker task, app structure, MatchEvent, handle_startup
react-native-architecture
Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.
architecture
Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.