Toolverse
All skills

tutorial-engineer

by sickn33

Creates step-by-step tutorials and educational content from code. Transforms complex concepts into progressive learning experiences with hands-on examples. Use PROACTIVELY for onboarding guides, feature tutorials, or concept explanations.

Installation

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

Installation

Quick info

Author
sickn33
Category
Frontend
Views
17

About this skill

Creates step-by-step tutorials and educational content from code. Transforms complex concepts into progressive learning experiences with hands-on examples. Use PROACTIVELY for onboarding guides, feature tutorials, or concept explanations.

How to use

  1. Określ cel edukacyjny – czy chcesz stworzyć przewodnik onboardingowy dla nowego dewelopera, wyjaśnić złożoną funkcję, czy przygotować materiał do kursu online. Zdefiniuj, jakie koncepty chcesz nauczyć i dla kogo (początkujący, średniozaawansowani, eksperccy).

  2. Przygotuj materiał źródłowy – dostarcz kod, bibliotekę lub funkcję, którą chcesz przekształcić w tutorial. Dołącz informacje o kontekście: co robi ten kod, jakie problemy rozwiązuje, jakie są wymagania wstępne.

  3. Aktywuj skill i wskaż typ materiału – powiedz, czy potrzebujesz przewodnika krok po kroku, dokumentacji nauczającej (nie tylko referencyjnej), czy materiałów do warsztatu. Unikaj użycia tego skilla do tworzenia czystych dokumentów API – do tego służy inny tool.

  4. Skill zastosuje praktyki pedagogiczne – będzie rozkładać treść na małe, zrozumiałe kroki, dodawać praktyczne ćwiczenia, przewidywać częste błędy i dostosowywać styl do różnych sposobów uczenia się (wizualny, tekstowy, praktyczny).

  5. Zweryfikuj wynik – sprawdź, czy każdy krok jest jasny, czy ćwiczenia rzeczywiście utrwalają wiedzę, czy kolejność nauki ma sens. Jeśli potrzebujesz szczegółowych przykładów implementacji, otwórz plik resources/implementation-playbook.md z repozytorium.

  6. Dostosuj i publikuj – edytuj tutorial do swoich potrzeb, dodaj własne przykłady lub kontekst branżowy, a następnie opublikuj na blogu, w dokumentacji, na platformie edukacyjnej lub wyślij zespołowi.

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

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

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

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209