Frontend Engineering

Core components, design systems, tokens, forms, animations, and world-class brand design specs.

Scenarios 16Skill 30Design 114Collections —

Filter Scenarios:All Components Design Systems Design Tokens Forms & Data Entry Developer Experience Landing Page Animations Accessibility Media & Assets Tech Giants Developer Tools AI Startups Finance & Crypto Consumer Brands Luxury & Automotive SaaS & Productivity

Sort:

Latest Updates A-Z

Grid Table

Design

Figma

When to use:Apply Figma's design language to your project for a polished, brand-consistent UI.

Light ModeMonochromeBrand+2

@awesome-design-md·2026-08-12

View Tokens

Design

Coinbase

When to use:Apply Coinbase's design language to your project for a polished, brand-consistent UI.

Light ModeBlue

Design

IBM

When to use:Apply IBM's design language to your project for a polished, brand-consistent UI.

Light ModeBlue

Design

Rolex

When to use:Apply Rolex's design language to your project for a polished, brand-consistent UI.

Light ModeDark Mode

Design

DES-1104 — Navigation Shell

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

NavigationShell

@@skillhub_curation·2026-07-08

Design

Grafana

When to use:Apply Grafana's design language to your project for a polished, brand-consistent UI.

Dark ModeOrange

Design

Sentry-Inspired

When to use:Apply Sentry's design language to your project for a polished, brand-consistent UI.

Light ModeBrand

Design

Neo-Brutalist Web System

When to use:Agency portfolios, creative tools, and brands that want a loud, unapologetic presence.

BrutalistBoldCreative

Design

Mistral AI

When to use:Apply Mistral AI's design language to your project for a polished, brand-consistent UI.

Light ModeRed

Design

The Verge

When to use:Apply The Verge's design language to your project for a polished, brand-consistent UI.

BrandDesign Tokenstheverge

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

Spotify

When to use:Apply Spotify's design language to your project for a polished, brand-consistent UI.

BrandDesign Tokensspotify

Skill

Make Interfaces Feel Better

When to use:Use when building UI components, reviewing frontend code, or when a UI feels off, flat, generic, cramped, jumpy, or unfinished. Supports quick and full review modes.

UXDesignAnimation

Design

Resend

When to use:Apply Resend's design language to your project for a polished, brand-consistent UI.

Dark ModePurpleBrand

Design

PostHog

When to use:Apply PostHog's design language to your project for a polished, brand-consistent UI.

Light ModeRedBrand

Skill

Checkout Flow Builder

When to use:Building a complete checkout experience — shipping form, payment collection, order review, and confirmation.

ReactE-CommerceForms

Skill

File Upload Manager

When to use:Adding file upload to any form or dashboard — document portals, media libraries, onboarding flows, or CMS backends.

ReactMedia & AssetsForms

144 resources foundPage 5 of 8