Skills

HTML5

Semantic HTML structure for meaningful markup
ARIA and accessibility best practices
SEO-friendly markup and metadata
Accessible and user-friendly forms
Keyboard navigation and focus management
Progressive enhancement with clean fallbacks

CSS3

Flexbox & Grid layout systems
Responsive design using media queries
CSS animations and transitions
CSS custom properties (variables)
Scalable structure using BEM methodology
Performance optimization (critical CSS, lazy loading)

Tailwind

Utility-first approach for rapid UI development
Dark mode using class/media strategies
Responsive design with mobile-first utilities
Component composition patterns
Custom configuration and theming
Performance optimization (purging unused styles)

UI Components

Shadcn/ui: accessible components
Radix UI primitives and accessibility
Headless UI for unstyled components
Tailwind UI for rapid prototyping
Custom component system development
Themeable design systems
Dark mode support and transitions
Tree-shakable imports and optimization

UI Frameworks

Bootstrap framework and utility classes
React Bootstrap component integration
SCSS preprocessing and BEM methodology
Prebuilt accessible UI components
Props-driven customization in JSX
Styled Components
Material UI

JavaScript

ES6+ features and modern syntax
Async/await and promise handling
Design patterns and best practices
Closures, scope, hoisting, and execution context
Async/Await, Promises, and microtask queue
Event loop, call stack, and memory management
Design patterns (Factory, Observer, Module, Singleton)
Prototype chain and inheritance patterns
Error handling and debugging strategies
Performance optimization and memory leak prevention

TypeScript

Advanced type inference & annotations
Generics, conditional types & utility types
Mapped types and template literal types
Enums, type guards, and assertion functions
Interfaces vs types and declaration merging
React TypeScript integration
API contracts and schema validation
Compiler configuration and build optimization

React.js

Hooks (useState, useEffect, useMemo, useCallback)
Component lifecycle and optimization patterns
Context API and state management
Custom hooks and reusable logic
Performance optimizations (memo, lazy, suspense)
Error boundaries and error handling
Concurrent features (Suspense, transitions)

React Router

Nested routes & layout composition
Dynamic path parameters and search params
Auth-protected routes and guards
Code-split components and lazy loading
Navigation hooks and programmatic routing
Route-based data loading patterns

Forms & Validation

React Hook Form for performance
Zod schema validation integration
Conditional & dynamic field rendering
File upload and multi-step forms
Error handling and user feedback

State Management

Redux Toolkit for complex app state
Zustand for simple global state
React Query for server state management
Context API for component state
Performance optimization strategies
Async state handling and error management
Optimistic updates and caching strategies

TanStack Query

Query & Mutation hooks for data fetching
Automatic caching & background updates
Query invalidation and refetching
Paginated & infinite queries
Devtools integration for debugging
Optimistic updates and retries

Framer Motion

Declarative animations and transitions
Animation variants and orchestration
AnimatePresence for exit transitions
Layout animations and shared layouts
Scroll-triggered and gesture-based animations
Performance optimization for animations

Next.js

App Router & Pages Router architecture
Server-side rendering (SSR)
Static generation (SSG)
Incremental static regeneration (ISR)
API routes & middleware development
Metadata & SEO optimization
Image optimization and performance