Provides templates, style guidelines, and a complete workflow for writing MkDocs documentation, sample pages, and navigation updates for BlazorWebFormsComponents. Covers component doc structure with Web Forms vs Blazor syntax comparisons, migration guide templates, sample page creation in AfterBlazorServerSide with demo and source code sections, NavMenu.razor and ComponentList.razor updates, and README linking. Use when documenting a new or existing BWFC component, creating sample pages with escaped code blocks, updating mkdocs.yml navigation, or following the complete documentation workflow from docs to samples to README.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Provides templates, style guidelines, and a complete workflow for writing MkDocs documentation, sample pages, and navigation updates for BlazorWebFormsComponents. Covers component doc structure with Web Forms vs Blazor syntax comparisons, migration guide templates, sample page creation in AfterBlazorServerSide with demo and source code sections, NavMenu.razor and ComponentList.razor updates, and README linking. Use when documenting a new or existing BWFC component, creating sample pages with escaped code blocks, updating mkdocs.yml navigation, or following the complete documentation workflow from docs to samples to README.
Documentation Skill for BlazorWebFormsComponents
This skill provides guidance for writing documentation for the BlazorWebFormsComponents library. Use this when creating or updating component documentation, migration guides, or utility feature docs.
Documentation Philosophy
The documentation serves developers migrating ASP.NET Web Forms applications to Blazor. Every document should:
Help developers understand what IS and ISN'T supported
Show side-by-side Web Forms → Blazor syntax comparisons
Provide practical, copy-paste-ready examples
Link to original Microsoft documentation for reference
Component Documentation Template
When documenting a component, use this exact structure:
# [ComponentName]
[One paragraph describing what this component does and why it exists in this library]
Original Microsoft implementation: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.[componentname]?view=netframework-4.8
## Features Supported in Blazor- [List each supported feature as a bullet point]
- [Include supported events with brief description]
- [Note any Blazor-specific enhancements]
### Blazor Notes
[Any Blazor-specific implementation details or behavioral differences]
- [Brief explanation of why not supported or what to use instead]
- Not supported; Blazor uses component events instead
- Not needed; state is preserved in component fields
## Web Forms Features NOT Supported
-
**[FeatureName]**
-
**PostBackUrl**
-
**ViewState serialization**
## Web Forms Declarative Syntax
```html
<asp:[ComponentName]
[All attributes from original Web Forms control]
[Alphabetically ordered]
[Include runat="server" at the end]
/>
Blazor Syntax
<[ComponentName]
[Supported attributes only]
[Same order as Web Forms section for easy comparison]
/>
Usage Notes
[Practical advice for migration]
[Common pitfalls to avoid]
[Performance considerations if any]
Examples
Basic Usage
@* Description of what this example shows *@
<[ComponentName] Property="value" OnEvent="Handler" />
@code {
void Handler()
{
// Implementation
}
}
[Scenario Name]
@* More complex example *@
See Also
[Link to related component]
[Link to migration guide if relevant]
[Link to live sample page]
## Writing Style Guidelines
### Tone
- Professional but approachable
- Acknowledge that migration is work, but this library helps
- Be direct about what's NOT supported rather than hiding it
### Code Examples
- Always show WORKING code that can be copy-pasted
- Include `@code` blocks with event handlers
- Use realistic property names and values
- Comment complex sections
### Web Forms Syntax Blocks
- Copy the FULL attribute list from Microsoft docs
- Include ALL attributes even if not supported (helps with migration)
- Keep attributes alphabetically ordered within logical groups
- Always include `runat="server"` at the end
### Blazor Syntax Blocks
- Show only SUPPORTED attributes
- Maintain same order as Web Forms for easy comparison
- Omit `runat` attribute (not used in Blazor)
- Use Blazor event syntax (`OnClick` not `OnClick="Handler"`)
## Migration Guide Template
```markdown
# Migrating [Feature/Pattern]
## Overview
[What this guide covers and who it's for]
## Prerequisites
- [Required knowledge]
- [Required tools/versions]
## Step-by-Step Migration
### Step 1: [Action]
**Before (Web Forms):**
```aspx
[Web Forms code]
After (Blazor):
[Blazor code]
[Explanation of changes]
Step 2: [Action]
[Continue pattern...]
Common Issues
[Issue Name]
Problem: [Description]
Solution: [How to fix]
Next Steps
[What to migrate next]
[Related guides]
## Utility Feature Documentation Template
```markdown
# [FeatureName]
## Background
[Why this feature existed in Web Forms]
[What problem it solved]
## Web Forms Usage
```csharp
// How it was used in Web Forms
Blazor Implementation
[How this library implements the feature]
[Key differences from Web Forms]
// How to use in Blazor
Migration Path
[How to update existing code]
[Recommended Blazor alternatives if applicable]
Moving On
[Recommendations for properly refactoring away from this legacy pattern]
## File Naming Conventions
- Use PascalCase for component docs: `Button.md`, `GridView.md`
- Use kebab-case for guides: `migration-readiness.md`, `master-pages.md`
- Exception: `readme.md` for index pages (lowercase)
## MkDocs Integration
After creating documentation:
1. Add entry to `mkdocs.yml` in appropriate `nav:` section
2. Maintain alphabetical order within categories
3. Use descriptive nav labels matching the component name
```yaml
nav:
- Editor Controls:
- Button: EditorControls/Button.md # Format: "Label: path/file.md"
- NewComponent: EditorControls/NewComponent.md
Admonition Usage
Use these sparingly for important callouts:
!!! note "Migration Tip"
Helpful information for migration
!!! warning "Breaking Change"
Something that differs significantly from Web Forms
!!! danger "Not Supported"
Feature that cannot be migrated directly
!!! tip "Best Practice"
Recommended Blazor pattern to use instead
Cross-References
Link to related documentation:
Other components: [Button](../EditorControls/Button.md)
When creating sample pages in samples/AfterBlazorServerSide/Components/Pages/ControlSamples/, follow this structure to help developers see both the working demo AND the code that creates it:
@page "/samples/[componentname]/[scenario]"
<PageTitle>[ComponentName] - [Scenario]</PageTitle>
<h1>[ComponentName] Sample</h1>
<p>[Brief description of what this sample demonstrates]</p>
<div class="demo-container">
<h2>Demo</h2>
@* The actual working component demo *@
<Button Text="Click Me" OnClick="HandleClick" />
@if (ClickCount > 0)
{
<p>Button clicked @ClickCount times</p>
}
</div>
<div class="code-container">
<h2>Source Code</h2>
<pre><code class="language-razor">@@page "/samples/[componentname]/[scenario]"
<h1>[ComponentName] Sample</h1>
<Button Text="Click Me" OnClick="HandleClick" />
@@if (ClickCount > 0)
{
<p>Button clicked @@ClickCount times</p>
}
@@code {
private int ClickCount = 0;
private void HandleClick()
{
ClickCount++;
}
}</code></pre>
</div>
@code {
private int ClickCount = 0;
private void HandleClick()
{
ClickCount++;
}
}
Sample Page Guidelines
Two Sections Required:
Demo Section - The working, interactive component
Source Code Section - A readable code block showing exactly what's in the demo
Code Block Formatting:
Use <pre><code class="language-razor"> for syntax highlighting
HTML-encode special characters: < becomes <, > becomes >
Preserve @ symbols by doubling them: @@code, @@if, @@page
Show the COMPLETE code including @code block with event handlers
Include all relevant markup from the demo section
Keep Demo and Code in Sync:
The code block must match the demo exactly
If you change the demo, update the code block
Don't simplify or abbreviate the code block
Organization:
Use clear headings: "Demo" and "Source Code"
Add brief description at the top explaining what the sample demonstrates
Use CSS classes demo-container and code-container for styling
Complex Samples:
For samples with multiple code files, show the main component code
Link to GitHub for complete source if needed
Use tabs or accordion for multiple code examples
Example: Data-Bound Component Sample
@page "/samples/gridview/basic"
<PageTitle>GridView - Basic Example</PageTitle>
<h1>GridView Sample</h1>
<p>This sample demonstrates basic GridView usage with static data.</p>
<div class="demo-container">
<h2>Demo</h2>
<GridView DataSource="@Products" AutoGenerateColumns="true" />
</div>
<div class="code-container">
<h2>Source Code</h2>
<pre><code class="language-razor">@@page "/samples/gridview/basic"
<GridView DataSource="@@Products" AutoGenerateColumns="true" />
@@code {
private List<Product> Products = new()
{
new Product { Id = 1, Name = "Product A", Price = 10.99m },
new Product { Id = 2, Name = "Product B", Price = 20.99m }
};
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
}</code></pre>
</div>
@code {
private List<Product> Products = new()
{
new Product { Id = 1, Name = "Product A", Price = 10.99m },
new Product { Id = 2, Name = "Product B", Price = 20.99m }
};
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
}
}
Creating Sample Pages for Components
CRITICAL: Every documented component MUST have a corresponding sample page in the AfterBlazorServerSide project.
Sample Page Structure and Location
Samples are located in samples/AfterBlazorServerSide/Components/Pages/ControlSamples/[ComponentName]/
The folder structure mirrors the documentation categories:
Ordering: Add links alphabetically within each category.
Updating the Repository README
CRITICAL: After documenting a component, update the main README.md at the repository root.
Location: README.md (repository root)
For New Components
If adding a component that isn't already listed, add it to the appropriate category:
## Blazor Components for Controls
There are a significant number of controls in ASP.NET Web Forms, and we will focus on creating components in the following order:
- Editor Controls
- [AdRotator](docs/EditorControls/AdRotator.md)
- [Button](docs/EditorControls/Button.md)
- [NewComponent](docs/EditorControls/NewComponent.md) <-- Add alphabetically with link
- [TextBox](docs/EditorControls/TextBox.md)
For Existing Components (Adding Documentation)
If a component exists in the list without a documentation link, add the link:
