Toolverse
All skills
Frontend

add-template

by TonnyWong1052

Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include \

Installation

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

Installation

Quick info

Author
TonnyWong1052
Category
Frontend
GitHub repo

About this skill

Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include \

How to use

  1. Przygotuj dane szablonu: określ kategorię (visual, core, retro, interaction, layout), ID rodziny (np. grain, glassmorphism), unikalny ID szablonu oraz pełny kod HTML i CSS. Opcjonalnie dodaj tytuł w języku chińskim i angielskim.

  2. Wyzwól skill słowami "add template", "create style template", "add new template" lub podaj kod HTML nowego stylu – system automatycznie rozpozna, że chcesz dodać szablon.

  3. Przekaż wszystkie wymagane parametry: category, familyId, templateId, htmlContent, cssContent. Skill użyje ich do utworzenia struktury katalogów i plików w projekcie.

  4. Skill wygeneruje nowy szablon i automatycznie zarejestruje go na stronie podglądu. Domyślnie nowy szablon będzie wyświetlany jako pierwszy na liście.

  5. Jeśli chcesz, aby szablon pojawił się na końcu listy zamiast na początku, ustaw parametr setAsDefault na false przed uruchomieniem.

  6. Sprawdź stronę podglądu – nowy szablon powinien być widoczny i gotowy do użytku.

Related skills

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

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

better-icons

by better-auth

Use when working with icons in any project. Provides CLI for searching 200+ icon libraries (Iconify) and retrieving SVGs. Commands: `better-icons search u003cqueryu003e` to find icons, `better-icons get u003cidu003e` to get SVG. Also available as MCP server for AI agents.

Frontend
2037

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

interactive-dashboard-builder

by anthropics

Build self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive reports, or generating shareable HTML files with charts and filters that work without a server.

Frontend
2298

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135