skills.rest
immuhammadfurqan
immuhammadfurqanCOMMUNITY
Explore all skills by this author →
GitHub

frontend_development

Creates reusable Ant Design Pro and Element-UI components for faster, standardized layouts and interactions in Chinese admin systems.

8|Updated Feb 5, 2026
Search Tags:#typescript#theming#performance#accessibility#nextjs#tailwind#server-components
One-click install
npx skills add https://github.com/immuhammadfurqan/AWS_NOVA_HACKATHON --skill frontend-development-immuhammadfurqan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend_development
Source: https://github.com/immuhammadfurqan/AWS_NOVA_HACKATHON/tree/main/.agent/skills/frontend_development
Command: npx skills add https://github.com/immuhammadfurqan/AWS_NOVA_HACKATHON --skill frontend-development-immuhammadfurqan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accelerates frontend development by providing clear patterns, best practices, and recipes to build type-safe, accessible, and high-performance Next.js 14 components using App Router, TypeScript, Tailwind, and theme-aware UI so teams can ship consistent interfaces faster.

Core Features & Use Cases

  • Architecture Patterns: Guidance for using Server Components for data fetching, Client Components for interactivity, and Hybrid compositions for pages that need both.
  • Theming & Accessibility: Integration patterns for next-themes, theme-aware components, responsive design, and ARIA guidance to ensure inclusive UIs.
  • Performance & Reliability: Recommendations for image optimization, code splitting with dynamic imports, memoization, ISR configuration, type-safe API clients, form validation with Zod, and component testing.
  • Use Case: Build a Job Dashboard and Job Detail pages that fetch job data on the server, render JobCard components, enable client-side editing and actions, and preserve light/dark theme behavior.

Quick Start

Create a Next.js server component page that fetches jobs with the repo API client, renders JobCard components, and includes a ThemeToggle to support light and dark themes.

Frequently Asked Questions about frontend_development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Next.js App Router components to combine server-side data fetching with client-side interactivity?▼

Next.js App Router hybrid component patterns use Server Components as the default for data fetching and Client Components specifically for hooks and browser APIs. This architecture allows pages to fetch data on the server while enabling client-side editing and user actions.

How do I add dark mode to a Next.js project using Tailwind CSS?▼

Dark mode in Next.js is implemented using the next-themes package to build theme-aware components. This integration works with Tailwind CSS to provide responsive layouts and preserve light/dark theme behavior across your application.

How do I validate form data in TypeScript for Next.js applications?▼

TypeScript form validation in Next.js is handled using Zod schemas to ensure type-safe API clients and form inputs. Zod runtime validation pairs with TypeScript types to prevent data shape errors during client-side editing and server transmissions.

What is the best way to optimize images and split code in Next.js 14?▼

Next.js 14 performance optimization relies on the next/image component for image optimization and dynamic imports for code splitting. These techniques reduce bundle size and improve load times for App Router dashboards and job management pages.

Does building accessible Next.js UI components require React Testing Library?▼

React Testing Library is used to test accessible Next.js UI components and ensure inclusive interfaces. Testing validates ARIA guidance implementation and component behavior, ensuring type-safe and performant user interfaces function correctly.

Related Skills

Explore More Software Engineering Skills→
langcore-orglangcore-org
1

nextjs

Develop Next.js 14+ applications using App Router, Server Components, and TypeScript.

Community
Advanced
eric-sabeeric-sabe
1

frontend-testing

Standardize Vitest, React Testing Library, and Playwright test practices for React and Next.js.

Community
Advanced
JaivishChauhanJaivishChauhan
6

dark-mode-theming

Configure next-themes with CSS custom properties and Tailwind for Next.js theming.

Community
Intermediate
diegocamara89diegocamara89
3

frontend-patterns

Provide React and Next.js frontend patterns for scalable, accessible interfaces.

Community
Intermediate