跳到正文
cccskills
免费在 GitHub 公开

pr-review

Review a PR or the current branch for a Lumen design-system change — routes each changed file to React (web/Tailwind) or React Native (useStyleSheet) guidelines, checks the Nx version plan, and reports a flat, severity-scored finding list. Use when the user asks to review a PR, review code changes, check a branch, do a local code review, or provides a GitHub PR URL.

中文简介正在准备中。当前显示原文说明。

集成工具FigmaGitHub
查看安装方法

包含的文件(1)

  • SKILL.md10.5 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

PR Review

Review a change against Lumen's conventions. The distinctive skill here is platform routing: this is a cross-platform monorepo, so the same finding category means different things in libs/ui-react (Tailwind) versus libs/ui-rnative (useStyleSheet). Apply the right rules to the right files and never leak one platform's rules onto the other.

Setup

Local branch

git fetch origin main
git diff origin/main...HEAD --stat
git diff origin/main...HEAD
git log origin/main...HEAD --oneline

Remote PR (GitHub link)

gh pr view <PR_NUMBER> --json title,body,baseRefName,headRefName,files
gh pr diff <PR_NUMBER>

Then read the full diff. For each changed file, read the whole file (not just the hunk) so findings account for surrounding context. Group changes into new files, modified files, deleted files.

Platform routing (do this first)

Derive the touched libs from the changed paths (git diff origin/main...HEAD --name-only | cut -d/ -f1-2 | sort -u), map each to its platform via the Libraries table in AGENTS.md, then apply the matching topic skill's ## Review checks. Applying the wrong platform's rules is the main failure mode — decide deliberately.

The concrete, diff-verifiable violations for each topic live in that topic skill's ## Review checks table — this skill does not restate them:

TopicSkill (see its ## Review checks)
API design & composition (props, compound, controlled state, parity)component-architecture
Styling (Tailwind vs useStyleSheet)component-styling
Tests (Vitest vs Jest)component-testing
File/folder layout & required filescomponent-anatomy
Storiescomponent-stories
MDX docscomponent-mdx
Code Connectcode-connect
Version planrelease-plan (scored below)

Rules:

  • A single PR often touches both platforms (a component usually ships on web and native together). When both ui-react and ui-rnative are touched, apply both the web and RN review checks and add the API-parity check: prop names, defaults, and variant vocabulary should match across the two implementations unless there's a platform reason not to (Parity).
  • Never apply Tailwind rules to an RN file or useStyleSheet rules to a web file. The token vocabulary is shared (bg-muted ↔ t.colors.bg.muted), the mechanism is not.
  • Chart / lib exceptions are described once in each skill's Review checks (e.g. RN charts under Components/visualization/ use useTheme() + flat stories, no .mdx/figma). Don't flag files a lib does not use.
  • libs/design-core/**: the CSS/Tailwind tokens and the JS theme objects must stay in sync (see the figma-token-sync skill). If a token is added/changed on one side only, flag it under Consistency.
  • libs/utils-shared/**: cross-platform TS/React — apply the shared criteria below, no styling rules.

Already enforced — do not review by hand

These are ESLint errors (see eslint.config.mjs) and a Stop hook runs nx affected --target=lint --fix automatically. Flagging them by hand is noise; spend findings on things a linter can't catch. Do not raise:

  • Banned imports (no-restricted-imports): forwardRef, TouchableOpacity, Animated/Easing/LayoutAnimation, ElementRef, MutableRefObject.
  • Import hygiene: import/order, import/no-duplicates, import/no-cycle, import/no-default-export, import/no-unused-modules.
  • Type style: type over interface (consistent-type-definitions), import type (consistent-type-imports), T[] over Array<T> (array-type).
  • Dead/unused code (no-unused-vars), eqeqeq, no-negated-condition, default-param-last, no-console, and all formatting (prettier).
  • Accessibility lint (jsx-a11y strict) and module boundaries (@nx/enforce-module-boundaries scope tags).
  • Unknown/invalid Tailwind classnames (eslint-plugin-better-tailwindcss). This includes raw palette and typography classes (text-gray-500, font-bold): Lumen's preset removes them, so they are unknown classes.
  • Arbitrary Tailwind values (shadcn/no-arbitrary-values from @ledgerhq/lumen-lint-plugin). They are warnings in this repo, so a new one in a diff is already visible.

Caveat: a valid token class that is the wrong one for the design lints clean, and hardcoded colors in style objects or SVG props are not linted at all — both stay manual checks, see component-styling's Review checks.

Findings vs severity — independent

  • Number of findings is unbounded. 0 is a valid, good result. Never pad to a number, never cap at one.
  • Severity (X/10) rates a single finding's importance. It has nothing to do with how many findings there are.

No hallucinated findings

Only report issues you can point to at a concrete file:line. If the code is correct and follows conventions, report zero findings and recommend approval. Never invent, pad, or raise speculative "could maybe" issues. Do not flag style that already matches the codebase.

Severity scale

  • 10/10 Critical — bugs, crashes, data loss, security. Must fix before merge.
  • 8-9/10 Major — wrong abstraction, missing error handling, type unsafety that compiles but fails at runtime, missing version plan.
  • 6-7/10 Moderate — performance flaws, inconsistency with codebase patterns, missing tests for important paths, wrong version-plan bump type.
  • 4-5/10 Minor — naming inconsistencies, suboptimal patterns, missing JSDoc on public API.
  • 1-3/10 Nit — cosmetic, optional, preference.

Shared review criteria (both platforms)

Apply these regardless of platform; platform specifics are in the references.

Correctness

  • Does the code do what it claims? Are edge cases handled (null, undefined, empty arrays, error/loading states)?
  • Async: race conditions, cleanup on unmount, no unhandled rejections.
  • Nullable/optional values handled safely; user-facing error messages helpful.
  • Comments explain intent (the why), never restate the code — flag comments that just narrate mechanics, and complex logic left uncommented.

Type safety

  • No any (lint only warns) or as assertions that hide a real mismatch.
  • Explicit return types on module-level functions (except JSX components).
  • Generics not overly broad or narrow.

Performance

  • Unnecessary re-renders: unstable objects/functions passed to memoized children.
  • Large inline objects/arrays created every render; expensive work not memoized.
  • List key correctness.

Abstraction & API quality

The rules — prop naming, positive booleans, minimal public API, Base*Props layering, compound composition, controlled/uncontrolled state, cross-platform parity, memoization — are owned by the component-architecture skill. Apply its ## Review checks table here (routed above); this skill does not restate them.

Docs vs implementation consistency

  • .stories.tsx and .mdx must reflect the current API — no references to removed/renamed props, default values match the implementation, interactive examples still work. (Not applicable to RN charts under Components/visualization/.)

Version plan check

The version-plan rules (when a plan is required, the exemption list, the path→package mapping, filename convention, always-patch, one-package-per-file) live in the release-plan skill — the single source. Load it if you need the detail. Here, just verify and score:

git diff origin/main...HEAD --name-only -- .nx/version-plans/
  • Production code under libs/*/src/ changed but no plan exists → Major (8/10), category Release. (A PR touching only exempt files needs no plan.)
  • Bump type is not patch → Moderate (6/10), Release, recommend patch.
  • A single file groups multiple packages (should be one file per package) → Moderate (6/10), Release.
  • Plan names the wrong package for the changed paths (see the mapping in release-plan) → Moderate (6/10), Release.

Output

If the review is short (fewer than ~15 findings), return it directly. If long, write it to tmp/pr-review-[branch-name].md and report the path (tmp is gitignored).

The review is a flat, scored list — one item per finding, sorted by severity (highest first). No per-file nesting; each item is self-contained.

# PR Review: [branch-name]

## Summary

[1-3 sentence overview of the PR's purpose and scope]

**Platforms touched**: React web / React Native / both / design-core / utils-shared
**Files changed**: X | **Added**: +X | **Removed**: -X

## Component Checklist (if a new component was added)

[Fill in the required-files checklist from `component-anatomy` for the component's
lib, marking each item pass/fail]

## Findings

| # | Severity | Category | Finding | Location |
|---|----------|----------|---------|----------|
| 1 | 9/10 | Type Safety | Uses `any` for payload type | `libs/ui-react/src/lib/Components/core/Menu/types.ts:28` |
| 2 | 7/10 | Consistency | Raw Tailwind color `text-gray-500` instead of `text-muted` | `libs/ui-react/src/lib/Components/core/Menu/Menu.tsx:26` |

### Details

**1. [Finding title]** — 9/10 Type Safety — `libs/ui-react/src/lib/Components/core/Menu/types.ts:28`
[1-3 sentence description]
> **Fix**: [concrete suggestion]

Key rules for output

  • Each finding has exactly one severity, one category, one file:line location. Use a range (:42-50) when it spans lines. The location in the table must match the location in the details entry.
  • Categories: Correctness, Type Safety, Consistency, Performance, Abstraction, API Quality, Docs Consistency, Release, Parity.
  • The summary table comes first for scanning; details follow for depth.
  • Zero findings is a valid result — say so explicitly and recommend approval.

Tips

  • Always read the full file, not just the diff hunk.
  • Compare against a similar existing component in the same library for pattern alignment.
  • Check the PR doesn't accidentally remove or break existing barrel exports.
  • Verify new dependencies land in the correct package.json (peer vs dev).

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Creates and maintains Figma Code Connect files (`*.figma.tsx`) that map Figma components to code via the parser-based `figma.connect()` API. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.tsx files.

中文简介正在准备中。当前显示原文说明。

LedgerHQ/lumen232026年10月17日 更新

Use when creating, naming, or placing a file or folder in libs/*, or when modifying or adding a file to an existing component (even when the barrel isn't touched) — component vs utility naming, the one-responsibility-per-file layout, when a folder needs an `index.ts` barrel (public API only), and the required set of files a component needs per lib. Load this before scaffolding or restructuring a component so the layout matches the codebase.

中文简介正在准备中。当前显示原文说明。

LedgerHQ/lumen232026年10月17日 更新

Use when designing or changing a component's public API, its composition, or its state model in libs/ui-react or libs/ui-rnative — layering (core vs internal vs primitives), BaseProps/Props splits, converting a component to compound / changing its composition with createSafeContext, controlled/uncontrolled state, prop-naming conventions, and cross-platform API parity. Load this before shaping a new component, changing its props, or refactoring its composition.

中文简介正在准备中。当前显示原文说明。

LedgerHQ/lumen232026年10月17日 更新

Use when writing or editing Storybook MDX docs (*.mdx) — the two-tab Overview/Implementation structure, story-backed `<Source>` examples, and doc table guidelines.

中文简介正在准备中。当前显示原文说明。

LedgerHQ/lumen232026年10月17日 更新

Use when creating or editing Storybook stories (*.stories.tsx, React or React Native) — story layout, controls, and export naming conventions.

中文简介正在准备中。当前显示原文说明。

LedgerHQ/lumen232026年10月17日 更新

Use when building or styling a component in libs/ui-react or libs/ui-rnative — the cross-platform styling principles, plus routing to the platform mechanics: Tailwind + cva + cn on web, useStyleSheet + themeJS + lx on React Native. Load this before writing component styles.

中文简介正在准备中。当前显示原文说明。

LedgerHQ/lumen232026年10月17日 更新

查看 LedgerHQ 的全部技能

报告此技能的问题