render-info
Using the RendererInfo class in Blazor to detect rendering context and interactivity.
Best use case
render-info is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Using the RendererInfo class in Blazor to detect rendering context and interactivity.
Using the RendererInfo class in Blazor to detect rendering context and interactivity.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "render-info" skill to help with this workflow task. Context: Using the RendererInfo class in Blazor to detect rendering context and interactivity.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/render-info/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How render-info Compares
| Feature / Agent | render-info | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Using the RendererInfo class in Blazor to detect rendering context and interactivity.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Using RendererInfo in Blazor
The `RendererInfo` class in Blazor provides runtime information about the renderer that is executing the component. It is particularly useful for detecting whether a component is running interactively or statically, and for identifying the specific rendering platform (e.g., Server, WebAssembly, WebView).
## Key Properties
### `IsInteractive`
- **Type:** `bool`
- **Description:** Indicates whether the component is currently running in an interactive render mode.
- **Usage:** Use this to conditionally render UI elements that require interactivity, such as disabling buttons or showing loading indicators during static server-side rendering (SSR) or prerendering.
```csharp
@if (!RendererInfo.IsInteractive)
{
<p>Connecting...</p>
}
else
{
<button @onclick="HandleClick">Click Me</button>
}
```
### `Name`
- **Type:** `string`
- **Description:** Returns the name of the renderer.
- **Common Values:**
- `"Static"`: Running in static server-side rendering (SSR).
- `"Server"`: Running in Interactive Server mode (SignalR).
- `"WebAssembly"`: Running in Interactive WebAssembly mode.
- `"WebView"`: Running in a Blazor Hybrid application (MAUI, WPF, WinForms).
```csharp
<p>Current Render Mode: @RendererInfo.Name</p>
```
## Common Scenarios
### 1. Disabling Inputs During Prerendering
When a component is prerendered on the server, event handlers (like `@onclick`) are not active. You can use `RendererInfo.IsInteractive` to disable inputs until the interactive runtime takes over.
```razor
<button @onclick="Submit" disabled="@(!RendererInfo.IsInteractive)">
Submit
</button>
```
### 2. Rendering Different Content for Static vs. Interactive
You might want to show a simple HTML form for static SSR and a rich, interactive component for interactive modes.
```razor
@if (RendererInfo.Name == "Static")
{
<form action="/search" method="get">
<input name="q" />
<button type="submit">Search</button>
</form>
}
else
{
<SearchComponent />
}
```
## Related Concepts
- **`AssignedRenderMode`**: A property on `ComponentBase` that tells you which render mode was assigned to the component (e.g., `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`). Note that `AssignedRenderMode` might be `null` during static rendering.
## Important Notes
- `RendererInfo` is available in .NET 8.0 and later.
- It is a static class, so you can access it directly in your Razor markup or C# code without injection.Related Skills
render-automation
Automate Render tasks via Rube MCP (Composio): services, deployments, projects. Always search tools first for current schemas.
remotion-render
Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video
agentdb-reinforcement-learning-training
Train AI agents using AgentDB's 9 reinforcement learning algorithms including Q-Learning, DQN, PPO, and Actor-Critic. Build self-learning agents, implement RL training loops with experience replay, and deploy optimized models to production.
mathjax-rendering
Render mathematical formulas in Obsidian using LaTeX/MathJax syntax. Use when writing equations, matrices, integrals, summations, or any mathematical notation in Obsidian notes.
information-security-manager-iso27001
Senior Information Security Manager specializing in ISO 27001 and ISO 27002 implementation for HealthTech and MedTech companies. Provides ISMS implementation, cybersecurity risk assessment, security controls management, and compliance oversight. Use for ISMS design, security risk assessments, control implementation, and ISO 27001 certification activities.
baoyu-infographic
Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".
azure-quotas
Check/manage Azure quotas and usage across providers. For deployment planning, capacity validation, region selection. WHEN: "check quotas", "service limits", "current usage", "request quota increase", "quota exceeded", "validate capacity", "regional availability", "provisioning limits", "vCPU limit", "how many vCPUs available in my subscription".
raindrop-io
Manage Raindrop.io bookmarks with AI assistance. Save and organize bookmarks, search your collection, manage reading lists, and organize research materials. Use when working with bookmarks, web research, reading lists, or when user mentions Raindrop.io.
zlibrary-to-notebooklm
自动从 Z-Library 下载书籍并上传到 Google NotebookLM。支持 PDF/EPUB 格式，自动转换，一键创建知识库。
discover-skills
当你发现当前可用的技能都不够合适（或用户明确要求你寻找技能）时使用。本技能会基于任务目标和约束，给出一份精简的候选技能清单，帮助你选出最适配当前任务的技能。
web-performance-seo
Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.
project-to-obsidian
将代码项目转换为 Obsidian 知识库。当用户提到 obsidian、项目文档、知识库、分析项目、转换项目 时激活。 【激活后必须执行】： 1. 先完整阅读本 SKILL.md 文件 2. 理解 AI 写入规则（默认到 00_Inbox/AI/、追加式、统一 Schema） 3. 执行 STEP 0: 使用 AskUserQuestion 询问用户确认 4. 用户确认后才开始 STEP 1 项目扫描 5. 严格按 STEP 0 → 1 → 2 → 3 → 4 顺序执行 【禁止行为】： - 禁止不读 SKILL.md 就开始分析项目 - 禁止跳过 STEP 0 用户确认 - 禁止直接在 30_Resources 创建（先到 00_Inbox/AI/） - 禁止自作主张决定输出位置