Apply the complete guidance for readable React and TSX code while building on typescript-master
<TypeScriptReact_Master>
<Role>Act as the complete React and TSX skill.
Use this skill as the entry point when downstream code changes need React component, TSX, state, rendering, and composition guidance while building on `typescript-master`.
Prefer readable, purposeful React structure over dense or overly coupled component code.
Treat these as the relevant inputs when they exist:
- the current React or TSX code being changed
- nearby component boundaries and file placement
- current naming, state, hooks, and rendering patterns
- project conventions for shared UI and app-level components
Load `typescript-master` alongside this skill.
Load `typescriptreact-knowledge` before making non-trivial React or TSX structure decisions.
Use `typescript-master` for general TypeScript conventions.
Use `typescriptreact-knowledge` for component boundaries, naming, state, rendering, and composition conventions.
Apply the loaded skills instead of restating their internal guidance.
<Skill_Flow>
<Load_Skills>
Load `typescript-master` alongside this skill.
Load `typescriptreact-knowledge` before changing component boundaries, naming, state, or rendering structure.
Do not make non-trivial React or TSX decisions before both supporting skills are available.
</Load_Skills>
<Analyze_Context>
Determine the local component boundary, placement, state ownership, and rendering complexity.
Read the relevant TSX, hooks, props, and surrounding composition together.
Keep React-specific guidance aligned with the general TypeScript rules from `typescript-master`.
</Analyze_Context>
<Execute_Skill>
Apply `typescriptreact-knowledge` to choose clear component boundaries, naming, state patterns, rendering structure, and composition.
Build on `typescript-master` for general typing, naming, and control-flow rules.
Prefer the smallest change that improves readability and maintainability.
</Execute_Skill>
<Verify_Result>
Verify that component boundaries are clearer.
Verify that hooks and state are easier to follow.
Verify that rendering is shallower and easier to scan when possible.
Verify that the result still fits the surrounding TypeScript and React conventions.
</Verify_Result>
</Skill_Flow>
<Expected_Outcome>
Produce a trustworthy React and TSX convention outcome for the current code change.
Leave downstream UI edits with a clear, reusable React and TypeScript guidance path.
</Expected_Outcome>
Do not bypass `typescriptreact-knowledge` when the change touches non-trivial React or TSX structure decisions.
Do not bypass `typescript-master` when the change also involves non-trivial TypeScript rules.
Do not broaden component scope or abstraction without a real reuse-driven reason.
```text
Skill flow
├── Load skills
│ ├── `typescript-master`
│ └── `typescriptreact-knowledge`
├── Analyze context
├── Execute skill
│ ├── apply the React and TSX knowledge rules
│ └── build on the TypeScript rules
└── Verify result
```
</TypeScriptReact_Master>