From 2f4d7178219523470d6b8330d8547d68e6c88a01 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 23:12:54 +0100
Subject: [PATCH 1/5] feat: suggest installing dependency as devDependency when
 appropriate

Closes #530
---
 app/components/Terminal/Install.vue         |  64 ++++++++++-
 app/pages/package/[[org]]/[name].vue        |   1 +
 app/utils/install-command.ts                | 114 +++++++++++++++++++-
 i18n/locales/en.json                        |   2 +
 i18n/locales/pl-PL.json                     |   2 +
 lunaria/files/en-GB.json                    |   2 +
 lunaria/files/en-US.json                    |   2 +
 lunaria/files/pl-PL.json                    |   2 +
 test/unit/app/utils/install-command.spec.ts |  90 ++++++++++++++++
 9 files changed, 277 insertions(+), 2 deletions(-)

diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 908cc2e8d..2a30f03e9 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -7,6 +7,7 @@ const props = defineProps<{
   requestedVersion?: string | null
   installVersionOverride?: string | null
   jsrInfo?: JsrPackageInfo | null
+  readmeHtml?: string | null
   typesPackageName?: string | null
   executableInfo?: { hasExecutable: boolean; primaryCommand?: string } | null
   createPackageInfo?: { packageName: string } | null
@@ -30,6 +31,20 @@ function getInstallPartsForPM(pmId: PackageManagerId) {
   })
 }
 
+const devDependencySuggestion = computed(() =>
+  getDevDependencySuggestion(props.packageName, props.readmeHtml),
+)
+
+function getDevInstallPartsForPM(pmId: PackageManagerId) {
+  return getInstallCommandParts({
+    packageName: props.packageName,
+    packageManager: pmId,
+    version: props.requestedVersion,
+    jsrInfo: props.jsrInfo,
+    dev: true,
+  })
+}
+
 // Generate run command parts for a specific package manager
 function getRunPartsForPM(pmId: PackageManagerId, command?: string) {
   return getRunCommandParts({
@@ -68,7 +83,7 @@ function getTypesInstallPartsForPM(pmId: PackageManagerId) {
   const pm = packageManagers.find(p => p.id === pmId)
   if (!pm) return []
 
-  const devFlag = pmId === 'bun' ? '-d' : '-D'
+  const devFlag = getDevDependencyFlag(pmId)
   const pkgSpec = pmId === 'deno' ? `npm:${props.typesPackageName}` : props.typesPackageName
 
   return [pm.label, pm.action, devFlag, pkgSpec]
@@ -95,6 +110,18 @@ const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+
+const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
+const copyDevInstallCommand = () =>
+  copyDevInstall(
+    getInstallCommand({
+      packageName: props.packageName,
+      packageManager: selectedPM.value,
+      version: props.requestedVersion,
+      jsrInfo: props.jsrInfo,
+      dev: true,
+    }),
+  )
 </script>
 
 <template>
@@ -133,6 +160,41 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
           </button>
         </div>
 
+        <!-- Suggested dev dependency install command -->
+        <template v-if="devDependencySuggestion.recommended">
+          <div class="flex items-center gap-2 pt-1 select-none">
+            <span class="text-fg-subtle font-mono text-sm"
+              ># {{ $t('package.get_started.dev_dependency_hint') }}</span
+            >
+          </div>
+          <div
+            v-for="pm in packageManagers"
+            :key="`install-dev-${pm.id}`"
+            :data-pm-cmd="pm.id"
+            class="flex items-center gap-2 group/devinstallcmd min-w-0"
+          >
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+            <code class="font-mono text-sm min-w-0"
+              ><span
+                v-for="(part, i) in getDevInstallPartsForPM(pm.id)"
+                :key="i"
+                :class="i === 0 ? 'text-fg' : 'text-fg-muted'"
+                >{{ i > 0 ? ' ' : '' }}{{ part }}</span
+              ></code
+            >
+            <button
+              type="button"
+              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/devinstallcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              :aria-label="$t('package.get_started.copy_dev_command')"
+              @click.stop="copyDevInstallCommand"
+            >
+              <span aria-live="polite">{{
+                devInstallCopied ? $t('common.copied') : $t('common.copy')
+              }}</span>
+            </button>
+          </div>
+        </template>
+
         <!-- @types package install - render all PM variants when types package exists -->
         <template v-if="typesPackageName && showTypesInInstall">
           <div
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 6990e3046..7eecfa97b 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1234,6 +1234,7 @@ const showSkeleton = shallowRef(false)
             :requested-version="requestedVersion"
             :install-version-override="installVersionOverride"
             :jsr-info="jsrInfo"
+            :readme-html="readmeData?.html"
             :types-package-name="typesPackageName"
             :executable-info="executableInfo"
             :create-package-info="createPackageInfo"
diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
index 7823b28ec..6af487f87 100644
--- a/app/utils/install-command.ts
+++ b/app/utils/install-command.ts
@@ -68,6 +68,117 @@ export interface InstallCommandOptions {
   packageManager: PackageManagerId
   version?: string | null
   jsrInfo?: JsrPackageInfo | null
+  dev?: boolean
+}
+
+export type DevDependencySuggestionReason = 'known-package' | 'readme-hint'
+
+export interface DevDependencySuggestion {
+  recommended: boolean
+  reason?: DevDependencySuggestionReason
+}
+
+const KNOWN_DEV_DEPENDENCY_PACKAGES = new Set<string>([
+  '@types',
+  'biome',
+  'chai',
+  'eslint',
+  'esbuild',
+  'husky',
+  'jest',
+  'lint-staged',
+  'mocha',
+  'oxc',
+  'oxfmt',
+  'oxlint',
+  'playwright',
+  'prettier',
+  'rolldown',
+  'rollup',
+  'stylelint',
+  'ts-jest',
+  'ts-node',
+  'tsx',
+  'turbo',
+  'typescript',
+  'vite',
+  'vitest',
+  'webpack',
+])
+
+function isKnownDevDependencyPackage(packageName: string): boolean {
+  const normalized = packageName.toLowerCase()
+  if (normalized.startsWith('@types/')) {
+    return true
+  }
+  // Match scoped packages by name segment, e.g. @scope/eslint-config
+  const namePart = normalized.includes('/') ? normalized.split('/').pop() : normalized
+  if (!namePart) return false
+
+  return (
+    KNOWN_DEV_DEPENDENCY_PACKAGES.has(normalized) ||
+    KNOWN_DEV_DEPENDENCY_PACKAGES.has(namePart) ||
+    normalized.startsWith('@typescript-eslint/') ||
+    namePart.startsWith('eslint-') ||
+    namePart.startsWith('prettier-') ||
+    namePart.startsWith('vite-') ||
+    namePart.startsWith('webpack-') ||
+    namePart.startsWith('babel-')
+  )
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function hasReadmeDevInstallHint(packageName: string, readmeHtml?: string | null): boolean {
+  if (!readmeHtml) return false
+
+  const escapedName = escapeRegExp(packageName)
+  const escapedNpmName = escapeRegExp(`npm:${packageName}`)
+  const packageSpec = `(?:${escapedName}|${escapedNpmName})(?:@[\\w.-]+)?`
+
+  const patterns = [
+    // npm install -D pkg / pnpm add --save-dev pkg
+    new RegExp(
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+(?:--save-dev|-d)\s+${packageSpec}`,
+      'i',
+    ),
+    // npm install pkg --save-dev / pnpm add pkg -D
+    new RegExp(
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+${packageSpec}\s+(?:--save-dev|-d)`,
+      'i',
+    ),
+    // deno add -D npm:pkg
+    new RegExp(String.raw`deno\s+add\s+(?:--dev|-d)\s+${packageSpec}`, 'i'),
+  ]
+
+  return patterns.some(pattern => pattern.test(readmeHtml))
+}
+
+export function getDevDependencySuggestion(
+  packageName: string,
+  readmeHtml?: string | null,
+): DevDependencySuggestion {
+  if (isKnownDevDependencyPackage(packageName)) {
+    return {
+      recommended: true,
+      reason: 'known-package',
+    }
+  }
+
+  if (hasReadmeDevInstallHint(packageName, readmeHtml)) {
+    return {
+      recommended: true,
+      reason: 'readme-hint',
+    }
+  }
+
+  return { recommended: false }
+}
+
+export function getDevDependencyFlag(packageManager: PackageManagerId): '-D' | '-d' {
+  return packageManager === 'bun' ? '-d' : '-D'
 }
 
 /**
@@ -108,8 +219,9 @@ export function getInstallCommandParts(options: InstallCommandOptions): string[]
 
   const spec = getPackageSpecifier(options)
   const version = options.version ? `@${options.version}` : ''
+  const devFlag = options.dev ? [getDevDependencyFlag(options.packageManager)] : []
 
-  return [pm.label, pm.action, `${spec}${version}`]
+  return [pm.label, pm.action, ...devFlag, `${spec}${version}`]
 }
 
 export interface ExecuteCommandOptions extends InstallCommandOptions {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index c8c59c783..3e9f6692f 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -221,6 +221,8 @@
       "title": "Get started",
       "pm_label": "Package manager",
       "copy_command": "Copy install command",
+      "copy_dev_command": "Copy dev install command",
+      "dev_dependency_hint": "Usually installed as a dev dependency",
       "view_types": "View {package}"
     },
     "create": {
diff --git a/i18n/locales/pl-PL.json b/i18n/locales/pl-PL.json
index 102b53a1a..5725f0020 100644
--- a/i18n/locales/pl-PL.json
+++ b/i18n/locales/pl-PL.json
@@ -221,6 +221,8 @@
       "title": "Zacznij",
       "pm_label": "Menedżer pakietów",
       "copy_command": "Kopiuj komendę instalacji",
+      "copy_dev_command": "Kopiuj komendę instalacji dla dev",
+      "dev_dependency_hint": "Zazwyczaj instalowane jako zależność deweloperska",
       "view_types": "Zobacz {package}"
     },
     "create": {
diff --git a/lunaria/files/en-GB.json b/lunaria/files/en-GB.json
index d9685809e..9bb1d13fb 100644
--- a/lunaria/files/en-GB.json
+++ b/lunaria/files/en-GB.json
@@ -220,6 +220,8 @@
       "title": "Get started",
       "pm_label": "Package manager",
       "copy_command": "Copy install command",
+      "copy_dev_command": "Copy dev install command",
+      "dev_dependency_hint": "Usually installed as a dev dependency",
       "view_types": "View {package}"
     },
     "create": {
diff --git a/lunaria/files/en-US.json b/lunaria/files/en-US.json
index ffec3ed29..cdd76c079 100644
--- a/lunaria/files/en-US.json
+++ b/lunaria/files/en-US.json
@@ -220,6 +220,8 @@
       "title": "Get started",
       "pm_label": "Package manager",
       "copy_command": "Copy install command",
+      "copy_dev_command": "Copy dev install command",
+      "dev_dependency_hint": "Usually installed as a dev dependency",
       "view_types": "View {package}"
     },
     "create": {
diff --git a/lunaria/files/pl-PL.json b/lunaria/files/pl-PL.json
index 0445f3351..1d42bd55a 100644
--- a/lunaria/files/pl-PL.json
+++ b/lunaria/files/pl-PL.json
@@ -220,6 +220,8 @@
       "title": "Zacznij",
       "pm_label": "Menedżer pakietów",
       "copy_command": "Kopiuj komendę instalacji",
+      "copy_dev_command": "Kopiuj komendę instalacji dla dev",
+      "dev_dependency_hint": "Zazwyczaj instalowane jako zależność deweloperska",
       "view_types": "Zobacz {package}"
     },
     "create": {
diff --git a/test/unit/app/utils/install-command.spec.ts b/test/unit/app/utils/install-command.spec.ts
index bbe0cb9ad..22a09970a 100644
--- a/test/unit/app/utils/install-command.spec.ts
+++ b/test/unit/app/utils/install-command.spec.ts
@@ -5,6 +5,8 @@ import {
   getPackageSpecifier,
   getExecuteCommand,
   getExecuteCommandParts,
+  getDevDependencySuggestion,
+  getDevDependencyFlag,
 } from '../../../../app/utils/install-command'
 import type { JsrPackageInfo } from '../../../../shared/types/jsr'
 
@@ -124,6 +126,26 @@ describe('install command generation', () => {
       })
     })
 
+    describe('dev dependency installs', () => {
+      it.each([
+        ['npm', 'npm install -D eslint'],
+        ['pnpm', 'pnpm add -D eslint'],
+        ['yarn', 'yarn add -D eslint'],
+        ['bun', 'bun add -d eslint'],
+        ['deno', 'deno add -D npm:eslint'],
+        ['vlt', 'vlt install -D eslint'],
+      ] as const)('%s → %s', (pm, expected) => {
+        expect(
+          getInstallCommand({
+            packageName: 'eslint',
+            packageManager: pm,
+            jsrInfo: jsrNotAvailable,
+            dev: true,
+          }),
+        ).toBe(expected)
+      })
+    })
+
     describe('scoped package on JSR without version', () => {
       it.each([
         ['npm', 'npm install @trpc/server'],
@@ -203,6 +225,16 @@ describe('install command generation', () => {
       expect(parts).toEqual(['npm', 'install', 'lodash@4.17.21'])
     })
 
+    it('returns correct parts for npm with dev flag', () => {
+      const parts = getInstallCommandParts({
+        packageName: 'eslint',
+        packageManager: 'npm',
+        jsrInfo: jsrNotAvailable,
+        dev: true,
+      })
+      expect(parts).toEqual(['npm', 'install', '-D', 'eslint'])
+    })
+
     it('returns correct parts for deno with jsr: prefix when available', () => {
       const parts = getInstallCommandParts({
         packageName: '@trpc/server',
@@ -212,6 +244,16 @@ describe('install command generation', () => {
       expect(parts).toEqual(['deno', 'add', 'jsr:@trpc/server'])
     })
 
+    it('returns correct parts for bun with lowercase dev flag', () => {
+      const parts = getInstallCommandParts({
+        packageName: 'eslint',
+        packageManager: 'bun',
+        jsrInfo: jsrNotAvailable,
+        dev: true,
+      })
+      expect(parts).toEqual(['bun', 'add', '-d', 'eslint'])
+    })
+
     it('returns correct parts for deno with npm: prefix when not on JSR', () => {
       const parts = getInstallCommandParts({
         packageName: 'lodash',
@@ -243,6 +285,54 @@ describe('install command generation', () => {
     })
   })
 
+  describe('dev dependency suggestion heuristic', () => {
+    it('suggests dev dependency for known tooling packages', () => {
+      expect(getDevDependencySuggestion('eslint')).toEqual({
+        recommended: true,
+        reason: 'known-package',
+      })
+      expect(getDevDependencySuggestion('@types/node')).toEqual({
+        recommended: true,
+        reason: 'known-package',
+      })
+      expect(getDevDependencySuggestion('@typescript-eslint/parser')).toEqual({
+        recommended: true,
+        reason: 'known-package',
+      })
+    })
+
+    it('suggests dev dependency from README install command hints', () => {
+      const readmeHtml = '<p>Install with <code>npm install --save-dev some-tool</code></p>'
+
+      expect(getDevDependencySuggestion('some-tool', readmeHtml)).toEqual({
+        recommended: true,
+        reason: 'readme-hint',
+      })
+    })
+
+    it('does not suggest dev dependency for runtime packages without hints', () => {
+      expect(getDevDependencySuggestion('react')).toEqual({
+        recommended: false,
+      })
+    })
+
+    it('does not suggest dev dependency when README hint targets a different package', () => {
+      const readmeHtml = '<p>Install with <code>yarn add -D bar</code></p>'
+
+      expect(getDevDependencySuggestion('foo', readmeHtml)).toEqual({
+        recommended: false,
+      })
+    })
+  })
+
+  describe('getDevDependencyFlag', () => {
+    it('returns lowercase flag only for bun', () => {
+      expect(getDevDependencyFlag('bun')).toBe('-d')
+      expect(getDevDependencyFlag('npm')).toBe('-D')
+      expect(getDevDependencyFlag('deno')).toBe('-D')
+    })
+  })
+
   describe('edge cases', () => {
     it('handles null jsrInfo same as not available for deno', () => {
       expect(

From 6e544726de9fa80015985fffa42a380f82ab7653 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 23:34:21 +0100
Subject: [PATCH 2/5] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 app/utils/install-command.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
index 6af487f87..686994934 100644
--- a/app/utils/install-command.ts
+++ b/app/utils/install-command.ts
@@ -79,7 +79,6 @@ export interface DevDependencySuggestion {
 }
 
 const KNOWN_DEV_DEPENDENCY_PACKAGES = new Set<string>([
-  '@types',
   'biome',
   'chai',
   'eslint',

From 33d701a4f37e6e234c64ec9ac87a9cdbf6c75117 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 5 Feb 2026 23:37:37 +0100
Subject: [PATCH 3/5] Apply suggestion from Coderabbit

---
 app/utils/install-command.ts                | 4 ++--
 test/unit/app/utils/install-command.spec.ts | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
index 686994934..8b1b5cf48 100644
--- a/app/utils/install-command.ts
+++ b/app/utils/install-command.ts
@@ -140,12 +140,12 @@ function hasReadmeDevInstallHint(packageName: string, readmeHtml?: string | null
   const patterns = [
     // npm install -D pkg / pnpm add --save-dev pkg
     new RegExp(
-      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+(?:--save-dev|-d)\s+${packageSpec}`,
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+(?:--save-dev|--dev|-d)\s+${packageSpec}`,
       'i',
     ),
     // npm install pkg --save-dev / pnpm add pkg -D
     new RegExp(
-      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+${packageSpec}\s+(?:--save-dev|-d)`,
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+${packageSpec}\s+(?:--save-dev|--dev|-d)`,
       'i',
     ),
     // deno add -D npm:pkg
diff --git a/test/unit/app/utils/install-command.spec.ts b/test/unit/app/utils/install-command.spec.ts
index 22a09970a..1e283a8d5 100644
--- a/test/unit/app/utils/install-command.spec.ts
+++ b/test/unit/app/utils/install-command.spec.ts
@@ -310,6 +310,15 @@ describe('install command generation', () => {
       })
     })
 
+    it('suggests dev dependency from README --dev flag hints', () => {
+      const readmeHtml = '<p><code>yarn add --dev some-tool</code></p>'
+
+      expect(getDevDependencySuggestion('some-tool', readmeHtml)).toEqual({
+        recommended: true,
+        reason: 'readme-hint',
+      })
+    })
+
     it('does not suggest dev dependency for runtime packages without hints', () => {
       expect(getDevDependencySuggestion('react')).toEqual({
         recommended: false,

From 477964228938bfab9b7f2a1f4e4c4ceb79cb7c99 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Sun, 8 Feb 2026 01:11:56 +0100
Subject: [PATCH 4/5] Calculate suggestion server side

---
 app/components/Terminal/Install.vue           |   7 +-
 app/composables/usePackageAnalysis.ts         |   2 +
 app/pages/package/[[org]]/[name].vue          |   2 +-
 app/utils/install-command.ts                  | 105 -----------------
 server/api/registry/analysis/[...pkg].get.ts  |   9 +-
 shared/utils/dev-dependency.ts                | 110 ++++++++++++++++++
 shared/utils/package-analysis.ts              |   2 +
 test/unit/app/utils/install-command.spec.ts   |  50 --------
 test/unit/shared/utils/dev-dependency.spec.ts |  60 ++++++++++
 9 files changed, 187 insertions(+), 160 deletions(-)
 create mode 100644 shared/utils/dev-dependency.ts
 create mode 100644 test/unit/shared/utils/dev-dependency.spec.ts

diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index 2a30f03e9..d0f1c7863 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { JsrPackageInfo } from '#shared/types/jsr'
+import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 import type { PackageManagerId } from '~/utils/install-command'
 
 const props = defineProps<{
@@ -7,7 +8,7 @@ const props = defineProps<{
   requestedVersion?: string | null
   installVersionOverride?: string | null
   jsrInfo?: JsrPackageInfo | null
-  readmeHtml?: string | null
+  devDependencySuggestion?: DevDependencySuggestion | null
   typesPackageName?: string | null
   executableInfo?: { hasExecutable: boolean; primaryCommand?: string } | null
   createPackageInfo?: { packageName: string } | null
@@ -31,8 +32,8 @@ function getInstallPartsForPM(pmId: PackageManagerId) {
   })
 }
 
-const devDependencySuggestion = computed(() =>
-  getDevDependencySuggestion(props.packageName, props.readmeHtml),
+const devDependencySuggestion = computed(
+  () => props.devDependencySuggestion ?? { recommended: false as const },
 )
 
 function getDevInstallPartsForPM(pmId: PackageManagerId) {
diff --git a/app/composables/usePackageAnalysis.ts b/app/composables/usePackageAnalysis.ts
index 334e38446..2e083a1b8 100644
--- a/app/composables/usePackageAnalysis.ts
+++ b/app/composables/usePackageAnalysis.ts
@@ -1,10 +1,12 @@
 import type { ModuleFormat, TypesStatus, CreatePackageInfo } from '#shared/utils/package-analysis'
+import type { DevDependencySuggestion } from '#shared/utils/dev-dependency'
 
 export interface PackageAnalysisResponse {
   package: string
   version: string
   moduleFormat: ModuleFormat
   types: TypesStatus
+  devDependencySuggestion: DevDependencySuggestion
   engines?: {
     node?: string
     npm?: string
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 7eecfa97b..c18d19937 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1234,7 +1234,7 @@ const showSkeleton = shallowRef(false)
             :requested-version="requestedVersion"
             :install-version-override="installVersionOverride"
             :jsr-info="jsrInfo"
-            :readme-html="readmeData?.html"
+            :dev-dependency-suggestion="packageAnalysis?.devDependencySuggestion"
             :types-package-name="typesPackageName"
             :executable-info="executableInfo"
             :create-package-info="createPackageInfo"
diff --git a/app/utils/install-command.ts b/app/utils/install-command.ts
index 8b1b5cf48..857804caf 100644
--- a/app/utils/install-command.ts
+++ b/app/utils/install-command.ts
@@ -71,111 +71,6 @@ export interface InstallCommandOptions {
   dev?: boolean
 }
 
-export type DevDependencySuggestionReason = 'known-package' | 'readme-hint'
-
-export interface DevDependencySuggestion {
-  recommended: boolean
-  reason?: DevDependencySuggestionReason
-}
-
-const KNOWN_DEV_DEPENDENCY_PACKAGES = new Set<string>([
-  'biome',
-  'chai',
-  'eslint',
-  'esbuild',
-  'husky',
-  'jest',
-  'lint-staged',
-  'mocha',
-  'oxc',
-  'oxfmt',
-  'oxlint',
-  'playwright',
-  'prettier',
-  'rolldown',
-  'rollup',
-  'stylelint',
-  'ts-jest',
-  'ts-node',
-  'tsx',
-  'turbo',
-  'typescript',
-  'vite',
-  'vitest',
-  'webpack',
-])
-
-function isKnownDevDependencyPackage(packageName: string): boolean {
-  const normalized = packageName.toLowerCase()
-  if (normalized.startsWith('@types/')) {
-    return true
-  }
-  // Match scoped packages by name segment, e.g. @scope/eslint-config
-  const namePart = normalized.includes('/') ? normalized.split('/').pop() : normalized
-  if (!namePart) return false
-
-  return (
-    KNOWN_DEV_DEPENDENCY_PACKAGES.has(normalized) ||
-    KNOWN_DEV_DEPENDENCY_PACKAGES.has(namePart) ||
-    normalized.startsWith('@typescript-eslint/') ||
-    namePart.startsWith('eslint-') ||
-    namePart.startsWith('prettier-') ||
-    namePart.startsWith('vite-') ||
-    namePart.startsWith('webpack-') ||
-    namePart.startsWith('babel-')
-  )
-}
-
-function escapeRegExp(text: string): string {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-function hasReadmeDevInstallHint(packageName: string, readmeHtml?: string | null): boolean {
-  if (!readmeHtml) return false
-
-  const escapedName = escapeRegExp(packageName)
-  const escapedNpmName = escapeRegExp(`npm:${packageName}`)
-  const packageSpec = `(?:${escapedName}|${escapedNpmName})(?:@[\\w.-]+)?`
-
-  const patterns = [
-    // npm install -D pkg / pnpm add --save-dev pkg
-    new RegExp(
-      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+(?:--save-dev|--dev|-d)\s+${packageSpec}`,
-      'i',
-    ),
-    // npm install pkg --save-dev / pnpm add pkg -D
-    new RegExp(
-      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+${packageSpec}\s+(?:--save-dev|--dev|-d)`,
-      'i',
-    ),
-    // deno add -D npm:pkg
-    new RegExp(String.raw`deno\s+add\s+(?:--dev|-d)\s+${packageSpec}`, 'i'),
-  ]
-
-  return patterns.some(pattern => pattern.test(readmeHtml))
-}
-
-export function getDevDependencySuggestion(
-  packageName: string,
-  readmeHtml?: string | null,
-): DevDependencySuggestion {
-  if (isKnownDevDependencyPackage(packageName)) {
-    return {
-      recommended: true,
-      reason: 'known-package',
-    }
-  }
-
-  if (hasReadmeDevInstallHint(packageName, readmeHtml)) {
-    return {
-      recommended: true,
-      reason: 'readme-hint',
-    }
-  }
-
-  return { recommended: false }
-}
-
 export function getDevDependencyFlag(packageManager: PackageManagerId): '-D' | '-d' {
   return packageManager === 'bun' ? '-d' : '-D'
 }
diff --git a/server/api/registry/analysis/[...pkg].get.ts b/server/api/registry/analysis/[...pkg].get.ts
index a397f4cb6..fac5c3791 100644
--- a/server/api/registry/analysis/[...pkg].get.ts
+++ b/server/api/registry/analysis/[...pkg].get.ts
@@ -12,6 +12,10 @@ import {
   getCreatePackageName,
   hasBuiltInTypes,
 } from '#shared/utils/package-analysis'
+import {
+  getDevDependencySuggestion,
+  type DevDependencySuggestion,
+} from '#shared/utils/dev-dependency'
 import {
   NPM_REGISTRY,
   CACHE_MAX_AGE_ONE_DAY,
@@ -54,10 +58,12 @@ export default defineCachedEventHandler(
       const createPackage = await findAssociatedCreatePackage(packageName, pkg)
 
       const analysis = analyzePackage(pkg, { typesPackage, createPackage })
+      const devDependencySuggestion = getDevDependencySuggestion(packageName, pkg.readme)
 
       return {
         package: packageName,
         version: pkg.version ?? version ?? 'latest',
+        devDependencySuggestion,
         ...analysis,
       } satisfies PackageAnalysisResponse
     } catch (error: unknown) {
@@ -72,7 +78,7 @@ export default defineCachedEventHandler(
     swr: true,
     getKey: event => {
       const pkg = getRouterParam(event, 'pkg') ?? ''
-      return `analysis:v1:${pkg.replace(/\/+$/, '').trim()}`
+      return `analysis:v2:${pkg.replace(/\/+$/, '').trim()}`
     },
   },
 )
@@ -209,4 +215,5 @@ function hasSameRepositoryOwner(
 export interface PackageAnalysisResponse extends PackageAnalysis {
   package: string
   version: string
+  devDependencySuggestion: DevDependencySuggestion
 }
diff --git a/shared/utils/dev-dependency.ts b/shared/utils/dev-dependency.ts
new file mode 100644
index 000000000..f45449ba5
--- /dev/null
+++ b/shared/utils/dev-dependency.ts
@@ -0,0 +1,110 @@
+export type DevDependencySuggestionReason = 'known-package' | 'readme-hint'
+
+export interface DevDependencySuggestion {
+  recommended: boolean
+  reason?: DevDependencySuggestionReason
+}
+
+const KNOWN_DEV_DEPENDENCY_PACKAGES = new Set<string>([
+  'biome',
+  'chai',
+  'eslint',
+  'esbuild',
+  'husky',
+  'jest',
+  'lint-staged',
+  'mocha',
+  'oxc',
+  'oxfmt',
+  'oxlint',
+  'playwright',
+  'prettier',
+  'rolldown',
+  'rollup',
+  'stylelint',
+  'ts-jest',
+  'ts-node',
+  'tsx',
+  'turbo',
+  'typescript',
+  'vite',
+  'vitest',
+  'webpack',
+])
+
+const KNOWN_DEV_DEPENDENCY_PACKAGE_PREFIXES = [
+  '@typescript-eslint/',
+  'eslint-',
+  'prettier-',
+  'vite-',
+  'webpack-',
+  'babel-',
+]
+
+function isKnownDevDependencyPackage(packageName: string): boolean {
+  const normalized = packageName.toLowerCase()
+  if (normalized.startsWith('@types/')) {
+    return true
+  }
+  // Match scoped packages by name segment, e.g. @scope/eslint-config
+  const namePart = normalized.includes('/') ? normalized.split('/').pop() : normalized
+  if (!namePart) return false
+
+  return (
+    KNOWN_DEV_DEPENDENCY_PACKAGES.has(normalized) ||
+    KNOWN_DEV_DEPENDENCY_PACKAGES.has(namePart) ||
+    KNOWN_DEV_DEPENDENCY_PACKAGE_PREFIXES.some(prefix =>
+      prefix.startsWith('@') ? normalized.startsWith(prefix) : namePart.startsWith(prefix),
+    )
+  )
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function hasReadmeDevInstallHint(packageName: string, readmeContent?: string | null): boolean {
+  if (!readmeContent) return false
+
+  const escapedName = escapeRegExp(packageName)
+  const escapedNpmName = escapeRegExp(`npm:${packageName}`)
+  const packageSpec = `(?:${escapedName}|${escapedNpmName})(?:@[\\w.-]+)?`
+
+  const patterns = [
+    // npm install -D pkg / pnpm add --save-dev pkg
+    new RegExp(
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+(?:--save-dev|--dev|-d)\s+${packageSpec}`,
+      'i',
+    ),
+    // npm install pkg --save-dev / pnpm add pkg -D
+    new RegExp(
+      String.raw`(?:npm|pnpm|yarn|bun|vlt)\s+(?:install|add|i)\s+${packageSpec}\s+(?:--save-dev|--dev|-d)`,
+      'i',
+    ),
+    // deno add -D npm:pkg
+    new RegExp(String.raw`deno\s+add\s+(?:--dev|-D)\s+${packageSpec}`, 'i'),
+  ]
+
+  return patterns.some(pattern => pattern.test(readmeContent))
+}
+
+export function getDevDependencySuggestion(
+  packageName: string,
+  readmeContent?: string | null,
+): DevDependencySuggestion {
+  if (isKnownDevDependencyPackage(packageName)) {
+    return {
+      recommended: true,
+      reason: 'known-package',
+    }
+  }
+
+  if (hasReadmeDevInstallHint(packageName, readmeContent)) {
+    return {
+      recommended: true,
+      reason: 'readme-hint',
+    }
+  }
+
+  return { recommended: false }
+}
diff --git a/shared/utils/package-analysis.ts b/shared/utils/package-analysis.ts
index 864038bca..312739020 100644
--- a/shared/utils/package-analysis.ts
+++ b/shared/utils/package-analysis.ts
@@ -34,6 +34,8 @@ export interface ExtendedPackageJson {
   dependencies?: Record<string, string>
   devDependencies?: Record<string, string>
   peerDependencies?: Record<string, string>
+  readme?: string
+  readmeFilename?: string
   /** npm maintainers (returned by registry API) */
   maintainers?: Array<{ name: string; email?: string }>
   /** Repository info (returned by registry API) */
diff --git a/test/unit/app/utils/install-command.spec.ts b/test/unit/app/utils/install-command.spec.ts
index 1e283a8d5..fb35bb94d 100644
--- a/test/unit/app/utils/install-command.spec.ts
+++ b/test/unit/app/utils/install-command.spec.ts
@@ -5,7 +5,6 @@ import {
   getPackageSpecifier,
   getExecuteCommand,
   getExecuteCommandParts,
-  getDevDependencySuggestion,
   getDevDependencyFlag,
 } from '../../../../app/utils/install-command'
 import type { JsrPackageInfo } from '../../../../shared/types/jsr'
@@ -285,55 +284,6 @@ describe('install command generation', () => {
     })
   })
 
-  describe('dev dependency suggestion heuristic', () => {
-    it('suggests dev dependency for known tooling packages', () => {
-      expect(getDevDependencySuggestion('eslint')).toEqual({
-        recommended: true,
-        reason: 'known-package',
-      })
-      expect(getDevDependencySuggestion('@types/node')).toEqual({
-        recommended: true,
-        reason: 'known-package',
-      })
-      expect(getDevDependencySuggestion('@typescript-eslint/parser')).toEqual({
-        recommended: true,
-        reason: 'known-package',
-      })
-    })
-
-    it('suggests dev dependency from README install command hints', () => {
-      const readmeHtml = '<p>Install with <code>npm install --save-dev some-tool</code></p>'
-
-      expect(getDevDependencySuggestion('some-tool', readmeHtml)).toEqual({
-        recommended: true,
-        reason: 'readme-hint',
-      })
-    })
-
-    it('suggests dev dependency from README --dev flag hints', () => {
-      const readmeHtml = '<p><code>yarn add --dev some-tool</code></p>'
-
-      expect(getDevDependencySuggestion('some-tool', readmeHtml)).toEqual({
-        recommended: true,
-        reason: 'readme-hint',
-      })
-    })
-
-    it('does not suggest dev dependency for runtime packages without hints', () => {
-      expect(getDevDependencySuggestion('react')).toEqual({
-        recommended: false,
-      })
-    })
-
-    it('does not suggest dev dependency when README hint targets a different package', () => {
-      const readmeHtml = '<p>Install with <code>yarn add -D bar</code></p>'
-
-      expect(getDevDependencySuggestion('foo', readmeHtml)).toEqual({
-        recommended: false,
-      })
-    })
-  })
-
   describe('getDevDependencyFlag', () => {
     it('returns lowercase flag only for bun', () => {
       expect(getDevDependencyFlag('bun')).toBe('-d')
diff --git a/test/unit/shared/utils/dev-dependency.spec.ts b/test/unit/shared/utils/dev-dependency.spec.ts
new file mode 100644
index 000000000..b59d8e8dd
--- /dev/null
+++ b/test/unit/shared/utils/dev-dependency.spec.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+import { getDevDependencySuggestion } from '../../../../shared/utils/dev-dependency'
+
+describe('getDevDependencySuggestion', () => {
+  it('suggests dev dependency for known tooling packages', () => {
+    expect(getDevDependencySuggestion('eslint')).toEqual({
+      recommended: true,
+      reason: 'known-package',
+    })
+    expect(getDevDependencySuggestion('@types/node')).toEqual({
+      recommended: true,
+      reason: 'known-package',
+    })
+    expect(getDevDependencySuggestion('@typescript-eslint/parser')).toEqual({
+      recommended: true,
+      reason: 'known-package',
+    })
+  })
+
+  it('suggests dev dependency from README install command hints', () => {
+    const readme = '<p>Install with <code>npm install --save-dev some-tool</code></p>'
+
+    expect(getDevDependencySuggestion('some-tool', readme)).toEqual({
+      recommended: true,
+      reason: 'readme-hint',
+    })
+  })
+
+  it('suggests dev dependency from README --dev flag hints', () => {
+    const readme = '<p><code>yarn add --dev some-tool</code></p>'
+
+    expect(getDevDependencySuggestion('some-tool', readme)).toEqual({
+      recommended: true,
+      reason: 'readme-hint',
+    })
+  })
+
+  it('suggests dev dependency from README deno -D hints', () => {
+    const readme = '<p><code>deno add -D npm:some-tool</code></p>'
+
+    expect(getDevDependencySuggestion('some-tool', readme)).toEqual({
+      recommended: true,
+      reason: 'readme-hint',
+    })
+  })
+
+  it('does not suggest dev dependency for runtime packages without hints', () => {
+    expect(getDevDependencySuggestion('react')).toEqual({
+      recommended: false,
+    })
+  })
+
+  it('does not suggest when README hint targets a different package', () => {
+    const readme = '<p>Install with <code>yarn add -D bar</code></p>'
+
+    expect(getDevDependencySuggestion('foo', readme)).toEqual({
+      recommended: false,
+    })
+  })
+})

From 45afe152b81500b3be74f58439741b3ddf19bde0 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Thu, 12 Feb 2026 15:51:19 +0100
Subject: [PATCH 5/5] CR fixes

---
 app/components/Terminal/Install.vue          | 7 ++++---
 i18n/schema.json                             | 6 ++++++
 server/api/registry/analysis/[...pkg].get.ts | 6 +++++-
 shared/utils/package-analysis.ts             | 2 --
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
index d0f1c7863..4b1687284 100644
--- a/app/components/Terminal/Install.vue
+++ b/app/components/Terminal/Install.vue
@@ -183,16 +183,17 @@ const copyDevInstallCommand = () =>
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <button
+            <ButtonBase
               type="button"
-              class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/devinstallcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
+              size="small"
+              class="text-fg-muted bg-bg-subtle/80 border-border opacity-0 group-hover/devinstallcmd:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
               @click.stop="copyDevInstallCommand"
             >
               <span aria-live="polite">{{
                 devInstallCopied ? $t('common.copied') : $t('common.copy')
               }}</span>
-            </button>
+            </ButtonBase>
           </div>
         </template>
 
diff --git a/i18n/schema.json b/i18n/schema.json
index 4827d567e..1f13de804 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -667,6 +667,12 @@
             "copy_command": {
               "type": "string"
             },
+            "copy_dev_command": {
+              "type": "string"
+            },
+            "dev_dependency_hint": {
+              "type": "string"
+            },
             "view_types": {
               "type": "string"
             }
diff --git a/server/api/registry/analysis/[...pkg].get.ts b/server/api/registry/analysis/[...pkg].get.ts
index fac5c3791..7ab47dcb6 100644
--- a/server/api/registry/analysis/[...pkg].get.ts
+++ b/server/api/registry/analysis/[...pkg].get.ts
@@ -25,6 +25,10 @@ import { parseRepoUrl } from '#shared/utils/git-providers'
 import { encodePackageName } from '#shared/utils/npm'
 import { getLatestVersion, getLatestVersionBatch } from 'fast-npm-meta'
 
+interface AnalysisPackageJson extends ExtendedPackageJson {
+  readme?: string
+}
+
 export default defineCachedEventHandler(
   async event => {
     // Parse package name and optional version from path
@@ -42,7 +46,7 @@ export default defineCachedEventHandler(
       // Fetch package data
       const encodedName = encodePackageName(packageName)
       const versionSuffix = version ? `/${version}` : '/latest'
-      const pkg = await $fetch<ExtendedPackageJson>(
+      const pkg = await $fetch<AnalysisPackageJson>(
         `${NPM_REGISTRY}/${encodedName}${versionSuffix}`,
       )
 
diff --git a/shared/utils/package-analysis.ts b/shared/utils/package-analysis.ts
index 312739020..864038bca 100644
--- a/shared/utils/package-analysis.ts
+++ b/shared/utils/package-analysis.ts
@@ -34,8 +34,6 @@ export interface ExtendedPackageJson {
   dependencies?: Record<string, string>
   devDependencies?: Record<string, string>
   peerDependencies?: Record<string, string>
-  readme?: string
-  readmeFilename?: string
   /** npm maintainers (returned by registry API) */
   maintainers?: Array<{ name: string; email?: string }>
   /** Repository info (returned by registry API) */