Base Layer

Default web app and website implementation target for Dhiraj projects.

Component-driven web UI and agent-generated reusable components.

Every reusable component API and agent-generated interface.

Default styling system for speed, tokens, and component portability.

Accessible dialogs, sheets, tabs, tooltips, popovers, and form surfaces.

React UI animations, gestures, layout transitions, and simple entry/exit effects.

Establishing thresholds for JS bundle size, LCP (<2.5s), and INP (<200ms).

Defining layout tiers: 480px (Mobile), 768px (Tablet), 1024px (Laptop), 1280px (Desktop), 1536px (Ultra-Wide).

Complex SaaS products and admin dashboards with 6+ primary sections.

Preventing layout shift during async data fetching (Suspense).

Every project, specifically focusing on focus-visible, keyboard nav, and ARIA landmarks.

Responsive layouts requiring robust, mathematical type scaling.

Pro-tools, dashboards, and data-heavy SaaS products (Linear/Stripe style).

High-performance pro-tools and complex dashboards.

Cookie-based persistence for pure RSC/App Router; next-themes for simple abstraction.

next/font for automatic self-hosting, size-adjust, and variable font support.

Production dashboards requiring full control over charts and KPI cards.

Shared Element Transitions (e.g., card-to-hero) in Next.js 15.

Building production-ready components that need to be customized beyond simple props.

ScrollTrigger work, SVG/path motion, complex timelines, creative websites, advanced text reveals.

Open-source, self-hosted or serverless native auth for 2025.

Performance-first, serverless-native data access.

Creative/marketing pages where scroll is a major narrative surface.

Memorable 3D product scenes, portfolio/brand microsites, WebGL interactions.

All non-trivial forms, settings, onboarding, signup, and checkout flows.

Visual exploration, tokens, flows, and critique before coding.

Every Dhiraj web app/site starter.

All apps/sites as the primary orientation surface.

Landing pages, product intros, portfolios, app onboarding pages.

Feature overviews, product capabilities, portfolio proof, dashboard summaries.

Auth, onboarding, settings, checkout, contact, and workflow inputs.

Confirmations, settings panels, creation flows, mobile side panels.

Non-blocking success, undo, save, sync, and background feedback.

Icon labels, lightweight contextual help, and small supplemental details.

Every data-driven component and async workflow.

Secondary navigation, legal links, contact, social proof, and persistent site metadata.

Short hero headlines, section titles, major route entrances.

Section entrance, progressive disclosure, visual hierarchy.

Narrative feature sections, side-by-side product explanations, stacked cards.

Cards, bento tiles, clickable previews.

Dialog/sheet open and close states.

Creative/marketing pages where scroll feel is part of the brand experience.

Every animated component.

Every component spec and implementation.

Every Dhiraj motion spec.

Every non-trivial animation decision.

Every final component and page decision.

Hero copy, section rhythm, scroll feel, toast behavior, and motion defaults.

Learning, fitness, creation, habit, onboarding, and progress-based products.

Logo, icon, path drawing, morphing, masks, data-viz accents.

Brand-defining scenes, premium product moments, interactive portfolio work, adding cinematic textures.

Seamlessly transitioning from immersive 3D intro to functional UI.

Adding 3D-like depth to static hero images without 3D models.

Building dashboards, SaaS interfaces, and pro-tools.

Social proof strips, logo clouds, announcement banners.

Loading states for cards, lists, and content blocks.

Never.

Never as a base default.

Standardizing tactile feel. Snap: {300, 30}, Bouncy: {200, 10}, Natural: {100, 30}.

Buttons, bento tiles, and hero CTAs that deserve higher engagement.

Brand-defining WebGL surfaces with mouse-reactive ripple/distortion.

Creating depth via background hex tiers: Base (#08), Raised (#0F), Overlay (#16).

Featured bento blocks, promo grids, or single-product display cards.

SaaS card grids, bento sections, or primary form layouts.

Sub-navigation bars, settings tabs, toggle controls, or filter buttons.

Mobile layout page drawers, interactive actions, or settings dialog overlays.

Portfolio showcases, designer before/after mockups, or cosmetic comparisons.

FAQ sections, collapsible sidebar submenus, or dense form detail sections.