Toolverse
All skills
Frontend

create-frontend-ui

by caioniehues

Build distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI. Avoids generic AI aesthetics. Uses shadcn UI MCP for components.

Installation

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

Installation

Quick info

Author
caioniehues
Category
Frontend
Views
76
GitHub repo

About this skill

Build distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI. Avoids generic AI aesthetics. Uses shadcn UI MCP for components.

How to use

  1. Zainstaluj skill create-frontend-ui w swoim środowisku agenta (np. Claude z obsługą MCP). Upewnij się, że masz dostęp do shadcn UI MCP dla komponentów.

  2. Przed rozpoczęciem kodowania opisz swoje zadanie: jaki problem rozwiązuje interfejs, kto go będzie używać, jakie są ograniczenia techniczne (framework, dostępność, wydajność).

  3. Wybierz wyraźny kierunek estetyczny — może to być minimalizm, maksymalizm, retro-futurystyka, styl organiczny, luksusowy, brutalistyczny, art deco lub inny spójny koncept. Skill poprowadzi Cię przez analizę tego kierunku.

  4. Zdefiniuj jedną rzecz, którą użytkownik zapamiętać — element, który wyróżni interfejs. To może być typografia, kolorystyka, animacja lub układ, ale musi być celowy i konsekwentny.

  5. Skill generuje kod HTML/CSS, React lub komponenty shadcn UI z uwzględnieniem wybranego kierunku designu. Unika generycznych rozwiązań (domyślne fonty, szare palety, bezcharakterowe kolory).

  6. Przejrzyj wygenerowany kod — skill kładzie nacisk na precyzję wykonania i detale estetyczne, więc możesz go używać bezpośrednio w produkcji lub jako punkt wyjścia do dalszych modyfikacji.

Related skills

google-official-seo-guide

by littleben

Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation

Frontend
101196

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

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

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

domain-name-brainstormer

by ComposioHQ

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

Frontend
21116

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