From eee32166b35eaf550efa275c1811d65b5a18e63a Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Mon, 16 Mar 2026 19:35:57 +0100
Subject: [PATCH] list `rn-directory` CLI on tools page, small tweaks

---
 components/Tools/GitHubButton.tsx |  2 +-
 components/Tools/ToolEntry.tsx    |  7 ++++---
 pages/tools.tsx                   | 21 +++++++++++++++++++++
 scenes/PackageScoreScene.tsx      |  8 ++++----
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/components/Tools/GitHubButton.tsx b/components/Tools/GitHubButton.tsx
index f3db780c1..c13f77685 100644
--- a/components/Tools/GitHubButton.tsx
+++ b/components/Tools/GitHubButton.tsx
@@ -12,7 +12,7 @@ export default function GitHubButton({ href }: Props) {
     <Button
       openInNewTab
       href={href}
-      style={tw`min-h-8 flex-row gap-1.5 bg-primary px-3 text-sm dark:bg-primary-dark`}>
+      style={tw`min-h-8 flex-row gap-1.5 bg-primary-dark px-3 text-sm`}>
       <GitHub width={16} style={tw`text-black`} />
       <P style={tw`text-sm text-black`}>GitHub</P>
     </Button>
diff --git a/components/Tools/ToolEntry.tsx b/components/Tools/ToolEntry.tsx
index 1e1c442f3..540f2a84c 100644
--- a/components/Tools/ToolEntry.tsx
+++ b/components/Tools/ToolEntry.tsx
@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { View } from 'react-native';
 
 import { H3, P } from '~/common/styleguide';
@@ -8,7 +9,7 @@ import GitHubButton from './GitHubButton';
 
 type Props = {
   name: string;
-  description: string;
+  description: ReactNode;
   githubUrl: string;
   buttons: {
     label: string;
@@ -19,8 +20,8 @@ type Props = {
 export default function ToolEntry({ name, description, githubUrl, buttons }: Props) {
   return (
     <View style={tw`rounded-xl border border-default px-5 py-4`}>
-      <H3 style={tw`mb-0.5 text-xl`}>{name}</H3>
-      <P style={tw`mb-3 font-light leading-[29px]`}>{description}</P>
+      <H3 style={tw`mb-1 text-xl`}>{name}</H3>
+      <P style={tw`mb-3 font-light leading-[23px]`}>{description}</P>
       <View style={tw`flex-row flex-wrap gap-3`}>
         <GitHubButton href={githubUrl} />
         {buttons.map(({ label, href }) => (
diff --git a/pages/tools.tsx b/pages/tools.tsx
index 5af936f95..c23e85400 100644
--- a/pages/tools.tsx
+++ b/pages/tools.tsx
@@ -17,6 +17,27 @@ export default function Tools() {
         description="List of development tools, apps and websites using React Native Directory data."
       />
       <ContentContainer style={tw`my-10 gap-4 px-4`}>
+        <ToolEntry
+          name="React Native Directory CLI"
+          description={
+            <span>
+              Propose new entries to React Native Directory directly from your terminal. The{' '}
+              <code
+                style={tw`rounded-sm bg-palette-gray2 p-0.5 px-1 text-[90%] dark:bg-palette-gray6`}>
+                rn-directory
+              </code>{' '}
+              CLI gathers the required information manually or automatically, creates a fork, and
+              opens a pull request on behalf of the user currently logged in to the GitHub CLI.
+            </span>
+          }
+          githubUrl="https://github.com/Simek/rn-directory"
+          buttons={[
+            {
+              label: 'npm Registry',
+              href: 'https://www.npmjs.com/package/rn-directory',
+            },
+          ]}
+        />
         <ToolEntry
           name="React Native Directory VS Code extension"
           description="Browse through the React Native Directory and perform actions related to the chosen package inside the built-in editor Command Palette."
diff --git a/scenes/PackageScoreScene.tsx b/scenes/PackageScoreScene.tsx
index 5eda9cdd6..0fc997d89 100644
--- a/scenes/PackageScoreScene.tsx
+++ b/scenes/PackageScoreScene.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { View } from 'react-native';
 
-import { A, Caption, H6, useLayout } from '~/common/styleguide';
+import { A, Caption, H6Section, useLayout } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
 import { DirectoryScore } from '~/components/Library/DirectoryScore';
 import DetailsNavigation from '~/components/Package/DetailsNavigation';
@@ -42,7 +42,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               isSmallScreen && tw`flex-col px-5`,
             ]}>
             <View style={tw`items-center`}>
-              <H6 style={tw`mb-3`}>Directory score</H6>
+              <H6Section style={tw`mb-3`}>Directory score</H6Section>
               <DirectoryScore score={library.score} sizeMultiplier={2} />
               <span style={tw`mt-1 flex items-center text-[24px] font-semibold text-primary-dark`}>
                 {library.score}/100
@@ -67,7 +67,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               </Caption>
             </View>
           </View>
-          <H6 style={tw`text-secondary`}>Matching criteria</H6>
+          <H6Section style={tw`text-secondary`}>Matching criteria</H6Section>
           <View>
             {SCORING_CRITERIONS.filter(({ name }) =>
               library.matchingScoreModifiers.includes(name)
@@ -77,7 +77,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               </ScoringCriterion>
             ))}
           </View>
-          <H6 style={tw`text-secondary`}>Not matched criteria</H6>
+          <H6Section style={tw`text-secondary`}>Not matched criteria</H6Section>
           <View>
             {SCORING_CRITERIONS.filter(
               ({ name }) => !library.matchingScoreModifiers.includes(name)