Prompts for building responsive layouts, interactive components, animations, and client-side features.
Build a responsive admin dashboard layout with a collapsible sidebar navigation, a top header bar with search and user avatar, and a main content area that displays a grid of stat cards. Use CSS Grid for the overall layout and Flexbox for component alignment. The sidebar should collapse to icons only on tablet and hide behind a hamburger menu on mobile. Use semantic HTML5 elements throughout.
Create a multi-step registration form with client-side validation. Include fields for personal info (name, email, phone), account setup (username, password with strength meter), and preferences (checkboxes, radio buttons, select dropdowns). Each step should validate before allowing progression. Use ARIA labels, live error regions, focus management on step transitions, and keyboard navigation. Style with a clean, modern look using CSS custom properties.
Build a horizontal card carousel component that supports touch swipe gestures on mobile, keyboard arrow navigation, and click/drag on desktop. Cards should snap into position with smooth CSS transitions. Include pagination dots and previous/next arrow buttons. The carousel should be responsive — show 3 cards on desktop, 2 on tablet, 1 on mobile. Use no external libraries, only vanilla JavaScript and CSS transforms.
Implement a complete dark/light mode system using CSS custom properties. Create a toggle button that switches themes with a smooth crossfade transition. Persist the user's preference in localStorage and respect the system's prefers-color-scheme on first visit. Define a full color palette for both themes including background, surface, text, accent, border, and shadow values. Ensure all interactive elements have appropriate hover and focus states in both themes.
Build an infinite scroll content feed that loads items as the user scrolls down. Use the Intersection Observer API to detect when the user approaches the bottom of the list. Display a loading skeleton placeholder while new items are being fetched. Include a "Back to top" floating button that appears after scrolling past the first viewport. Handle edge cases: empty states, error states with retry, and end-of-content messaging. Implement smooth scroll restoration on navigation.
Create a data table component with sortable columns, text search filtering, pagination controls, and row selection with checkboxes. Clicking a column header should toggle between ascending, descending, and unsorted states with visual indicators. The search input should debounce and highlight matching text in cells. Pagination should show page numbers with ellipsis for large datasets. Include a bulk actions toolbar that appears when rows are selected. Make the table horizontally scrollable on small screens.
Design a set of 8 button variants with polished micro-interactions: primary (ripple effect on click), secondary (border draw-in on hover), ghost (background fade), danger (shake animation for destructive confirm), loading (spinner replacing text with smooth transition), success (checkmark morph after action), icon button (scale + rotate on hover), and toggle (sliding background with state change). Use CSS animations and minimal JavaScript. Each button should have accessible focus-visible outlines.