All Snippets

Explore, copy, and test front-end patterns in plain English.

All Snippets

Tailwind CSS v4 Quick Setup

Import Tailwind into your main CSS entry point using modern PostCSS syntax.

SetupTailwindCSS
Installation

Vite Production Build Script

Standard command sequence for type-checking and bundling a single-page app.

CLIViteBuild
Installation

Next.js App Router Package Initialization

Fast bootstrap command for installing Next.js with TypeScript and Tailwind.

Next.jsSetupCLI
CLI

Git Clean Branch Pruning

Deletes local branches that have already been merged or deleted remotely.

GitCLIWorkflow
CLI

Find and Kill Port Process

Instantly frees up occupied ports like 3000 or 5173 on local machines.

CLINodeUtility
HTML + CSS

Glassmorphic Card

Responsive container with backdrop blur styling and custom borders.

CSSGlassmorphismUI
HTML + CSS

Modern CSS Grid Holy Grail

Responsive layout wrapper utilizing auto-fit grid columns.

CSSGridLayout
HTML + CSS

Custom CSS Scrollbar

Sleek, low-profile scrollbar styled to match dark and minimalist themes.

CSSUIStyling
Javascript

Debounce Utility

High-performance input handler to optimize search queries and resize events.

JavaScriptPerformanceUtilities
Javascript

Local Storage Safe Wrapper

Error-handled getter and setter for persistent browser storage.

JavaScriptStorageHelpers
Javascript

Deep Clone Object Helper

Clean native approach to cloning complex nested JavaScript objects.

JavaScriptObjectsUtilities
React

Interactive Theme Toggle

Three-mode state switcher storing preferences in local storage[cite: 3].

ReactHooksState
React

Click Outside Custom Hook

Detects clicks outside a specified DOM reference element.

ReactHooksDOM
React

Async Data Fetching Wrapper

Standard loading and error state handler for client-side API requests.

ReactAsyncAPI
Vue

Reactive Counter Composable

Composition API setup pattern for managing stateful components.

VueComposition APIState
Vue

Simple Event Bus Pattern

Lightweight publish/subscribe pattern implementation for Vue 3 apps.

VueEventsPatterns
Astro

Frontmatter Layout Wrapper

Standard Astro page layout structure with dynamic metadata props.

AstroSSRLayout
Astro

Markdown Collection Loader

Fetches structured content collections using Astro content layer APIs.

AstroMarkdownContent
Vite

Path Alias Configuration

Vite config plugin setup for clean directory imports using @/

ViteConfigTypeScript
Next.js

Dynamic API Route Handler

Server-side route template using Next.js App Router conventions.

Next.jsAPIBackend
Next.js

Server Action Form Handler

Secure server-side mutation handling directly inside Next.js components.

Next.jsServer ActionsForms
React Native

SafeArea Container

Platform-safe container layout wrapper for mobile viewports.

MobileReact NativeLayout
React Native

Flexbox Centering Container

Quick reusable style object for centering mobile views.

MobileStylesLayout
Expo

Expo Router Stack Header Customization

Screen options configuration for navigation headers in Expo.

ExpoNavigationMobile
Python

Environment Variable Loader

Secure configuration loader using python-dotenv.

PythonSecurityConfig
Python

FastAPI Basic Endpoint

Modern high-performance asynchronous API route in Python.

PythonFastAPIBackend
Go

Basic HTTP Server Setup

Lightweight web server routing boilerplate in Go.

GoBackendServer
Rust

Struct with Vector Storage

Core Rust data structure layout for managing collections.

RustTypesMemory
Notes

Architecture Review Notes

Key considerations for component state management and modular design.

NotesArchitectureDesign
Website link lists

Design Engineering Resources

Curated list of utility documentation and inspiration sources.

LinksResourcesReference
Icon Libraries

Lucide React Integration

Standard tree-shakeable icon import pattern.

IconsLucideUI
Shortcut

VS Code Essential Keymaps

Productivity keyboard shortcuts for faster code navigation.

ShortcutsProductivityWorkflow
Ai code

Prompt Engineering Template

Structured layout for generating modular component code with AI assistants.

AIPromptsWorkflow
Glossary

Glassmorphism Definition

A design trend characterized by translucent surfaces, background blurs, and thin light borders.

GlossaryDesignTerminology