skills.rest
yuji-sniper
yuji-sniperCOMMUNITY
Explore all skills by this author →
GitHub

frontend-coding

Automate Next.js frontend implementation with UI, forms, and i18n.

Updated Jan 20, 2026
Search Tags:#React Query#frontend#Next.js#Tailwind CSS#i18n#UI components#Better-Auth
One-click install
npx skills add https://github.com/yuji-sniper/next-vibe-template --skill frontend-coding
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-coding
Source: https://github.com/yuji-sniper/next-vibe-template/tree/main/.claude/skills/frontend-coding
Command: npx skills add https://github.com/yuji-sniper/next-vibe-template --skill frontend-coding

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured frontend implementation guide for Next.js apps, reducing boilerplate and aligning components, routing, and internationalization across projects.

Core Features & Use Cases

  • App Router-based architecture: guides layout, pages, and routing conventions for scalable frontends.
  • UI components & forms: patterns using Radix UI, shadcn/ui, and Tailwind CSS for consistent UI.
  • i18n & data-fetching: integrates next-intl and React Query v5 for localization and data management.
  • Use Case: rapidly scaffold a feature module with components, pages, and API hooks following the standard.

Quick Start

Follow the steps below to bootstrap a Next.js app and apply the frontend-coding patterns.

Frequently Asked Questions about frontend-coding

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

FAQPage Schema
How do I structure Next.js App Router pages and layouts for scalable frontends?▼

To build scalable Next.js frontends, use App Router conventions for layouts, pages, and routing to align components and internationalization across projects.

What is the best way to scaffold UI components and forms with Tailwind CSS v4 and shadcn/ui?▼

The best way to scaffold UI components and forms is using Radix UI with shadcn/ui and Tailwind CSS v4 patterns. This combination ensures consistent UI implementation while maintaining TypeScript safety.

How do I integrate React Query v5 and next-intl for data fetching and i18n in Next.js?▼

Integrate React Query v5 and next-intl by applying standard patterns for localization and data management. This combination handles internationalization and data fetching within Next.js apps effectively.

Do I need Better-Auth and TypeScript to use these Next.js frontend patterns?▼

Yes, these Next.js frontend patterns require TypeScript and Better-Auth conventions. The implementation also depends on Radix UI with shadcn/ui, Tailwind CSS v4, and next-intl for standard compliance.

Can I use this approach to generate backend code for my Next.js application?▼

No, this approach focuses exclusively on frontend implementation tasks for Next.js apps. It covers UI components, pages, layouts, forms, and React Query hooks while excluding backend code generation.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
agusmdevagusmdev
5

add-frontend-feature

Scaffold React/TypeScript frontend features with types, API endpoints, hooks, components, and routes.

Community
Intermediate
paraddoxparaddox

shadcn-ui-setup

Install and configure Shadcn/ui and Aceternity UI effects in Next.js projects.

Community
Intermediate
KouemouSahKouemouSah

TaxasGE Frontend Dev

Provide Next.js/React architecture patterns, templates, and best practices for frontend tasks.

Community
Intermediate