skills.rest
curiosity-ai
curiosity-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tesserae

Build web UIs in C# with Tesserae components compiled to JavaScript by Transpose.

53|8|Updated Oct 24, 2019
Search Tags:#csharp#layout#ui components#web ui#fluent api#transpose#tesserae
One-click install
npx skills add https://github.com/curiosity-ai/tesserae --skill tesserae-curiosity-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tesserae
Source: https://github.com/curiosity-ai/tesserae/tree/main/Tesserae/skills
Command: npx skills add https://github.com/curiosity-ai/tesserae --skill tesserae-curiosity-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing browser UIs in C# requires a component model, layout system, and API knowledge that plain HTML/JS does not provide; this Skill supplies the Tesserae toolkit's component factories, fluent configuration patterns, and per-component API references so generated code compiles correctly under the Transpose C#-to-JavaScript compiler. ## Core Features & Use Cases - Component factories and fluent configuration: Create buttons, inputs, dialogs, charts, and lists via UI. factory methods and chain fluent modifiers like .Primary(), .OnClick(...), and .Disabled(). - Layout with Stack and Grid: Compose pages using flexbox Stack/HStack/VStack and CSS-Grid Grid containers, plus sizing, spacing, and alignment extensions (.W(), .Grow(), .Margin()) that work on any IComponent. - Per-component reference library: Over a hundred references/<slug>.md files document each component's factory signature, key methods, and examples, covering inputs, navigation, charts, overlays, chat, and theming. - Use Case: When asked to build a settings page in a Tesserae app, the Skill produces a VStack containing Toggle, Dropdown, and Button components with correct fluent calls, and consults references/dropdown.md for exact API details. ## Quick Start Use the tesserae skill to build a C# settings panel with a toggle, a dropdown, and a primary save button laid out in a vertical stack.

Frequently Asked Questions about tesserae

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a web UI in C# with Tesserae?▼

Add `using static Tesserae.UI;` to access factory methods like `Button()`, `Stack()`, and `TextBlock()`, then configure components with fluent methods and mount the root with `MountToBody(ui)`. The Transpose compiler translates the C# to JavaScript that runs in the browser.

How do I lay out components with Stack and Grid in Tesserae?▼

Use `Stack` (or `HStack`/`VStack`) for one-axis flexbox flow with `.Gap()`, `.AlignItemsCenter()`, and `.Children(...)`. Use `Grid` for two-axis layouts with `.Columns(...)`, `.Rows(...)`, and `.GridColumn(...)` placement on children.

Why do nested types like Float.Position fail to compile in Tesserae?▼

`using static Tesserae.UI;` imports factory methods that hide same-named types, causing CS0119 errors. Qualify nested types with the full namespace, for example `Tesserae.Float.Position.TopLeft` or `Tesserae.Dialog.Response.Yes`.

Does Tesserae support dark mode and custom theme colors?▼

Yes. Call `Theme.Light()` or `Theme.Dark()` to switch modes, and use `Theme.SetPrimary`, `Theme.SetBackground`, and `Theme.SetHighlight` with `Color` values to regenerate the CSS variables for both light and dark themes.

How do I find the API reference for a specific Tesserae component?▼

Convert the component name to lowercase kebab-case and open `references/<slug>.md`, for example `DetailsList` maps to `references/details-list.md`. Each reference lists the factory signature, key fluent methods, and a working example.

Related Skills

Explore More Software Engineering Skills→
microcksmicrocks
5

dotnet-package

Manage NuGet packages in .NET projects via dotnet CLI commands.

Official
Advanced
codewithmukeshcodewithmukesh
692

build-fix

Iterates dotnet build and test runs to fix compiler errors and failing tests autonomously.

Official
Advanced
FortiumPartnersFortiumPartners

blazor-framework

Develop Blazor Server and WebAssembly apps with .NET 8+, Fluent UI, and SignalR.

Official
Advanced
GoogleChromeGoogleChrome
926

cpp-on-the-web

Compile C and C++ code to WebAssembly with Emscripten for browser execution.

Official
Intermediate