# frontend-skills

- Author: naveed569
- Repository: umairrafeeq303-create/hackathon-II-phase-three
- Version: 20260208222912
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-08
- Source: https://github.com/umairrafeeq303-create/hackathon-II-phase-three
- Web: https://mule.run/skillshub/@@umairrafeeq303-create/hackathon-II-phase-three~frontend-skills:20260208222912

---

# Frontend Agent Skills

## 1. Next.js App Router
- App directory structure
- Page routing
- Layout components
- Loading.tsx and Error.tsx
- Server Components vs Client Components
- 'use client' directive
- Dynamic routes
- API routes
- Middleware

## 2. React Fundamentals
- Functional components
- JSX syntax
- Props and children
- State management (useState)
- Side effects (useEffect)
- Event handlers
- Conditional rendering
- List rendering with keys
- Forms and inputs
- Custom hooks

## 3. TypeScript
- Interface definitions
- Type annotations
- Props typing
- Event typing
- Generic types
- Union types
- Optional properties
- Type inference

## 4. Tailwind CSS
- Utility classes
- Responsive design (sm:, md:, lg:, xl:)
- Flexbox utilities
- Grid utilities
- Colors and backgrounds
- Spacing (margin, padding)
- Typography
- Borders and shadows
- Hover and focus states
- Custom configurations

## 5. Better Auth
- Installation and setup
- Auth configuration
- JWT plugin setup
- Session management
- useSession hook
- Login/signup handlers
- Protected routes
- Token extraction
- Logout functionality

## 6. API Integration
- fetch API
- Async/await
- HTTP methods
- Headers (Authorization)
- Request body (JSON)
- Response parsing
- Error handling
- Loading states

## 7. Form Handling
- Controlled inputs
- Form state management
- onChange handlers
- onSubmit handlers
- Client-side validation
- Error messages
- Reset forms
- Disabled states during submission

## 8. State Management
- Component state (useState)
- Form state
- Loading state
- Error state
- Global state (Context API optional)
- Derived state

## 9. UI/UX Patterns
- Loading spinners
- Error boundaries
- Toast notifications
- Modal dialogs
- Confirmation dialogs
- Empty states
- Skeleton screens
- Success messages

## 10. Vercel Deployment
- Vercel CLI
- GitHub integration
- Environment variables
- Domain configuration
- Build settings
- Preview deployments
- Production deployments
- Deployment logs

## 11. Responsive Design
- Mobile-first approach
- Breakpoint usage
- Touch-friendly UI
- Hamburger menu
- Responsive grid/flex
- Media queries (optional)

## 12. Accessibility
- Semantic HTML
- ARIA labels
- Keyboard navigation
- Focus management
- Alt text for images
- Form labels
- Color contrast