メニュー
Syncfusion Blazor component library with DataGrid, Charts, Scheduler, PDF, and 80+ components
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | syncfusion-blazor |
| description | Syncfusion Blazor component library with DataGrid, Charts, Scheduler, PDF, and 80+ components |
| allowed-tools | ["Read","Write","Edit","Grep"] |
| triggers | ["syncfusion","sfgrid","blazor grid","syncfusion chart","blazor scheduler","syncfusion component","essential ui kit"] |
dotnet add package Syncfusion.Blazor.Themes
dotnet add package Syncfusion.Blazor.Core
# Add specific component packages as needed:
dotnet add package Syncfusion.Blazor.Grid
dotnet add package Syncfusion.Blazor.Charts
dotnet add package Syncfusion.Blazor.Schedule
dotnet add package Syncfusion.Blazor.RichTextEditor
dotnet add package Syncfusion.Blazor.PdfViewer
dotnet add package Syncfusion.Blazor.Inputs
dotnet add package Syncfusion.Blazor.Navigations
// Program.cs
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(
builder.Configuration["Syncfusion:LicenseKey"]);
builder.Services.AddSyncfusionBlazor();
@* _Imports.razor *@
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Charts
<!-- Theme in App.razor -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<SfGrid DataSource="@_orders" AllowPaging="true" AllowSorting="true"
AllowFiltering="true" AllowGrouping="true"
Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Search", "ExcelExport" })">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"
Mode="EditMode.Dialog" />
<GridPageSettings PageSize="25" PageSizes="true" />
<GridFilterSettings Type="FilterType.Excel" />
<GridSelectionSettings Type="SelectionType.Multiple" />
<GridEvents OnActionComplete="ActionComplete" TValue="OrderDto"
OnToolbarClick="ToolbarClick" />
<GridColumns>
<GridColumn Field="@nameof(OrderDto.Id)" HeaderText="Order #" Width="100"
IsPrimaryKey="true" />
<GridColumn Field="@nameof(OrderDto.CustomerName)" HeaderText="Customer" Width="200" />
<GridColumn Field="@nameof(OrderDto.OrderDate)" HeaderText="Date" Width="140"
Format="d" Type="ColumnType.Date" />
<GridColumn Field="@nameof(OrderDto.Total)" HeaderText="Total" Width="120"
Format="C2" TextAlign="TextAlign.Right" />
<GridColumn Field="@nameof(OrderDto.Status)" HeaderText="Status" Width="130">
<Template>
@{
var order = (context as OrderDto)!;
<SfChip>
<ChipItems>
<ChipItem Text="@order.Status"
CssClass="@GetStatusClass(order.Status)" />
</ChipItems>
</SfChip>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
<SfGrid TValue="OrderDto" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<SfDataManager Url="/api/orders" Adaptor="Adaptors.WebApiAdaptor" />
</SfGrid>
<SfChart Title="Monthly Revenue">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartPrimaryYAxis LabelFormat="C0" />
<ChartSeriesCollection>
<ChartSeries DataSource="@_revenueData" XName="Month" YName="Revenue"
Type="ChartSeriesType.Column" Fill="#4e73df" />
<ChartSeries DataSource="@_revenueData" XName="Month" YName="Target"
Type="ChartSeriesType.Line" Fill="#e74a3b" Width="2" />
</ChartSeriesCollection>
<ChartTooltipSettings Enable="true" />
<ChartLegendSettings Visible="true" />
</SfChart>
<SfSchedule TValue="AppointmentDto" Height="650px" SelectedDate="@DateTime.Today">
<ScheduleViews>
<ScheduleView Option="View.Day" />
<ScheduleView Option="View.Week" />
<ScheduleView Option="View.Month" />
<ScheduleView Option="View.Agenda" />
</ScheduleViews>
<ScheduleEventSettings DataSource="@_appointments" />
<ScheduleEvents OnActionComplete="OnScheduleAction" TValue="AppointmentDto" />
</SfSchedule>
Pre-built layout blocks: https://blazor.syncfusion.com/essential-ui-kit/blocks
Categories: Grid layouts, login pages, dashboards, pricing tables, profile cards, e-commerce, CRM
@* Example: Use grid block for responsive layout *@
<SfGrid DataSource="@_data">
@* Configured per Essential UI Kit block pattern *@
</SfGrid>
Built-in themes: bootstrap5, material3, fluent2, tailwind, fabric, highcontrast
Custom theme: Use ThemeStudio at https://blazor.syncfusion.com/themestudio/
// NEVER hardcode! Use one of:
// 1. User Secrets (development)
dotnet user-secrets set "Syncfusion:LicenseKey" "your-key"
// 2. Environment variable
Environment.GetEnvironmentVariable("SYNCFUSION_LICENSE_KEY");
// 3. Azure Key Vault (production)
builder.Configuration.AddAzureKeyVault(vaultUri, credential);
AI-powered tool that generates complete Blazor UI implementations from natural language prompts. Supports React, Angular, and Blazor. Completely free - no usage limits, token caps, or charges.
#sf_blazor_ui_builder tool command in IDEVS Code, Cursor, JetBrains IDEs, Code Studio
URL: https://www.syncfusion.com/explore/agentic-ui-builder/
The official @syncfusion/blazor-assistant MCP server provides:
Configured in .mcp.json:
{
"syncfusion-blazor": {
"command": "npx",
"args": ["-y", "@syncfusion/blazor-assistant@latest"],
"env": { "SYNCFUSION_API_KEY": "${SYNCFUSION_API_KEY}" }
}
}
Use mcp__syncfusion-blazor__* tools when:
Select and coordinate multi-agent teams (topology kits, role-based squads, lifecycle, worktree isolation). Use this skill whenever launching parallel agents, designing a review board, running a debug council, scheduling an orchestrator-workers team, configuring agent tool restrictions, or deciding between solo and team execution. Triggers on: "launch a team", "parallel agents", "review board", "debug council", "architect-implementer-reviewer", "swarm", "multi-agent", "subagents for X", "team topology", "agent lifecycle".
Select and wire an agentic design pattern (reflection, prompt chaining, routing, parallelization, orchestrator-workers, evaluator-optimizer, ReAct, blackboard) into the 5-layer Claude Code stack. Use this skill whenever deciding how to structure a multi-step task, whether to spawn subagents, how to run parallel review, or when to use which pattern. Triggers on: "which pattern", "orchestrate", "parallel review", "self-review", "chain of thought", "eval-optimizer loop", "blackboard", "ReAct", "how to decompose this task".
Auto mode permission handling — classifier-based approvals, PermissionDenied hook, defer permissionDecision, and autonomy profiles for hands-off Claude Code usage
Configure Claude Code's autonomous operating mode — profile selection (conservative, balanced, aggressive, unattended-review), permission blocks, and the three gate agents (planner, verifier, reviewer). Use this skill whenever enabling autonomous mode, switching profiles, tightening permissions for production branches, or setting up unattended execution. Triggers on: "autonomy", "unattended mode", "auto-approve", "permission mode", "autonomy profile", "gates", "/cc-autonomy", "planner verifier reviewer", "let claude run on its own".
Manage Claude Code's context window — token arithmetic, /compact strategy, anchor preservation, progressive loading, session analytics. Use this skill whenever a session gets long, context approaches limits, after /compact, when deciding what to load into CLAUDE.md vs leave in references, or when analyzing session cost/token usage. Triggers on: "context full", "compact", "too many tokens", "budget", "session analytics", "save tokens", "context window", "/compact strategy".
Evidence-driven deep analysis for hard coding problems — architecture decisions, root-cause investigation, high-stakes refactor planning, performance bottleneck isolation. Use this skill whenever the user asks for "the best approach", a "deep analysis", "root cause", "principal engineer review", or runs /cc-intel. Also triggers on hard debugging questions, major architectural choices, tricky performance problems, or any task where a hypothesis tree and evidence table matter more than a fast answer.