Toolverse
All skills

component-development

by FritzAndFriends

Guidance for creating Blazor components that emulate ASP.NET Web Forms controls. Use this when implementing new components or extending existing ones in the BlazorWebFormsComponents library.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
2

About this skill

Guidance for creating Blazor components that emulate ASP.NET Web Forms controls. Use this when implementing new components or extending existing ones in the BlazorWebFormsComponents library.

How to use

  1. Zidentyfikuj kontrolkę Web Forms z przestrzeni nazw System.Web.UI.WebControls, którą chcesz emulować w Blazorze — ta umiejętność poprowadzi Cię przez cały proces adaptacji.

  2. Zbadaj oczekiwane wyjście HTML, korzystając z dołączonego przewodnika HTML Output Matching Guide, aby upewnić się, że Twój komponent będzie renderować identyczne znaczniki jak oryginalna kontrolka Web Forms.

  3. Utwórz pliki komponentu w strukturze projektu: plik .razor z szablonem oraz plik .razor.cs z logiką, a następnie wybierz odpowiednią klasę bazową — BaseWebFormsComponent dla komponentów podstawowych, BaseStyledComponent jeśli potrzebujesz stylowania, DataBoundComponent dla komponentów powiązanych z danymi, lub BaseValidator dla walidatorów.

  4. Dodaj testy jednostkowe w katalogu dedykowanym komponentowi oraz stronę przykładową w folderze ControlSamples, następnie skonfiguruj testy integracyjne z użyciem Playwright w sekcji testów projektu przykładowego.

  5. Napisz dokumentację komponentu w odpowiedniej kategorii folderu docs i zaktualizuj nawigację — dodaj wpis do TreeView w pliku NavMenu.razor, aby komponent był dostępny dla użytkowników biblioteki.

  6. Przejrzyj pełną listę kontrolną zawartą w umiejętności, aby upewnić się, że wszystkie kroki — od implementacji, przez konwencje nazewnictwa Web Forms, aż po dokumentację — zostały wykonane zgodnie ze standardami BlazorWebFormsComponents.

Related skills

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

dev-browser

by SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include \

Frontend
38151

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126

landing-page-guide-v2

by bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements

Frontend
3486

mermaid-gen

by vladm3105

Generate syntactically correct Mermaid diagrams for technical documentation

Frontend
23124

markitdown

by K-Dense-AI

Convert various file formats (PDF, Office documents, images, audio, web content, structured data) to Markdown optimized for LLM processing. Use when converting documents to markdown, extracting text from PDFs/Office files, transcribing audio, performing OCR on images, extracting

Frontend
75173