juniors-best-practice

分类: 开发与编程 | 上传者: siberiacancode | 下载: 0 | 版本: v1.0（最新）

以青少年为中心的 React 和 TypeScript 最佳实践。在编写或审查代码时使用此技能，可以在 React、TypeScript、样式、开发工具、资产和 Git 等常见范围内强制执行清晰、一致且可维护的模式。

更新日志: Source: GitHub https://github.com/siberiacancode/agent-skills

目录结构

当前层级: tree/main/skills/juniors-best-practice/

📁 rules/
- 📄 _sections.md 1.3 KB
- 📄 _template.md 564 B
- 📄 assets-svg-files.md 1.7 KB
- 📄 beginner-const-vs-let.md 501 B
- 📄 beginner-double-negation.md 660 B
- 📄 beginner-early-return.md 888 B
- 📄 beginner-nullish-vs-or.md 936 B
- 📄 beginner-unnecessary-destructuring.md 903 B
- 📄 beginner-uppercase-constants.md 829 B
- 📄 beginner-useless-return-arrow.md 588 B
- 📄 devtools-formatter-linter.md 598 B
- 📄 devtools-package-manager-lock.md 635 B
- 📄 devtools-sorting-imports.md 950 B
- 📄 git-commit-convention.md 907 B
- 📄 react-children-prop.md 795 B
- 📄 react-extends-component.md 908 B
- 📄 react-props-typing.md 485 B
- 📄 react-string-props.md 505 B
- 📄 rest-naming-openapi.md 988 B
- 📄 rest-scalability-abstractions.md 1.1 KB
- 📄 styling-classnames-function.md 1.4 KB
- 📄 styling-css-states.md 1.1 KB
- 📄 typescript-alias-naming.md 743 B
- 📄 typescript-flat-translations.md 750 B
📄 AGENTS.md 4.0 KB
📄 metadata.json 484 B
📄 README.md 2.3 KB
📄 SKILL.md 3.5 KB

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 Best Practice

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.

## When to Apply

Reference these guidelines when:

- Writing or reviewing React/TypeScript code for clarity and consistency
- Teaching junior developers or establishing baseline team conventions
- Refactoring code to align with simple, maintainable patterns
- Standardizing project-wide practices (imports, tooling, naming, commits)

## Rule Categories by Priority

| 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-`       |

## Quick Reference

### 1. Beginner Foundations (HIGH)

- `beginner-early-return` - Prefer early returns to reduce nesting
- `beginner-double-negation` - Avoid `!isNotX` patterns
- `beginner-unnecessary-destructuring` - Keep objects intact for clarity
- `beginner-const-vs-let` - Default to const
- `beginner-nullish-vs-or` - Use ?? for defaults
- `beginner-useless-return-arrow` - Remove redundant return
- `beginner-uppercase-constants` - Use UPPER_CASE only for stable constants

### 2. TypeScript (MEDIUM)

- `typescript-alias-naming` - Use safe path alias prefixes
- `typescript-flat-translations` - Prefer flat translation keys to reduce duplication

### 3. React (MEDIUM)

- `react-string-props` - Use string literals when possible
- `react-children-prop` - Use children for composition
- `react-extends-component` - Extend native element props
- `react-props-typing` - Keep props typing readable

### 4. Styling (MEDIUM)

- `styling-classnames-function` - Use clsx for conditional classes
- `styling-css-states` - Prefer CSS selectors for component states

### 5. Devtools (MEDIUM)

- `devtools-formatter-linter` - Use formatter and linter
- `devtools-sorting-imports` - Keep imports ordered and grouped
- `devtools-package-manager-lock` - Use a single package manager

### 6. Assets (LOW-MEDIUM)

- `assets-svg-files` - Use SVGs as components

### 7. Git (LOW)

- `git-commit-convention` - Use consistent commit conventions

### 8. REST (MEDIUM)

- `rest-scalability-abstractions` - Build REST layer around reusable transport abstractions
- `rest-naming-openapi` - Keep REST naming aligned with OpenAPI contracts

## How to Use

Read individual rule files for detailed explanations and examples:

```
rules/beginner-early-return.md
rules/react-props-typing.md
```

Each rule file contains:

- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

登录后下载/点赞/收藏 ❤ 13 | ★ 0

juniors-best-practice

目录结构

SKILL.md

举报内容

提示