docs: move plugin naming (#3874)

* docs: move naming plugin section to the beginning of the guide

* docs: added a link to npm

* Update docs/dev-guide/plugin-dev.md

Co-Authored-By: NataliaTepluhina <NataliaTepluhina@users.noreply.github.com>

* docs: add a warning in plugin naming section

Author: NataliaTepluhina

docs/dev-guide/plugin-dev.md

@@ -34,6 +34,44 @@ So, typical CLI plugin folder structure looks like the following:
 └── ui.js         # Vue UI integration (optional)
 ```
 
+## Naming and discoverability
+
+For a CLI plugin to be usable in a Vue CLI project, it must follow the name convention `vue-cli-plugin-<name>` or `@scope/vue-cli-plugin-<name>`. It allows your plugin to be:
+
+- Discoverable by `@vue/cli-service`;
+- Discoverable by other developers via searching;
+- Installable via `vue add <name>` or `vue invoke <name>`.
+
+:::warning Warning
+Make sure to name the plugin correctly, otherwise it will be impossible to install it via `vue add` command or find it with Vue UI plugins search!
+:::
+
+For better discoverability when a user searches for your plugin, put keywords describing your plugin in the `description` field of the plugin `package.json` file.
+
+Example:
+
+```json
+{
+  "name": "vue-cli-plugin-apollo",
+  "version": "0.7.7",
+  "description": "vue-cli plugin to add Apollo and GraphQL"
+}
+```
+
+You should add the url to the plugin website or repository in the `homepage` or `repository` field so that a 'More info' button will be displayed in your plugin description:
+
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Akryum/vue-cli-plugin-apollo.git"
+  },
+  "homepage": "https://github.com/Akryum/vue-cli-plugin-apollo#readme"
+}
+```
+
+![Plugin search item](/plugin-search-item.png)
+
 ## Generator
 
 A Generator part of the CLI plugin is usually needed when you want to extend your package with new dependencies, create new files in your project or edit existing ones.
@@ -766,41 +804,6 @@ You can put a `logo.png` file in the root directory of the folder that will be p
 
 The logo should be a square non-transparent image (ideally 84x84).
 
-### Discoverability
-
-For a CLI plugin to be usable by other developers, it must be published on npm following the name convention `vue-cli-plugin-<name>` or `@scope/vue-cli-plugin-<name>`. Following the name convention allows your plugin to be:
-
-- Discoverable by `@vue/cli-service`;
-- Discoverable by other developers via searching;
-- Installable via `vue add <name>` or `vue invoke <name>`.
-
-For better discoverability when a user searches for your plugin, put keywords describing your plugin in the `description` field of the plugin `package.json` file.
-
-Example:
-
-```json
-{
-  "name": "vue-cli-plugin-apollo",
-  "version": "0.7.7",
-  "description": "vue-cli plugin to add Apollo and GraphQL"
-}
-```
-
-You should add the url to the plugin website or repository in the `homepage` or `repository` field so that a 'More info' button will be displayed in your plugin description:
-
-```json
-{
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Akryum/vue-cli-plugin-apollo.git"
-  },
-  "homepage": "https://github.com/Akryum/vue-cli-plugin-apollo#readme"
-}
-```
-
-![Plugin search item](/plugin-search-item.png)
-
-
 ## Publish Plugin to npm
 
 To publish your plugin, you need to be registered an [npmjs.com](npmjs.com) and you should have `npm` installed globally. If it's your first npm module, please run