siberiacancode/juniors-best-practice
skills/juniors-best-practice/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add siberiacancode/agent-skills juniors-best-practiceInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 27, 2026, 5:51 AM327.2s28 files scanned
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
- 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 nestingbeginner-double-negation- Avoid!isNotXpatternsbeginner-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 constants
2. TypeScript (MEDIUM)
typescript-alias-naming- Use safe path alias prefixestypescript-flat-translations- Prefer flat translation keys to reduce duplication
3. React (MEDIUM)
react-string-props- Use string literals when possiblereact-children-prop- Use children for compositionreact-extends-component- Extend native element propsreact-props-typing- Keep props typing readable
4. Styling (MEDIUM)
styling-classnames-function- Use clsx for conditional classesstyling-css-states- Prefer CSS selectors for component states
5. Devtools (MEDIUM)
devtools-formatter-linter- Use formatter and linterdevtools-sorting-imports- Keep imports ordered and groupeddevtools-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 abstractionsrest-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
Related Skills
siberiacancode/web-design-guidelines
development
VerifiedTrustedCommunity
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
15SKILL.mdUpdated Jun 7, 2026
siberiacancode/reactuse
development
VerifiedTrustedCommunity
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.
15SKILL.mdUpdated May 27, 2026
siberiacancode/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
15SKILL.mdUpdated May 27, 2026
openclaw/taskflow
tools
VerifiedTrustedCommunity
Use when work should span one or more detached tasks but still behave like one job with a single owner context. TaskFlow is the durable flow substrate under authoring layers like Lobster, ACPX, plugins, or plain code. Keep conditional logic in the caller; use TaskFlow for flow identity, child-task linkage, waiting state, revision-checked mutations, and user-facing emergence.
357,764SKILL.mdUpdated Apr 10, 2026