updated docs to be consistant and added images, add-commmands.md still need mark down and form images

Author: chatasweetie

hub/images/command-palette/ListPage.png

@@ -11,11 +11,14 @@ no-loc: [PowerToys, Windows, Insider]
 
 **Previous**: [Update a list of commands](update-a-list-of-commands.md).
 
-So far, you've only added commands to a single page within your extension. You can also add more commands directly to the top-level list of commands too. 
+So far, you've only added commands to a single page within your extension. You can also add more commands directly to the top-level list of commands too.
 
-## Adding the top-level commands
 
-To do that, head on over to the `<ExtensionName>CommandsProvider.cs` file. This file is where you'll add commands that should be shown at the top-level of the Command Palette. As you can see, there's currently only a single item there:
+## Top-level commands
+
+To add commands at the top level of the Command Palette, open the `<ExtensionName>CommandsProvider.cs` file. This is where you define the commands that will appear at the root level of the Command Palette.
+
+Currently, the file contains only one command:
 
 ```csharp
 public <ExtensionName>CommandsProvider()
@@ -33,24 +36,38 @@ public override ICommandItem[] TopLevelCommands()
 }
 ```
 
-This sample extension creates a list of commands when the extension is created and returns that list whenever it's asked for the top-level commands. This prevents the extension from re-creating the list of commands every time the top-level commands are requested. This is a performance optimization.
+When the extension is created, it builds a list of commands and stores them in the `_commands` field. Every time the extension is asked for its top-level commands, it simply returns this prebuilt list. This approach avoids recreating the command list on each request, which improves performance.
 
-If you want to add another command to the top-level list of commands, you can add another **CommandItem**:
+## Add another top level command
 
-```csharp
+1. In Visual Studio, open `<ExtensionName>CommandsProvider.cs`
+1. Add another `CommandItem`:
+
+```diff
 public <ExtensionName>CommandsProvider()
 {
     DisplayName = "My sample extension";
     Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
     _commands = [
         new CommandItem(new <ExtensionName>Page()) { Title = DisplayName },
-        new CommandItem(new ShowMessageCommand()) { Title = "Send a message" },
++       new CommandItem(new ShowMessageCommand()) { Title = "Send a message" },
     ];
 }
 ```
 
+> [!NOTE]
+> `ShowMessageCommand()` section was created prior at [InvokableCommand Command](adding-commands#invokableCommand-command)
+
+1. Deploy your extension
+1. In command palette, `Reload`
+
+![Screenshot of extension with send message command at top level](../../images/command-palette/top-level-command.png)
+
 There you have it. Now you can add additional top-level commands to your extension.
 
+
+
+
 If you'd like to update the list of top-level commands dynamically, you can do so in the same way as you would update a list page. This can be useful for cases like an extension that might first require the user to log in, before showing certain commands. In that case, you can show the "log in" command at the top level initially. Then, once the user logs in successfully, you can update the list of top-level commands to include the commands that required authentication.
 
 Once you've determined that you need to change the top level list, call [RaiseItemsChanged](./microsoft-commandpalette-extensions-toolkit/commandprovider_raiseitemschanged.md) on your **CommandProvider**. Command Palette will then request the top-level commands via **TopLevelCommands** again, and you can return the updated list.

hub/images/command-palette/top-level-command.png

@@ -17,7 +17,7 @@ Now that you've created your extension, it's time to add some commands to it.
 
 We can start by navigating to the `<ExtensionName>Page.cs` file. This file is the [ListPage](./microsoft-commandpalette-extensions-toolkit/listpage.md) that will be displayed when the user selects your extension. In there you should see:
 
-```csharp   
+```csharp
 public <ExtensionName>Page()
 {
     Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
@@ -32,9 +32,9 @@ public override IListItem[] GetItems()
 }
 ```
 
-Here you can see that we've set the icon for the page, the title, and the name that's shown at the top-level when you have the command selected. The **GetItems** method is where you'll return the list of commands that you want to show on this page. Right now, that's just returning a single command that does nothing. Let's instead try making that command open _this_ page in the user's default web browser.
+Here you can see that we've set the icon for the page, the title, and the name that's shown at the top-level when you have the command selected. The `GetItems` method is where you'll return the list of commands that you want to show on this page. Right now, that's just returning a single command that does nothing. Let's instead try making that command open _this_ page in the user's default web browser.
 
-We can change the implementation of **GetItems** to the following:
+1. Update `GetItems` to the following:
 
 ```csharp
 public override IListItem[] GetItems()
@@ -51,17 +51,17 @@ public override IListItem[] GetItems()
 
 To update the extension in the Command Palette you need to:
 
-1. Deploy your app
+1. Deploy your extension
 1. In the Command Palette, type the "reload" command to refresh the extensions in the palette
 
 ![Screenshot of reload](../../images/command-palette/reload.png)
 
 > [!NOTE]
 > There are several reload options, make sure to select the **Reload Command Palette extensions**
 
-1. Scroll down to your extension and press `enter`
+1. Scroll down to your extension and press `Enter`
 1. Press `enter` on `Open the Command Palette documentation`
-1. You should see that the command now opens the Command Palette documentation
+1. You should see that the command opens the Command Palette documentation
 
 The **OpenUrlCommand** is a helper for opening a URL in the user's default web browser.
 
@@ -87,7 +87,7 @@ As your building your extension, you'll most likely want to debug it.
     }
 ```
 
-1. Deploy your app, wait until it's successful
+1. Deploy your extension, wait until it's successful
 1. Confirm You're in Debug Configuration
 
 <details>
@@ -106,13 +106,22 @@ As your building your extension, you'll most likely want to debug it.
 
 ![Screenshot of reload](../../images/command-palette/output.png)
 
-1. In the Command Palette, `reload`
+1. In the Command Palette, run `reload`
 1. Go to your extension and select `Open the Command Palette documentation`.
-1. In Visual Studio's output window, you should see `Debug message from GetItems`
+1. In Visual Studio's Output window, you should see `Debug message from GetItems`
 
 ## InvokableCommand Command
 
-You can also implement an extension however you want. Let's instead make a new command, that shows a **MessageBox**. To do that, we need to create a new class that implements **IInvokableCommand**.
+Let's continue building a new command, that shows a **MessageBox**. To do that, we need to create a new class that implements `InvokableCommand`.
+
+1. In Visual Studio, Add a New Class File
+    - Keyboard Shortcut: Press Ctrl + Shift + A
+    - Or in the Solution Explorer, go to Project > Add New Item...
+1. In the Add New Item dialog:
+    1. Select Class from the list.
+    1. Name your class file: `ShowMessageCommand.cs`
+    1. Click Add.
+1. Replace the default class code with:
 
 ```csharp
 using System.Runtime.InteropServices;
@@ -139,6 +148,8 @@ internal sealed partial class ShowMessageCommand : InvokableCommand
 
 Now we can add this command to the list of commands in the `<ExtensionName>Page.cs` file:
 
+1. In the `<ExtensionName>.cs`, update the `GetItems`:
+
 ```csharp
 public override IListItem[] GetItems()
 {
@@ -154,29 +165,46 @@ public override IListItem[] GetItems()
 }
 ```
 
-Deploy and reload, and presto - a command to show a message box!
+1. Deploy your extension
+1. In command palette, `Reload`
+
+And presto - a command to show a message box!
 
 > [!TIP]
 > At about this point, you'll probably want to initialize a git repo / {other source control method of your choice} for your project. This will make it easier to track changes, and to share your extension with others.
 > 
 > We recommend using GitHub, as it's easy to collaborate on your extension with others, and get feedback, and share it with the world.
 
-## Adding more pages
+## Types of Pages
 
 So far, we've only worked with commands that "do something". However, you can also add commands that show additional pages within the Command Palette. There are basically two types of "Commands" in the Palette:
-- **IInvokableCommand** - These are commands that *do something*.
-- **IPage** - These are commands that *show something*.
 
-Because **IPage** implementations are **ICommand**'s, you can use them anywhere you can use commands. This means you can add them to the top-level list of commands, or to a list of commands on a page, the context menu on an item, etc. 
+- `InvokableCommand` - These are commands that **do something**
+- `IPage` - These are commands that **show something**
+
+Because `IPage` implementations are **ICommand**'s, you can use them anywhere you can use commands. This means you can add them to the top-level list of commands, or to a list of commands on a page, the context menu on an item, etc.
 
 There are two different kinds of pages you can show:
+
 - [ListPage](./microsoft-commandpalette-extensions-toolkit/listpage.md) - This is a page that shows a list of commands. This is what we've been working with so far.
+
+![Screenshot of ListPage](../../images/command-palette/ListPage.png)
+
 - [ContentPage](./microsoft-commandpalette-extensions-toolkit/contentpage.md) - This is a page that shows rich content to the user. This allows you to specify abstract content, and let Command Palette worry about rendering the content in a native experience. There are two different types of content supported so far:
   - [Markdown content](./using-markdown-content.md) - This is content that's written in Markdown, and is rendered in the Command Palette. See [MarkdownContent](./microsoft-commandpalette-extensions-toolkit/markdowncontent.md) for details.
+
+![Screenshot of Markdown content](../../images/command-palette/reload.png)
+
   - [Form content](./using-form-pages.md) - This is content that shows a form to the user, and then returns the results of that form to the extension. These are powered by [Adaptive Cards](https://aka.ms/adaptive-cards) This is useful for getting user input, or displaying more complex layouts of information. See [FormContent](./microsoft-commandpalette-extensions-toolkit/formcontent.md) for details.
 
+![Screenshot of Form content](../../images/command-palette/reload.png)
 
-Start by adding a new page that shows a list of commands. Create a new class that implements **ListPage**:
+## Add more commands
+
+Start by adding a new page that shows a list of commands. Create a new class that implements **ListPage**.
+
+1. In the `Pages` folder, create a new class called `MySecondPage`
+1. Update the code to:
 
 ```csharp
 using Microsoft.CommandPalette.Extensions.Toolkit;
@@ -206,7 +234,7 @@ internal sealed partial class MySecondPage : ListPage
 }
 ```
 
-Next, update the `<ExtensionName>Page.cs` to include this new page:
+1.Update the `<ExtensionName>Page.cs` to include this new page:
 
 ```diff
     public override IListItem[] GetItems()
@@ -218,12 +246,15 @@ Next, update the `<ExtensionName>Page.cs` to include this new page:
                 Title = "Open the Command Palette documentation",
             },
             new ListItem(new ShowMessageCommand()),
-+            new ListItem(new MySecondPage()) { Title = "My second page", Subtitle = "A second page of commands" },
++           new ListItem(new MySecondPage()) { Title = "My second page", Subtitle = "A second page of commands" },
         ];
     }
 ```
 
-Deploy, reload, and you should now see a new page in your extension that shows 100 commands that copy a number to the clipboard.
+1. Deploy your extension
+1. In command palette, `Reload`
+
+You should now see a new page in your extension that shows 100 commands that copy a number to the clipboard.
 
 ### Next up: [Update a list of commands](update-a-list-of-commands.md)
 

hub/images/command-palette/update-page-title.png

@@ -9,16 +9,20 @@ no-loc: [PowerToys, Windows, Insider]
 
 # Creating an extension
 
-Extensions are written in C#. The fastest way to get started writing extensions is from the Command Palette itself. Just run the "Create a new extension" command, fill out the fields to populate the template project, and you should be ready to start.
+Extensions are written in C#. The fastest way to get started writing extensions is from the Command Palette itself.
+
+1. Open Command Palette
+1. Run the `Create a new extension` command
+1. Fill out the fields to populate the template project, and you should be ready to start.
 
 ## Create a new extension
 
 The form will ask you for the following information:
 
 - **ExtensionName**: The name of your extension. This will be used as the name of the project and the name of the class that implements your commands. Make sure it's a valid C# class name - it shouldn't have any spaces or special characters, and should start with a capital letter. Reference in docs as `<ExtensionName>`.
-- **Extension Display Name**: The name of your extension as it will appear in the Command Palette. This can be a more human-readable name. 
-- **Output Path**: The folder where the project will be created. 
-  - The project will be created in a subdirectory of the path you provided. 
+- **Extension Display Name**: The name of your extension as it will appear in the Command Palette. This can be a more human-readable name.
+- **Output Path**: The folder where the project will be created.
+  - The project will be created in a subdirectory of the path you provided.
   - If this path doesn't exist, it will be created for you.
 
 ![The "Create a new extension" page of the Windows Command Palette](../../images/command-palette/create-extension-page.png)
@@ -51,7 +55,18 @@ Once you submit the form, Command Palette will automatically generate the projec
 
 (with `<ExtensionName>` replaced with the name you provided)
 
-From here, you can immediately build the project and run it. Once your package is deployed and running, Command Palette will automatically discover your extension and load it into the palette.
+You can deploy and run your extension:
+
+- In Visual Studio, Deploy your extension
+<details>
+  <summary>How to Deploy your extension</summary>
+
+1. In the navigation bar, click on `Build`
+1. Click on `Deploy <ExtensionName>`
+
+</details>
+
+Once your package is deployed and running, Command Palette will automatically discover your extension and load it into the palette.
 
 > [!TIP]
 > Make sure you _deploy_ your app! Just **build**ing your application won't update the package in the same way that deploying it will.
@@ -66,7 +81,9 @@ From here, you can immediately build the project and run it. Once your package i
 > ```
 > These files are used by WinAppSdk to deploy your app as a package. Without it, anyone who clones your repo won't be able to deploy your extension.
 
-You should be able to see your extension in the Command Palette at the end of the list of commands. Entering that command should take you to the page for your command, and you should see a single command that says `TODO: Implement your extension here`.
+1. In the Command Palette, scroll down the list of commands
+1. Press `Enter` on your <ExtensionName>
+1. You should see a single command that says `TODO: Implement your extension here`.
 
 ![A screenshot of the empty extension template, running in the command palette](../../images/command-palette/initial-created-extension-list.png)
 
@@ -76,7 +93,6 @@ When you make changes to your extension, you can rebuild your project and deploy
 
 ![Screenshot of reload](../../images/command-palette/reload.png)
 
-
 ### Next up: [Add commands to your extension](adding-commands.md)
 
 ## Related content