Menu
Guide for converting CDN-based apps to local Tailwind 4.2, Font Awesome 7.2, and Noto Sans Variable without Node.js.
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.
Based on SOC occupation classification
| name | Frontend Modernization (Node-Free) |
| description | Guide for converting CDN-based apps to local Tailwind 4.2, Font Awesome 7.2, and Noto Sans Variable without Node.js. |
Guide for implementing a professional, local-only frontend stack in .NET 10 without requiring Node.js or npm, achieving visual excellence ("The WOW Factor") without "AI Slop".
Ensure the following tools are available:
dotnet tool install -g Microsoft.Web.LibraryManager.CliConfigure libman.json to download fonts (Noto Sans Variable) and icons (Font
Awesome) from unpkg.
{
"version": "1.0",
"defaultProvider": "unpkg",
"libraries": [
{
"library": "@fortawesome/fontawesome-free@7.2.0",
"destination": "wwwroot/lib/font-awesome",
"files": [
"css/all.min.css",
"webfonts/fa-solid-900.woff2",
"webfonts/fa-brands-400.woff2",
"webfonts/fa-regular-400.woff2"
]
},
{
"library": "@fontsource-variable/noto-sans@5.1.1",
"destination": "wwwroot/lib/noto-sans/",
"files": ["index.css", "files/noto-sans-latin-wght-normal.woff2"]
}
]
}
Add NuGet Package:
<PackageReference Include="Tailwind.MSBuild" Version="2.0.2">
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
Configure Properties in .csproj:
<PropertyGroup>
<TailwindCSSInputFile>wwwroot/css/input.css</TailwindCSSInputFile>
<TailwindCSSOutputFile>wwwroot/css/site.css</TailwindCSSOutputFile>
</PropertyGroup>
Single File Component (SFC) CSS Architecture: Organize CSS into
components to keep input.css clean.
wwwroot/css/components/theme.css: Core design tokens (@theme).wwwroot/css/components/btn.css: Button utilities (@utility).wwwroot/css/components/card.css: Card utilities (@utility).Main Input CSS (wwwroot/css/input.css):
@import "tailwindcss";
/* Theme and Base */
@import "./components/theme.css";
/* Components */
@import "./components/btn.css";
@import "./components/card.css";
Theme Component (wwwroot/css/components/theme.css):
@theme {
--font-sans: "Noto Sans Variable", ui-sans-serif, system-ui;
--color-brand-primary: #7c3aed; /* Professional Purple */
--color-brand-bg: #fafafa;
}
_Layout.cshtml)Replace CDNs with local references. Ensure Noto Sans is loaded correctly:
<head>
<!-- Local Fonts -->
<link rel="stylesheet" href="~/lib/noto-sans/index.css" />
<!-- Local Icons -->
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css" />
<!-- Tailwind Generated CSS -->
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body class="bg-brand-bg text-slate-900 font-sans antialiased"></body>
When integrating external premium UI blocks (like Tailark):
className, {...props}).Lucide icons to Font Awesome tags
(<i class="fa-solid fa-*"></i>).focus-visible
outlines, use aria-hidden="true" on decorative icons, and provide
aria-labels for icon-only buttons. Contrast ratios must meet WCAG 2.1 AA
standards even in dark mode.For comprehensive styling and compliance rules, always refer to
.agents/rules/tailwind_css_styleguide.md,.agents/rules/font_awesome_styleguide.md,.agents/rules/privacy_dsgvo.md, and.agents/rules/accessibility_a11y.md.