skills.rest
phuhao00
phuhao00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-skill

Build and adapt Next.js App Router UI components with TypeScript and Tailwind styling.

Updated Jan 17, 2026
Search Tags:#typescript#react#tailwind css#api integration#nextjs#frontend development#ui components
One-click install
npx skills add https://github.com/phuhao00/real_deal --skill frontend-skill-phuhao00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-skill
Source: https://github.com/phuhao00/real_deal/tree/main/.skills/frontend-skill
Command: npx skills add https://github.com/phuhao00/real_deal --skill frontend-skill-phuhao00

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you create, update, and maintain the real_deal frontend without losing the project’s established patterns for routing, data fetching, styling, and reusable components. It reduces guesswork when building pages that need to fit the platform’s feed, profile, jobs, company, and networking experiences.

Core Features & Use Cases

  • Next.js App Router development: Build server and client components that match the repository’s page structure and routing conventions.
  • React and TypeScript UI work: Create reusable components, compose layouts, and add interactive behavior with typed props and hooks.
  • Tailwind and theme styling: Apply utility classes and CSS variables to keep the interface consistent with the existing design system.
  • Backend API integration: Connect pages to the platform’s API endpoints for explore feeds, profiles, jobs, companies, media, and billing data.
  • Use case: Use this Skill when adding a new page, refining a feed row, wiring a search filter, or implementing a login and profile flow in the web app.

Quick Start

Ask this Skill to build or modify a Next.js page or component for the real_deal web app, and it will follow the repository’s API, routing, and styling conventions.

Frequently Asked Questions about frontend-skill

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

FAQPage Schema
How do I build Next.js App Router pages that match existing routing and data fetching conventions?▼

Build Next.js App Router pages by creating server and client components that align with the repository’s established page structure, routing conventions, and backend fetch patterns to ensure consistency across the web application.

Can I use this to wire React components to backend API endpoints for feeds and profiles?▼

Yes, you can wire React components to backend API endpoints for explore feeds, profiles, jobs, companies, media, and billing data by following the documented fetch patterns and TypeScript props.

What's the best way to apply Tailwind CSS and theme styling to reusable UI components?▼

Apply Tailwind CSS utility classes and CSS variables to reusable UI components to maintain interface consistency with the existing design system across the web application.

Does this Skill support TypeScript and React 18 for Next.js 14.2 frontend development?▼

Yes, this Skill supports frontend development using TypeScript, React 18, and Next.js 14.2, allowing you to create typed props, compose layouts, and add interactive behavior with hooks.

How do I add client-side filters and search functionality to a Next.js page?▼

Add client-side filters and search functionality by building interactive client components with typed hooks that connect to platform API endpoints and apply Tailwind-based styling.

When should I use this Skill for frontend development instead of building components from scratch?▼

Use this Skill when adding a new page, refining a feed row, wiring a search filter, or implementing a login and profile flow to avoid losing the project’s established patterns for routing, data fetching, and styling.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
lastcowlastcow

innozverse-web-style

Standardize Next.js App Router, component, and API client practices.

Community
Intermediate
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
thehivegroup-aithehivegroup-ai

next-standards

Construct Next.js pages and layouts with Tailwind CSS conventions.

Official
Intermediate