Reference guide for Forms controls — classes inheriting from FrameworkElement. Load this when working on Button, CheckBox, ListBox, ComboBox, TextBox, ScrollViewer, or any class in Gum.Forms.Controls (or FlatRedBall.Forms.Controls). Also load when working on FrameworkElement itself, the Visual/InteractiveGue relationship, state machines, DefaultVisuals, or ReactToVisualChanged.
Reference guide for how Gum applies variables and sets properties on renderables. Load this when working on ApplyState, SetProperty, SetVariablesRecursively, CustomSetPropertyOnRenderable, font loading, IsAllLayoutSuspended, or isFontDirty.
Reference guide for Gum's runtime data binding system — BindingContext, SetBinding on both GraphicalUiElement visuals and FrameworkElement Forms controls, binding types (string, Binding object, lambda), and how the two systems differ.
Provides a step-by-step workflow for creating Blazor components that emulate ASP.NET Web Forms controls in the BlazorWebFormsComponents library. Covers base class selection (BaseWebFormsComponent, BaseStyledComponent, DataBoundComponent, BaseValidator), Web Forms property and event naming conventions, Playwright integration testing setup, and the complete checklist from component creation through documentation and navigation updates. Use when implementing a new BWFC component, choosing the correct base class for a control type, adding unit or integration tests, or extending an existing component with new Web Forms property support.
Upgrades a Blazor component from BaseWebFormsComponent to BaseStyledComponent to gain IStyle properties like BackColor, CssClass, Font, and dimensions. Walks through base class changes, @inherits directives, style application, and duplicate property removal. Use when a component needs inline styling support, adding CSS class parameters, or migrating Web Forms style attributes to Blazor components.
Adds dual EventCallback parameter aliases (bare and On-prefixed) to Blazor components for Web Forms migration compatibility. Guides creation of EventArgs classes, coalescing invocation patterns, and HasDelegate guard checks. Use when adding new event parameters to a BWFC component, implementing Web Forms event naming conventions, or migrating ASP.NET Web Forms event handlers to Blazor.
Provides workaround patterns for Blazor Server enhanced navigation silently stripping onclick attributes from button elements, causing form submissions to fail. Covers anchor-based form submission for HTTP POST endpoints and EditForm for in-component handling. Use when a form submit button does nothing on click, when building auth forms that POST to minimal API endpoints, or when choosing between HTML form POST and Blazor EditForm for data entry pages.
Provides patterns for automated HTML fidelity comparison between ASP.NET Web Forms controls and their BWFC Blazor equivalents using Playwright. Covers marker-based control isolation with data-audit attributes, HTML normalization rules for stripping ViewState and naming-container IDs, and control classification by audit feasibility (Clean, Structural, JS-coupled, Divergent). Use when validating migration output fidelity, setting up Playwright-based HTML comparison tests, building an intentional divergence registry, or auditing whether migrated Blazor components render equivalent DOM structure.
Angular core patterns: standalone components, signals, inject, control flow, zoneless. Trigger: When creating Angular components, using signals, or setting up zoneless.
Angular forms: Signal Forms (experimental) and Reactive Forms. Trigger: When working with forms, validation, or form state in Angular.
Angular architecture: Scope Rule, project structure, file naming, style guide. Trigger: When structuring Angular projects or deciding where to place components.
Angular performance: NgOptimizedImage, @defer, lazy loading, SSR. Trigger: When optimizing Angular app performance, images, or lazy loading.
Implement web (Astro/Tailwind/TypeScript) changes following a plan. Invoke for web-language implementation tasks.
Implement web (Astro/Tailwind/TypeScript) changes following a plan. Invoke for web-language implementation tasks.
Advanced patterns for Regle form validation, including arrays, async, server errors, global config, variants, scoped validation, and schema integration.
TypeScript support for type-safe Regle form validation, rules, and component props.
React/TypeScript component development guidelines for Gemini-Subtitle-Pro. Use when creating components, pages, modals, forms, or working with TailwindCSS, hooks, and React 19 patterns. Covers component architecture, styling with Tailwind, state management, performance optimization, and accessibility.
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
This skill MUST be used whenever the task involves UI development, renderer code changes, adding or modifying components, creating modals or dialogs, working with CSS styles, building new UI features, or touching any file in src/renderer/. Use this skill when the user asks to "add a button", "create a modal", "add a dropdown", "update the sidebar", "style a component", "add a new UI feature", or any renderer/frontend work.
Resolve on-screen seedit DOM elements to React source files, line numbers, component names, and ownership stacks using the app's dev-only element-source helpers and playwright-cli. Use when Codex needs to inspect a page element, map a snapshot ref to source code, confirm which component rendered a node, or follow up after $profile-browsing finds a rerender hotspot and needs file-level attribution.
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
