### Install Blazing Story Project Template

Source: https://github.com/jsakamoto/blazingstory/blob/main/README.md

Installs the Blazing Story project templates globally. This is a one-time setup step.

```shell
dotnet new install BlazingStory.ProjectTemplates
```

--------------------------------

### JSON Object Example

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/SampleOfMarkdown.md

A sample JSON object demonstrating various data types.

```json
{
  "string": "string",
  "number": 123,
  "boolean": true,
  "array": [1, 2, 3],
  "object": {
    "key": "value"
  },
  "null": null
}
```

--------------------------------

### Install AI Agent Skills

Source: https://github.com/jsakamoto/blazingstory/blob/main/README.md

Installs AI agent skills for Blazing Story using the GitHub CLI. Use `blazing-story-story` to generate `.stories.razor` files and `blazing-story-addon` to scaffold custom addons.

```shell
gh skill install BlazingStory/agent-skills blazing-story-story
gh skill install BlazingStory/agent-skills blazing-story-addon
```

--------------------------------

### Example Layout Component Structure

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

A basic structure for a Blazor layout component that can be used with BlazingStory. It must inherit from `LayoutComponentBase` and include `@Body` for rendering content.

```html
@inherits LayoutComponentBase
<YourThemeProvider>
    <div style="padding: 24px;">
        @Body
    </div>
</YourThemeProvider>
```

--------------------------------

### Implement a Blazing Story Component

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Define a story for a Blazor component. This example shows how to create a story for a Button component, specifying its name and template.

```razor
@using MyBlazorWasmApp1.Components
@attribute [Stories("Components/Button")]

<StoriesTComponent="Button">

    <Story Name="Primary">
        <Template>
            <Button Label="Button" Primary="true" @attributes="context.Args" />
        </Template>
    </Story>

</Stories>
```

--------------------------------

### Create Blazing Story WebAssembly App Project

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Create a new Blazing Story WebAssembly application project using the .NET CLI. This command assumes a solution file already exists in the current directory.

```shell
# Create a new Blazing Story app
dotnet new blazingstorywasm -n MyBlazorWasmApp1.Stories
# Add the Blazing Story app project to the solution
dotnet sln add ./MyBlazorWasmApp1.Stories/
```

--------------------------------

### Run BlazingStory Project with .NET CLI

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Execute this command in your terminal to run the BlazingStory project. Ensure you are in the correct directory.

```shell
dotnet run --project ./MyBlazorWasmApp1.Stories
```

--------------------------------

### Create Blazing Story App Project

Source: https://github.com/jsakamoto/blazingstory/blob/main/README.md

Creates a new Blazing Story app project alongside an existing Blazor app. Use the `-mcp` flag for Blazor Server to enable the MCP server feature.

```shell
# For Blazor WebAssembly:
dotnet new blazingstorywasm -n MyBlazorApp1.Stories

# For Blazor Server (add -mcp to enable the MCP server feature):
dotnet new blazingstoryserver -n MyBlazorApp1.Stories

dotnet sln add ./MyBlazorApp1.Stories/
```

--------------------------------

### Run Blazing Story App

Source: https://github.com/jsakamoto/blazingstory/blob/main/README.md

Runs the Blazing Story application. This command should be executed from the directory containing the Blazing Story app project.

```shell
dotnet run --project ./MyBlazorApp1.Stories
```

--------------------------------

### Blazing Story Folder Structure

Source: https://github.com/jsakamoto/blazingstory/blob/main/AGENTS.md

Overview of the directory layout for the Blazing Story project, detailing the purpose of each main folder and its corresponding NuGet package.

```tree
BlazingStory/                  - Main library (BlazingStory package)
BlazingStory.Abstractions/     - Abstract types & interfaces (BlazingStory.Abstractions package)
BlazingStory.Addons/           - Addon framework (BlazingStory.Addons package)
BlazingStory.Addons.BuiltIns/  - Built-in addons (BlazingStory.Addons.BuiltIns package)
BlazingStory.ToolKit/          - Utilities (BlazingStory.ToolKit package)
BlazingStory.McpServer/        - MCP server (BlazingStory.McpServer package)
BlazingStory.Stories/          - Demo/reference Blazor WebAssembly app (no package output)
ProjectTemplate/               - dotnet templates (BlazingStory.ProjectTemplates package)
Samples/                       - Sample applications
Tests/
  BlazingStory.Test/           - Main test project
  BlazingStory.Build.Test/     - Build-related test project
  Fixtures/                    - Test fixture projects
build/                         - Custom MSBuild .targets files
```

--------------------------------

### Add First Blazor Component Story

Source: https://github.com/jsakamoto/blazingstory/blob/main/ProjectTemplate/Content/BlazingStoryWasm/Client/Stories/Welcome.md

Implement a Blazor component story using the Stories component. Ensure story files end with '.stories.razor' for the 'Show code' feature.

```html
@using YourNamespace.Components
@attribute [Stories("Components/Button")]
<Stories TComponent="Button">

  <Story Name="Primary">
    <Template>
      <Button Label="Button" Primary="true" @attributes="context.Args" />
    </Template>
  </Story>

  <Story Name="Secondary">
    <Arguments>
      <Arg For="_ => _.Primary" Value="false" />
    </Arguments>
    <Template>
      <Button Label="Button" @attributes="context.Args" />
    </Template>
  </Story>

</Stories>
```

--------------------------------

### TypeScript Greeter Function and Person Class

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/SampleOfMarkdown.md

Illustrates a TypeScript function for greeting and a class definition.

```typescript
// This is a comment
const greet = (name: string): string => {
  return `Hello, ${name}`;
};

class Person {
  constructor(name: string) {
    this.name = name;
  }

  public greet(): string {
    return `Hello, ${this.name}` + "!";
  }
}
```

--------------------------------

### HTML Comment and Heading

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/SampleOfMarkdown.md

Shows a basic HTML comment and a heading element.

```html
<!-- This is a comment -->
<h1 id="hello-world">hello world</h1>
```

--------------------------------

### Add Story File

Source: https://github.com/jsakamoto/blazingstory/blob/main/README.md

Defines a story for a Blazor component. The file must be named with the `.stories.razor` extension and typically resides in a `Stories/` folder. The `[Stories]` attribute specifies the component path.

```razor
@* MyBlazorApp1.Stories/Stories/Button.stories.razor *@
@using MyBlazorApp1.Components
@attribute [Stories("Components/Button")]

<StoriesTComponent="Button">
    <Story Name="Primary">
        <Template>
            <Button Label="Button" Primary="true" @attributes="context.Args" />
        </Template>
    </Story>
</Stories>
```

--------------------------------

### C# Person Class

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/SampleOfMarkdown.md

A C# class definition for a Person with a Greet method.

```csharp
// This is a comment
public class Person {
  public string Name { get; set; }

  public Person(name) {
    this.Name = name;
  }

  public string Greet() {
    return $"Hello, {this.name}" + "!";
  }
}
```

--------------------------------

### Configure Story-Level Layout in Story Component

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Apply a layout component to an individual story by using the `Layout` parameter of the `<Story>` component.

```razor
@* 📄...stories.razor *@
@attribute [Stories(...)]

<Stories ...>
    <Story Name="..." Layout="typeof(StoryLayout)">
        ...

```

--------------------------------

### Reference Component Project

Source: https://github.com/jsakamoto/blazingstory/blob/main/README.md

Adds a reference from the Blazing Story app project to the Blazor component project. This allows Blazing Story to find and catalog the components.

```shell
dotnet add ./MyBlazorApp1.Stories reference ./MyBlazorApp1
```

--------------------------------

### Configure Application-Level Layout in App.razor

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Specify the default layout component for all stories at the application level by setting the `DefaultLayout` property of the `BlazingStoryApp` component in `App.razor`.

```razor
@* 📄App.razor *@
<BlazingStoryApp ... DefaultLayout="typeof(DefaultLayout)">
</BlazingStoryApp>
```

--------------------------------

### Add Project Reference to Blazing Story App

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Add a project reference from the Blazing Story app project to your existing Blazor WebAssembly application project. This allows Blazing Story to access your components.

```shell
dotnet add ./MyBlazorWasmApp1.Stories reference ./MyBlazorWasmApp1
```

--------------------------------

### Configure Component-Level Layout in Stories.razor

Source: https://github.com/jsakamoto/blazingstory/blob/main/Tests/Fixtures/BlazingStoryApp1/Stories/GettingStarted.md

Set a specific layout component for stories within a particular component (stories file) by using the `Layout` parameter of the `<Stories>` component.

```razor
@* 📄...stories.razor *@
@attribute [Stories(...)]

<Stories ... Layout="typeof(StoriesLayout)">
    ...
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.