- If the user asks for a plan, proposal, explanation, or guidance, respond ONLY with a proposed plan; do NOT start implementing
- When answering questions, don't write code unless explicitly asked
- Organization: https://github.com/MFB-Technologies-Inc
- Project: react-async-renderer
- Repository: react-async-renderer
- Default target branch for PRs: main
- If the user is not logged in remind them to login using
gh auth login
- Title Format: Use conventional commit format (e.g.,
feat: add new feature,fix: resolve bug) - Reviewers: Set to
MFB-Technologies-Inc/web-app-devsteam - Assignment: Assign to the PR creator
- Body Structure: Include a "Summary" section with bullet points of changes
- GitHub CLI Command Example:
gh pr create --title "fix: describe the change" --body "$(cat <<'EOF'
## Summary
- Change 1 description
- Change 2 description
- Change 3 description
EOF
)" --reviewer "MFB-Technologies-Inc/web-app-devs" --assignee "@me"src/- Main library source codeexample-app/- Demo application showing library usagescripts/- Build and release automation scripts.github/workflows/- CI/CD pipelines- Test files are in
__tests__/directories
- Define constants/variables; no "magic" string or numbers
- Avoid excessive nesting
- Be declarative
- Prefer array methods over imperative loops
- Run
npm run lintregularly to check for lint errors
- Use strict, strong typing
- Explicitly type function returns unless unusually complex
- Do not use classes; use function builder patterns
- Use types, not interfaces
- Use explicit type imports
- Avoid enums, use constants and string literal types
- Run
npm run typecheckto check typing whenever you finish editing a typescript file
-
When creating React components:
- Create them using the function keyword
- Type their props explicitly
- Type the return type explicitly using React.JSX.Element and, if appropriate, null
- Put display text in a
text: Record<string,string>object outside of component scope - Do not destructure props; this makes it clear when values come from props
- Do not use React.FC
- Do not use ReactNode
- Example:
const text = { enabled: "Enabled" } export function MyComponent(props:{ isEnabled: boolean }):React.JSX.Element { return ( <div> {props.isEnabled && <p>{text.enabled}</p>} </div> ) }
- Use SASS (.scss)
- Use variables to define colors
- Use rgba() not hexcodes for colors
- Use
npm run test:onceto run tests, if it exists. - If it does not exist, suggest creating it to the developer.
- Do not run
npm run test; it runs in watch mode and will block you.