Toolverse
All skills
Frontend

epic-ui-guidelines

by epicweb-dev

Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack

Installation

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

Installation

Quick info

Author
epicweb-dev
Category
Frontend
Views
8
GitHub repo

About this skill

Guide on UI/UX guidelines, accessibility, and component usage for Epic Stack

How to use

  1. Zainstaluj skill epic-ui-guidelines w swoim projekcie opartym na Epic Stack, aby uzyskać dostęp do wytycznych projektowania interfejsów użytkownika.

  2. Zapoznaj się z filozofią UI Epic Web: pamiętaj, że oprogramowanie buduje się dla ludzi, a dostępność nie jest opcjonalna — to fundament dobrego designu. Każda decyzja projektowa powinna priorytetyzować doświadczenie użytkownika ponad wygodę techniczną.

  3. Stosuj semantyczny HTML w swoich komponentach — używaj odpowiednich tagów HTML (form, label, button, input) zamiast div-ów, aby zapewnić prawidłową strukturę i dostępność dla czytników ekranu.

  4. Dodawaj etykiety do wszystkich pól formularza z atrybutem htmlFor połączonym z ID inputu, dołączaj pomocne placeholder'y i wyświetlaj jasne komunikaty błędów — to pomaga wszystkim użytkownikom, nie tylko osobom ze specjalnymi potrzebami.

  5. Implementuj ARIA atrybuty tam, gdzie semantyczny HTML nie wystarczy — używaj aria-label, aria-describedby i innych atrybutów do opisania funkcjonalności dla użytkowników technologii asystujących.

  6. Twórz responsywne layouty z Tailwind CSS i Radix UI, pamiętając o nawigacji klawiaturą, kontraście kolorów i testowaniu interfejsu z rzeczywistymi użytkownikami o różnych możliwościach.

Related skills

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

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

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

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

apple-reminders

by openclaw

Manage Apple Reminders via the `remindctl` CLI on macOS (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.

Frontend
2085

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