Blog Feature Skill for Blazor WASM + Azure Functions

This skill provides a complete, production-ready blog feature for Blazor WASM applications hosted on Azure Static Web Apps with serverless backend processing.

Quick Reference: When to Load Which Resource

Your Task	Load Resource	Key Concepts
Understand architecture, prerequisites, shared models	resources/core-architecture.md	3-layer architecture, project structure, data models
Implement backend services, Azure Functions, file share integration	resources/backend-services.md	BlogStorageService, YAML parsing, DI setup
Build Blazor components, UI pages, styling	resources/frontend-components.md	Razor components, markdown rendering, responsive design
Configure Azure environment, local settings, deployment	resources/azure-configuration.md	Connection strings, file share setup, environment variables
Create sample content, test workflow, troubleshoot issues	resources/sample-content-testing.md	Sample markdown, testing checklist, common issues

Orchestration Protocol

Phase 1: Setup & Understanding

Before writing any code, establish context:

1. Review your current Blazor WASM project structure
2. Confirm you have Azure Functions API project ready
3. Verify Azure Storage account and File Share access
4. Load resources/core-architecture.md to understand 3-layer design

Quick assessment:

• Do you have existing Blazor WASM + Functions project? → YES, proceed
• Do you need to understand what to build? → Load core-architecture.md first
• Are you setting up Azure resources? → Go to azure-configuration.md

Phase 2: Implementation Selection

Choose your implementation path:

Your Situation	Load This First	Then Load
Starting from scratch	core-architecture.md	backend-services.md
Backend complete, need UI	frontend-components.md	(skip backend-services.md)
Just need configuration help	azure-configuration.md	(reference other resources as needed)
Debugging or testing	sample-content-testing.md	(target troubleshooting section)

Phase 3: Execution & Validation

Implementation sequence:

1. Create project structure (core-architecture.md Step 1-2)
2. Add NuGet packages (backend-services.md)
3. Implement BlogStorageService (backend-services.md)
4. Create Azure Functions (backend-services.md)
5. Build Blazor components (frontend-components.md)
6. Configure Azure environment (azure-configuration.md)
7. Test locally (sample-content-testing.md testing workflow)
8. Deploy to Azure (azure-configuration.md deployment section)

Validation checkpoints:

• Backend: Functions respond correctly to test calls
• Frontend: Components load and display posts
• Integration: End-to-end blog viewing works
• Azure: Configuration deployed and accessible

Common Workflow Scenarios

Scenario 1: Fresh Implementation (First Time)

Timeline: 2-3 hours

1. Read core-architecture.md → understand what you're building
2. Follow backend-services.md → implement API layer
3. Follow frontend-components.md → build UI layer
4. Follow azure-configuration.md → configure Azure resources
5. Use sample-content-testing.md → validate with sample posts

Scenario 2: Existing Backend, Need Frontend

Timeline: 1 hour

1. Skip to frontend-components.md
2. Reference core-architecture.md if component questions arise
3. Use sample posts from sample-content-testing.md
4. Deploy following azure-configuration.md

Scenario 3: Update Existing Blog

Timeline: 30 minutes

1. Jump to relevant resource file
2. Reference back to core-architecture.md for context
3. Test changes with sample-content-testing.md checklist

Scenario 4: Troubleshooting Issues

Timeline: As needed

1. Go directly to sample-content-testing.md
2. Find problem in troubleshooting section
3. Reference other resources for context if needed

Architecture Summary

Frontend → Backend → Storage:

• Blazor WASM pages call HTTP endpoints
• Azure Functions retrieve from File Share
• Markdown files with YAML frontmatter contain all content
• No database needed (files are the database)

Key Components:

• BlogStorageService: Abstracts File Share interactions
• BlogFunctions: HTTP endpoints for listing/retrieving posts
• Index/Post Razor Components: Client UI for browsing
• CSS Styling: Responsive design for all screen sizes

Implementation Complexity

Component	Complexity	Time
Backend Services	Medium	45 min
Azure Functions	Easy	30 min
Frontend Components	Medium	60 min
Styling	Easy	30 min
Configuration	Easy	20 min
Total	Easy-Medium	~3 hours

Prerequisites Checklist

• ✅ Existing Blazor WASM SWA project
• ✅ Azure Functions API project
• ✅ Azure Storage account with File Share
• ✅ .NET 10 SDK (or later)
• ✅ Azure CLI (for deployment)
• ✅ Visual Studio Code or Visual Studio

Resource Files Summary

resources/core-architecture.md (285 lines)

Foundational knowledge about the blog system architecture, project structure, and shared data models needed across frontend and backend.

Load when: Getting started, understanding the design, creating shared models

resources/backend-services.md (425 lines)

Complete implementation of Azure File Share service integration, BlogStorageService class, and Azure Functions for blog operations.

Load when: Building the API layer, implementing backend services

resources/frontend-components.md (610 lines)

Blazor Razor components for blog listing and detail pages, CSS styling for responsive design, navigation integration.

Load when: Building the UI layer, styling components, creating Razor pages

resources/azure-configuration.md (445 lines)

Azure environment setup, local development configuration, File Share structure, deployment guidelines, and security considerations.

Load when: Setting up Azure resources, configuring environments, deploying to production

resources/sample-content-testing.md (395 lines)

Sample markdown formats, complete testing workflow checklist, troubleshooting guide for common issues, and enhancement ideas.

Load when: Creating test data, validating implementation, debugging problems

Best Practices

1. Start with core-architecture.md - Don't skip understanding the design
2. Implement sequentially - Backend first, then frontend, then configuration
3. Test locally - Use Azure Storage Emulator before deploying
4. Use sample content - Test with provided markdown examples
5. Follow naming conventions - Consistent file naming prevents errors

Quick Navigation by Goal

I want to...	Resource	Section
Understand the system	core-architecture.md	Architecture Overview
Create the backend	backend-services.md	BlogStorageService
Build the UI	frontend-components.md	Blog Listing Page
Set up Azure	azure-configuration.md	Azure File Share Setup
Test everything	sample-content-testing.md	Testing Workflow
Fix a problem	sample-content-testing.md	Troubleshooting Guide
Deploy to production	azure-configuration.md	Deployment Checklist

Support & Next Steps

After implementation:

• Add pagination for better performance (recommended)
• Implement search functionality
• Consider caching for frequently-accessed posts
• Monitor Azure Function cold starts
• Optimize featured image sizes for performance

Enhancement opportunities:

• RSS feed generation
• Comment system integration
• Post categories and tagging
• Admin content management interface
• Email newsletter subscription

---

Built with: Blazor WASM, Azure Functions, Azure File Share, Markdown, YAML frontmatter

Skill Type: Feature Implementation (Blazor WASM + Azure)

Difficulty: Easy-Medium (3-4 hours total)