Menu
Apply when working with Razor views, MVC layouts, partial views, and tag helpers
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill frontend-razorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.
AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.
This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.
Based on SOC occupation classification
| name | frontend-razor |
| description | Apply when working with Razor views, MVC layouts, partial views, and tag helpers |
| globs | ["**/*.cshtml","**/Views/**/*","**/Pages/**/*.cshtml","**/Shared/**/*.cshtml"] |
Views/
├── Shared/
│ ├── _Layout.cshtml # Main layout template
│ ├── _LayoutEmpty.cshtml # Minimal layout (no header/footer)
│ ├── _Header.cshtml # Header partial
│ ├── _Footer.cshtml # Footer partial
│ ├── _Navigation.cshtml # Navigation partial
│ ├── _Pagination.cshtml # Reusable pagination
│ └── Components/ # View components
│ └── SearchBox/
│ └── Default.cshtml
├── Home/
│ ├── Index.cshtml
│ └── About.cshtml
├── Products/
│ ├── Index.cshtml
│ ├── Details.cshtml
│ └── _ProductCard.cshtml # Page-specific partial
├── _ViewImports.cshtml # Shared imports and tag helpers
└── _ViewStart.cshtml # Default layout assignment
@using MyApp.Web
@using MyApp.Web.Models
@using MyApp.Core.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, MyApp.Web
@{
Layout = "_Layout";
}
@* Views/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - My Application</title>
@* Head section for page-specific styles *@
@await RenderSectionAsync("Styles", required: false)
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body class="@ViewData["BodyClass"]">
<header>
@await Html.PartialAsync("_Header")
@await Html.PartialAsync("_Navigation")
</header>
<main class="container">
@RenderBody()
</main>
<footer>
@await Html.PartialAsync("_Footer")
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@* Scripts section for page-specific JavaScript *@
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
@model ProductListViewModel
@{
ViewData["Title"] = "Products";
ViewData["BodyClass"] = "products-page";
}
@section Styles {
<link rel="stylesheet" href="~/css/products.css" asp-append-version="true" />
}
<h1>@ViewData["Title"]</h1>
<div class="product-grid">
@foreach (var product in Model.Products)
{
@await Html.PartialAsync("_ProductCard", product)
}
</div>
@section Scripts {
<script src="~/js/products.js" asp-append-version="true"></script>
}
@* Views/Shared/_LayoutAdmin.cshtml *@
@{
Layout = "_Layout";
}
<div class="admin-container">
<aside class="admin-sidebar">
@await Html.PartialAsync("_AdminNav")
</aside>
<div class="admin-content">
@RenderBody()
</div>
</div>
@section Scripts {
<script src="~/js/admin.js" asp-append-version="true"></script>
@await RenderSectionAsync("AdminScripts", required: false)
}
@* Async (recommended) *@
@await Html.PartialAsync("_ProductCard", product)
@* With explicit view path *@
@await Html.PartialAsync("~/Views/Shared/_Header.cshtml")
@* Synchronous (avoid for I/O operations) *@
@Html.Partial("_Sidebar")
@* As tag helper *@
<partial name="_ProductCard" model="product" />
@* With view-data *@
<partial name="_Pagination" model="Model.Pagination" view-data="ViewData" />
@* Views/Products/_ProductCard.cshtml *@
@model Product
<article class="product-card">
<a asp-action="Details" asp-route-id="@Model.Id" class="product-card__link">
<img src="@Model.ImageUrl"
alt="@Model.Name"
class="product-card__image" />
<div class="product-card__content">
<h3 class="product-card__title">@Model.Name</h3>
<p class="product-card__price">@Model.Price.ToString("C")</p>
@if (Model.IsOnSale)
{
<span class="product-card__badge">Sale</span>
}
</div>
</a>
</article>
// ViewComponents/RecentArticlesViewComponent.cs
public class RecentArticlesViewComponent : ViewComponent
{
private readonly IArticleService _articleService;
public RecentArticlesViewComponent(IArticleService articleService)
{
_articleService = articleService;
}
public async Task<IViewComponentResult> InvokeAsync(int count = 5)
{
var articles = await _articleService.GetRecentAsync(count);
return View(articles);
}
}
@* Views/Shared/Components/RecentArticles/Default.cshtml *@
@model IEnumerable<Article>
<section class="recent-articles">
<h3>Recent Articles</h3>
<ul>
@foreach (var article in Model)
{
<li>
<a asp-controller="Articles"
asp-action="Details"
asp-route-slug="@article.Slug">
@article.Title
</a>
<time datetime="@article.PublishedDate.ToString("yyyy-MM-dd")">
@article.PublishedDate.ToString("MMM dd, yyyy")
</time>
</li>
}
</ul>
</section>
@* Tag helper syntax (preferred) *@
<vc:recent-articles count="5" />
@* Async syntax *@
@await Component.InvokeAsync("RecentArticles", new { count = 5 })
@* With cache *@
<cache expires-after="@TimeSpan.FromMinutes(10)">
<vc:recent-articles count="5" />
</cache>
@* Anchor tag helper *@
<a asp-controller="Products"
asp-action="Details"
asp-route-id="@product.Id"
asp-route-category="@product.Category">
View Details
</a>
@* Form tag helpers *@
<form asp-controller="Contact" asp-action="Submit" method="post">
<div class="form-group">
<label asp-for="Name"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Category"></label>
<select asp-for="Category" asp-items="Model.Categories" class="form-control">
<option value="">Select a category</option>
</select>
<span asp-validation-for="Category" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
@* Image with cache busting *@
<img src="~/images/logo.png" asp-append-version="true" alt="Logo" />
@* Environment-specific rendering *@
<environment include="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
// TagHelpers/EmailTagHelper.cs
[HtmlTargetElement("email")]
public class EmailTagHelper : TagHelper
{
public string Address { get; set; }
public string Subject { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "a";
var href = $"mailto:{Address}";
if (!string.IsNullOrEmpty(Subject))
{
href += $"?subject={Uri.EscapeDataString(Subject)}";
}
output.Attributes.SetAttribute("href", href);
output.Content.SetContent(Address);
}
}
@* Usage *@
<email address="support@example.com" subject="Help Request" />
@model ContactFormViewModel
<form asp-action="Submit" method="post">
@Html.AntiForgeryToken()
<div class="form-group">
<label asp-for="Name" class="form-label"></label>
<input asp-for="Name" class="form-control" placeholder="Your name" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Email" class="form-label"></label>
<input asp-for="Email" class="form-control" type="email" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Message" class="form-label"></label>
<textarea asp-for="Message" class="form-control" rows="5"></textarea>
<span asp-validation-for="Message" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
public class ContactFormViewModel
{
[Required(ErrorMessage = "Name is required")]
[StringLength(100, ErrorMessage = "Name cannot exceed 100 characters")]
[Display(Name = "Full Name")]
public string Name { get; set; }
[Required(ErrorMessage = "Email is required")]
[EmailAddress(ErrorMessage = "Please enter a valid email address")]
public string Email { get; set; }
[Required(ErrorMessage = "Message is required")]
[StringLength(2000, MinimumLength = 10,
ErrorMessage = "Message must be between 10 and 2000 characters")]
public string Message { get; set; }
}
@if (Model.Products.Any())
{
<div class="product-grid">
@foreach (var product in Model.Products)
{
<partial name="_ProductCard" model="product" />
}
</div>
}
else
{
<div class="empty-state">
<p>No products found.</p>
<a asp-action="Index" asp-controller="Home" class="btn btn-link">
Return to Home
</a>
</div>
}
@switch (Model.Status)
{
case OrderStatus.Pending:
<span class="badge badge-warning">Pending</span>
break;
case OrderStatus.Processing:
<span class="badge badge-info">Processing</span>
break;
case OrderStatus.Shipped:
<span class="badge badge-primary">Shipped</span>
break;
case OrderStatus.Delivered:
<span class="badge badge-success">Delivered</span>
break;
default:
<span class="badge badge-secondary">Unknown</span>
break;
}
@* Null conditional *@
<p>Author: @Model.Author?.Name ?? "Unknown"</p>
@* With fallback *@
@if (Model.ImageUrl != null)
{
<img src="@Model.ImageUrl" alt="@Model.Title" />
}
else
{
<img src="~/images/placeholder.jpg" alt="No image available" />
}
@* Ternary operator *@
<div class="@(Model.IsActive ? "active" : "inactive")">
@Model.Title
</div>
@for (int i = 0; i < Model.Items.Count; i++)
{
<div class="item @(i % 2 == 0 ? "even" : "odd")">
<span class="item-number">@(i + 1)</span>
<span class="item-name">@Model.Items[i].Name</span>
</div>
}
@{ var index = 0; }
@foreach (var item in Model.Items)
{
<div class="item" data-index="@index">
@item.Name
</div>
index++;
}
<ul class="breadcrumb">
@foreach (var crumb in Model.Breadcrumbs)
{
var isLast = crumb == Model.Breadcrumbs.Last();
<li class="breadcrumb-item @(isLast ? "active" : "")">
@if (isLast)
{
@crumb.Title
}
else
{
<a href="@crumb.Url">@crumb.Title</a>
}
</li>
}
</ul>
@* HTML Helper (older approach) *@
@Html.ActionLink("Details", "Details", "Products", new { id = product.Id }, new { @class = "btn btn-link" })
@* Tag Helper (modern, preferred) *@
<a asp-controller="Products" asp-action="Details" asp-route-id="@product.Id" class="btn btn-link">
Details
</a>
@* HTML Helper for form *@
@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Enter name" })
@* Tag Helper (cleaner) *@
<input asp-for="Name" class="form-control" placeholder="Enter name" />
@* Complex dynamic attributes *@
@Html.TextBoxFor(m => m.Name, Model.GetInputAttributes())
@* Raw HTML content *@
@Html.Raw(Model.HtmlContent)
@* Display templates *@
@Html.DisplayFor(m => m.CreatedDate)
@* Editor templates *@
@Html.EditorFor(m => m.Address)
@* In Controller *@
ViewData["Title"] = "Product Details";
ViewData["ShowSidebar"] = true;
@* In View *@
<h1>@ViewData["Title"]</h1>
@if ((bool?)ViewData["ShowSidebar"] == true)
{
<partial name="_Sidebar" />
}
@* In Controller *@
ViewBag.Categories = await _categoryService.GetAllAsync();
@* In View *@
<select asp-items="@(new SelectList(ViewBag.Categories, "Id", "Name"))">
<option value="">All Categories</option>
</select>
// In Controller
TempData["SuccessMessage"] = "Product saved successfully!";
return RedirectToAction("Index");
@* In View *@
@if (TempData["SuccessMessage"] != null)
{
<div class="alert alert-success alert-dismissible">
@TempData["SuccessMessage"]
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
}
<form id="contact-form" asp-action="SubmitAjax" method="post">
@Html.AntiForgeryToken()
<div class="form-group">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="result"></div>
@section Scripts {
<script>
$('#contact-form').on('submit', function(e) {
e.preventDefault();
var $form = $(this);
var $button = $form.find('button[type="submit"]');
$button.prop('disabled', true).text('Sending...');
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: $form.serialize(),
success: function(response) {
$('#result').html(response);
$form[0].reset();
},
error: function(xhr) {
$('#result').html('<div class="alert alert-danger">An error occurred.</div>');
},
complete: function() {
$button.prop('disabled', false).text('Submit');
}
});
});
</script>
}
[HttpGet]
public async Task<IActionResult> LoadMore(int page)
{
var products = await _productService.GetPagedAsync(page, 10);
return PartialView("_ProductGrid", products);
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SubmitAjax(ContactFormViewModel model)
{
if (!ModelState.IsValid)
{
return PartialView("_ContactFormErrors", model);
}
await _contactService.ProcessAsync(model);
return PartialView("_ContactFormSuccess");
}
@* Semantic HTML with ARIA *@
<nav aria-label="Main navigation">
<ul class="nav" role="menubar">
@foreach (var item in Model.NavItems)
{
<li role="none">
<a href="@item.Url"
role="menuitem"
aria-current="@(item.IsActive ? "page" : null)">
@item.Title
</a>
</li>
}
</ul>
</nav>
@* Form accessibility *@
<div class="form-group">
<label asp-for="Email" id="email-label"></label>
<input asp-for="Email"
aria-labelledby="email-label"
aria-describedby="email-help email-error" />
<small id="email-help" class="form-text text-muted">
We'll never share your email.
</small>
<span asp-validation-for="Email" id="email-error" class="text-danger" role="alert"></span>
</div>
@* Skip link for keyboard navigation *@
<a href="#main-content" class="skip-link">Skip to main content</a>