From 69f979db38fd5859139b3712edeab85f0e32cb76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Thu, 18 Jun 2026 23:09:29 +0200 Subject: [PATCH 1/2] Add newly added rules to the coding standards index The coding standards index listed only the rules that existed when it was written. Several rules added since then were missing from both the categories table and the quick reference, including an entire UI category that had no entry at all. Add a UI category and list the new UI, consistency, and clean-react rules so the index reflects every rule file in the directory. --- .claude/skills/coding-standards/SKILL.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/.claude/skills/coding-standards/SKILL.md b/.claude/skills/coding-standards/SKILL.md index 9b89e4336ac6..a65bcab2e41f 100644 --- a/.claude/skills/coding-standards/SKILL.md +++ b/.claude/skills/coding-standards/SKILL.md @@ -13,8 +13,9 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r | Category | Prefix | Focus | |----------|--------|-------| | Performance | `PERF-*` | Render optimization, memo patterns, useEffect hygiene, data selection | -| Consistency | `CONSISTENCY-*` | Platform checks, magic values, unused props, ESLint discipline | -| Clean React Patterns | `CLEAN-REACT-PATTERNS-*` | Composition, component ownership, state structure | +| Consistency | `CONSISTENCY-*` | Platform checks, magic values, unused props, ESLint discipline, localization, file naming, JSDoc | +| Clean React Patterns | `CLEAN-REACT-*` | Composition, component ownership, state structure, prop typing, function components | +| UI | `UI-*` | Loading indicators, scrollable pages, styling conventions | ## Quick Reference @@ -42,6 +43,11 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r - [CONSISTENCY-4](rules/consistency-4-no-unused-props.md) — No unused props - [CONSISTENCY-5](rules/consistency-5-justify-eslint-disable.md) — Justify ESLint disables - [CONSISTENCY-6](rules/consistency-6-proper-error-handling.md) — Proper error handling +- [CONSISTENCY-7](rules/consistency-7-localize-copy.md) — Localize all user-visible copy +- [CONSISTENCY-8](rules/consistency-8-localize-numbers-dates.md) — Localize numbers, amounts, dates and phone numbers +- [CONSISTENCY-9](rules/consistency-9-file-naming.md) — Name files after what they export +- [CONSISTENCY-10](rules/consistency-10-jsdoc.md) — Follow the JSDoc style guidelines +- [CONSISTENCY-11](rules/consistency-11-no-todo-comments.md) — Track future work in an issue, not a TODO comment ### Clean React Patterns - [CLEAN-REACT-PATTERNS-0](rules/clean-react-0-compiler.md) — React Compiler compliance @@ -50,6 +56,15 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r - [CLEAN-REACT-PATTERNS-3](rules/clean-react-3-context-free-contracts.md) — Context-free component contracts - [CLEAN-REACT-PATTERNS-4](rules/clean-react-4-no-side-effect-spaghetti.md) — No side-effect spaghetti - [CLEAN-REACT-PATTERNS-5](rules/clean-react-5-narrow-state.md) — Keep state narrow +- [CLEAN-REACT-6](rules/clean-react-6-no-componentprops.md) — Import the exported prop type instead of ComponentProps +- [CLEAN-REACT-7](rules/clean-react-7-no-inline-prop-types.md) — Do not inline prop types on exported components +- [CLEAN-REACT-8](rules/clean-react-8-no-class-components.md) — Use function components, not class components +- [CLEAN-REACT-9](rules/clean-react-9-no-proptypes.md) — Use TypeScript types, not propTypes or defaultProps + +### UI +- [UI-1](rules/ui-1-correct-loading-indicator.md) — Use the correct loading indicator based on navigation context +- [UI-2](rules/ui-2-new-page-scrollview.md) — New pages must be scrollable +- [UI-3](rules/ui-3-no-inline-styles.md) — Do not use inline style objects ## Usage From 713c3190d0e3d4d7d0f40ca547ae7b4589cd7f1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= Date: Fri, 19 Jun 2026 12:09:42 +0200 Subject: [PATCH 2/2] Normalize clean-react rule ids to the CLEAN-REACT-PATTERNS prefix The four newest clean-react rules used the id prefix CLEAN-REACT- while the established rules and the category use CLEAN-REACT-PATTERNS-. Align the four new rules (ruleId frontmatter and section headers) with the existing convention, and update the index and category table to match. Filenames already follow the shared clean-react-N convention, so they are unchanged. --- .claude/skills/coding-standards/SKILL.md | 10 +++++----- .../rules/clean-react-6-no-componentprops.md | 4 ++-- .../rules/clean-react-7-no-inline-prop-types.md | 4 ++-- .../rules/clean-react-8-no-class-components.md | 4 ++-- .../rules/clean-react-9-no-proptypes.md | 4 ++-- 5 files changed, 13 insertions(+), 13 deletions(-) diff --git a/.claude/skills/coding-standards/SKILL.md b/.claude/skills/coding-standards/SKILL.md index a65bcab2e41f..7136a4341e7a 100644 --- a/.claude/skills/coding-standards/SKILL.md +++ b/.claude/skills/coding-standards/SKILL.md @@ -14,7 +14,7 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r |----------|--------|-------| | Performance | `PERF-*` | Render optimization, memo patterns, useEffect hygiene, data selection | | Consistency | `CONSISTENCY-*` | Platform checks, magic values, unused props, ESLint discipline, localization, file naming, JSDoc | -| Clean React Patterns | `CLEAN-REACT-*` | Composition, component ownership, state structure, prop typing, function components | +| Clean React Patterns | `CLEAN-REACT-PATTERNS-*` | Composition, component ownership, state structure, prop typing, function components | | UI | `UI-*` | Loading indicators, scrollable pages, styling conventions | ## Quick Reference @@ -56,10 +56,10 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r - [CLEAN-REACT-PATTERNS-3](rules/clean-react-3-context-free-contracts.md) — Context-free component contracts - [CLEAN-REACT-PATTERNS-4](rules/clean-react-4-no-side-effect-spaghetti.md) — No side-effect spaghetti - [CLEAN-REACT-PATTERNS-5](rules/clean-react-5-narrow-state.md) — Keep state narrow -- [CLEAN-REACT-6](rules/clean-react-6-no-componentprops.md) — Import the exported prop type instead of ComponentProps -- [CLEAN-REACT-7](rules/clean-react-7-no-inline-prop-types.md) — Do not inline prop types on exported components -- [CLEAN-REACT-8](rules/clean-react-8-no-class-components.md) — Use function components, not class components -- [CLEAN-REACT-9](rules/clean-react-9-no-proptypes.md) — Use TypeScript types, not propTypes or defaultProps +- [CLEAN-REACT-PATTERNS-6](rules/clean-react-6-no-componentprops.md) — Import the exported prop type instead of ComponentProps +- [CLEAN-REACT-PATTERNS-7](rules/clean-react-7-no-inline-prop-types.md) — Do not inline prop types on exported components +- [CLEAN-REACT-PATTERNS-8](rules/clean-react-8-no-class-components.md) — Use function components, not class components +- [CLEAN-REACT-PATTERNS-9](rules/clean-react-9-no-proptypes.md) — Use TypeScript types, not propTypes or defaultProps ### UI - [UI-1](rules/ui-1-correct-loading-indicator.md) — Use the correct loading indicator based on navigation context diff --git a/.claude/skills/coding-standards/rules/clean-react-6-no-componentprops.md b/.claude/skills/coding-standards/rules/clean-react-6-no-componentprops.md index 8b6968024993..f573a4a610a7 100644 --- a/.claude/skills/coding-standards/rules/clean-react-6-no-componentprops.md +++ b/.claude/skills/coding-standards/rules/clean-react-6-no-componentprops.md @@ -1,9 +1,9 @@ --- -ruleId: CLEAN-REACT-6 +ruleId: CLEAN-REACT-PATTERNS-6 title: Import the exported prop type instead of ComponentProps --- -## [CLEAN-REACT-6] Import the exported prop type instead of ComponentProps +## [CLEAN-REACT-PATTERNS-6] Import the exported prop type instead of ComponentProps ### Reasoning diff --git a/.claude/skills/coding-standards/rules/clean-react-7-no-inline-prop-types.md b/.claude/skills/coding-standards/rules/clean-react-7-no-inline-prop-types.md index f9c80e8b8e33..871331b516fc 100644 --- a/.claude/skills/coding-standards/rules/clean-react-7-no-inline-prop-types.md +++ b/.claude/skills/coding-standards/rules/clean-react-7-no-inline-prop-types.md @@ -1,9 +1,9 @@ --- -ruleId: CLEAN-REACT-7 +ruleId: CLEAN-REACT-PATTERNS-7 title: Do not inline prop types on exported components --- -## [CLEAN-REACT-7] Do not inline prop types on exported components +## [CLEAN-REACT-PATTERNS-7] Do not inline prop types on exported components ### Reasoning diff --git a/.claude/skills/coding-standards/rules/clean-react-8-no-class-components.md b/.claude/skills/coding-standards/rules/clean-react-8-no-class-components.md index 2c330639502b..416a7800d4f2 100644 --- a/.claude/skills/coding-standards/rules/clean-react-8-no-class-components.md +++ b/.claude/skills/coding-standards/rules/clean-react-8-no-class-components.md @@ -1,9 +1,9 @@ --- -ruleId: CLEAN-REACT-8 +ruleId: CLEAN-REACT-PATTERNS-8 title: Use function components, not class components --- -## [CLEAN-REACT-8] Use function components, not class components +## [CLEAN-REACT-PATTERNS-8] Use function components, not class components ### Reasoning diff --git a/.claude/skills/coding-standards/rules/clean-react-9-no-proptypes.md b/.claude/skills/coding-standards/rules/clean-react-9-no-proptypes.md index 7982a0f998c6..c41bd6f62b4e 100644 --- a/.claude/skills/coding-standards/rules/clean-react-9-no-proptypes.md +++ b/.claude/skills/coding-standards/rules/clean-react-9-no-proptypes.md @@ -1,9 +1,9 @@ --- -ruleId: CLEAN-REACT-9 +ruleId: CLEAN-REACT-PATTERNS-9 title: Use TypeScript types, not propTypes or defaultProps --- -## [CLEAN-REACT-9] Use TypeScript types, not propTypes or defaultProps +## [CLEAN-REACT-PATTERNS-9] Use TypeScript types, not propTypes or defaultProps ### Reasoning