Toolverse
All skills
Frontend

registry-component-patterns

by TheOrcDev

Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.

Installation

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

Installation

Quick info

Author
TheOrcDev
Category
Frontend
Views
2
GitHub repo

About this skill

Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.

How to use

  1. Przygotuj nowy komponent lub blok w formacie TypeScript/TSX. Komponent powinien być umieszczony w katalogu components/ui/8bit/ wraz z plikami stylów.

  2. Utwórz wpis w pliku registry.json dla swojego komponentu. Ustaw pole "name" na identyfikator komponentu, "type" na "registry:component" dla pojedynczych komponentów lub "registry:block" dla gotowych bloków interfejsu.

  3. Dodaj pole "title" z czytelną nazwą komponentu oraz "description" z krótkim opisem jego funkcji. Dla bloków możesz również dodać pole "categories" do kategoryzacji (np. "gaming").

  4. W sekcji "files" wymień wszystkie pliki komponentu, w tym plik TypeScript oraz wymagany plik retro.css ze stylami. Każdy plik powinien mieć określoną ścieżkę źródłową (path) i docelową (target).

  5. W polu "registryDependencies" wymień komponenty, od których zależy Twój nowy komponent (np. jeśli blok chapter-intro korzysta z card, dodaj "card" do listy).

  6. Po zarejestrowaniu komponentu użytkownicy będą mogli go zainstalować komendą shadcn add @8bitcn/[nazwa-komponentu], a wszystkie zależności i pliki stylów zostaną automatycznie pobrane.

Related skills

brainstorming

by obra

Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes

Frontend
49170

tailwind-design-system

by wshobson

Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Frontend
2676

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

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

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

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139