extract-errors
Use when adding new error messages to React, or seeing "unknown error code" warnings.
Port a compiler pass from TypeScript to Rust. Gathers context, plans the port, implements in a subagent with test-fix loop, then reviews.
$ npx -y skills add facebook/react --skill compiler-port --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/compiler-portContext preview
The summary Claude sees to decide when to auto-load this skill.
Port a compiler pass from TypeScript to Rust. Gathers context, plans the port, implements in a subagent with test-fix loop, then reviews.
name: compiler-port description: Port a compiler pass from TypeScript to Rust. Gathers context, plans the port, implements in a subagent with test-fix loop, then reviews.
Port a compiler pass from TypeScript to Rust end-to-end.
Arguments:
1. Read `compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts` 2. Search for `name: '$ARGUMENTS'` in log entries 3. If not found, list all available pass names from the `log({...name: '...'})` calls and stop 4. Check the `kind` field of the matching log entry:
1. Follow the import in Pipeline.ts to find the actual TypeScript file(s) for the pass 2. Map the TS folder to a Rust crate using this mapping:
| TypeScript Path | Rust Crate | |---|---| | `src/HIR/` (excluding `BuildHIR.ts`, `HIRBuilder.ts`) | `react_compiler_hir` | | `src/HIR/BuildHIR.ts`, `src/HIR/HIRBuilder.ts` | `react_compiler_lowering` | | `src/Babel/`, `src/Entrypoint/` | `react_compiler` | | `src/CompilerError.ts` | `react_compiler_diagnostics` | | `src/ReactiveScopes/` | `react_compiler_reactive_scopes` | | `src/<Name>/` | `react_compiler_<name>` (1:1, e.g., `src/Optimization/` -> `react_compiler_optimization`) |
3. Check if the pass is already ported:
Read the following files (all reads happen in main context):
1. **Architecture guide**: `compiler/docs/rust-port/rust-port-architecture.md` 2. **Pass documentation**: Check `compiler/packages/babel-plugin-react-compiler/docs/passes/` for docs about this pass 3. **TypeScript source**: All TypeScript source files for the pass + any helpers imported from the same folder 4. **Rust pipeline**: `compiler/crates/react_compiler/src/entrypoint/pipeline.rs` 5. **Rust HIR types**: Key type files in `compiler/crates/react_compiler_hir/src/` (especially `hir.rs`, `environment.rs`) 6. **Rust reactive types**: For reactive passes, also read `compiler/crates/react_compiler_hir/src/reactive_function.rs` 7. **Target crate**: If the target crate already exists, read its `Cargo.toml`, `src/lib.rs`, and existing files to understand the current structure
Based on the gathered context, create and present a plan covering:
1. **New types needed**: Any Rust types that need to be added or modified 2. **Files to create**: List of new Rust files with their TS counterparts 3. **Crate setup**: Whether a new crate is needed or adding to an existing one 4. **Pipeline wiring**: How the pass will be called from `pipeline.rs` 5. **Key translation decisions**: Any non-obvious TS-to-Rust translations
Present the plan to the user, then proceed to implementation.
Launch the `port-pass` agent with all gathered context:
The agent will: 1. Port the TypeScript code to Rust 2. Create or update the crate as needed 3. Wire the pass into pipeline.rs 4. Run the test-fix loop until 0 failures (see agent prompt for details)
1. Run `/compiler-review` on the changes 2. If issues are found:
3. Repeat until review is clean
Report to the user:
React is a JavaScript library for building user interfaces. Declarative: React makes it painless to create interactive UIs.
Repo: facebook/react
Use when adding new error messages to React, or seeing "unknown error code" warnings.
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.
Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.
Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.