菜单
Juniors-focused React and TypeScript best practices. Use this skill when writing or reviewing code to enforce clear, consistent, and maintainable patterns across common scopes like React, TypeScript, styling, devtools, assets, and Git.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/siberiacancode/agent-skills --skill juniors-best-practice命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | juniors-best-practice |
| description | Juniors-focused React and TypeScript best practices. Use this skill when writing or reviewing code to enforce clear, consistent, and maintainable patterns across common scopes like React, TypeScript, styling, devtools, assets, and Git. |
| license | MIT |
| metadata | {"author":"siberiacancode","version":"1.0.0"} |
Juniors-focused best practices for React and TypeScript projects. The rules are short, practical, and organized by scope to guide consistent code reviews, refactoring, and new feature work.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Beginner Foundations | HIGH | beginner- |
| 2 | TypeScript | MEDIUM | typescript- |
| 3 | React | MEDIUM | react- |
| 4 | Styling | MEDIUM | styling- |
| 5 | Devtools | MEDIUM | devtools- |
| 6 | Assets | LOW-MEDIUM | assets- |
| 7 | Git | LOW | git- |
| 8 | REST | MEDIUM | rest- |
beginner-early-return - Prefer early returns to reduce nestingbeginner-double-negation - Avoid !isNotX patternsbeginner-unnecessary-destructuring - Keep objects intact for claritybeginner-const-vs-let - Default to constbeginner-nullish-vs-or - Use ?? for defaultsbeginner-useless-return-arrow - Remove redundant returnbeginner-uppercase-constants - Use UPPER_CASE only for stable constantstypescript-alias-naming - Use safe path alias prefixestypescript-flat-translations - Prefer flat translation keys to reduce duplicationreact-string-props - Use string literals when possiblereact-children-prop - Use children for compositionreact-extends-component - Extend native element propsreact-props-typing - Keep props typing readablestyling-classnames-function - Use clsx for conditional classesstyling-css-states - Prefer CSS selectors for component statesdevtools-formatter-linter - Use formatter and linterdevtools-sorting-imports - Keep imports ordered and groupeddevtools-package-manager-lock - Use a single package managerassets-svg-files - Use SVGs as componentsgit-commit-convention - Use consistent commit conventionsrest-scalability-abstractions - Build REST layer around reusable transport abstractionsrest-naming-openapi - Keep REST naming aligned with OpenAPI contractsRead individual rule files for detailed explanations and examples:
rules/beginner-early-return.md
rules/react-props-typing.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
React hooks best practices for React application code and custom hook design across DX, optimization, and logic. Use when writing components with hooks, creating or refactoring custom hooks, reviewing hook usage/APIs/internals, checking effects/dependencies/state/refs/callbacks, or improving hook correctness, ergonomics, and performance.
Practical playbook for React teams to choose and apply reactuse hooks across state, async flows, browser APIs, and UI interactions. Use it when replacing custom hook logic with production-ready patterns that stay compatible with SSR and Next.js.