Frontend Engineering — AI Byte

Frontend Engineering — AI Byte

Design

DES-8823 — High-Density Form

When to use:Dense data-entry screens and internal tools.

FormsDensity

@@skillhub_curation·2026-07-15

Skill

Tailwind Animation Recipes

When to use:Adding scroll-triggered reveals, hover micro-interactions, and page transitions.

TailwindAnimation

@@motion_mia·2026-08-03

Skill

Storybook Component Docs

When to use:Building a component library that needs interactive documentation and visual regression testing.

ReactDocumentationTesting

Skill

Presentation Slide Builder

When to use:Group presentations, thesis defenses, conference talks, and lecture slides.

PresentationSlidevAcademic

Skill

Skeleton Loader Generator

When to use:Replacing spinners with layout-stable skeleton loading states.

LoadingUXTailwind

Skill

Responsive Bento Grid Layout

When to use:Dashboard overviews, complex data aggregation.

CSS GridLayout

@@lin_frontend·2026-08-02

Skill

Toast Notification Center

When to use:Any app that needs non-blocking feedback — save confirmations, error alerts, undo actions.

ReactUXNotification

Design

When to use:Dense data-entry screens and internal tools.

Data TableDensity

@@skillhub_curation·2026-08-01

Skill

Search & Filter Bar

When to use:List pages that need text search plus category/tag filtering without a sidebar.

ReactUXFilter

Design

DES-1104 — Navigation Shell

When to use:App shells that need a stable primary navigation pattern.

NavigationShell

@@skillhub_curation·2026-07-08

Design

AI Chat Interface Kit

When to use:Building any LLM-powered chat or conversational interface.

AIChatDark Mode

Skill

Pagination & Infinite Scroll

When to use:Long lists, search results, activity feeds that need both traditional pagination and modern infinite scroll.

ReactUXPerformance

Design

Admin Panel Shell System

When to use:Internal tools, admin dashboards, and CMS backends.

AdminDashboardData Table

Skill

Form Validation Builder

When to use:Building any data-entry form, from login to multi-step wizards.

FormsReactValidation

Skill

Accessible Modal Dialog

When to use:Critical user interruptions, forms.

A11yReact

@@a11y_kim·2026-07-28

Skill

Data Grid Component v2.4

When to use:Ideal for displaying dense datasets where inline editing and robust sorting/filtering are required without sacrificing vertical real estate.

ReactTailwindHigh-Density

Skill

Empty State Generator

When to use:Every screen that can be empty — first-run, zero results, 404, error boundaries.

ReactUXPattern

Design

E-Commerce Product Grid

When to use:Online stores, marketplaces, and product catalogs.

E-CommerceGridCards

20 resources foundPage 1 of 2