skills.rest
SleyiW
SleyiWCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev-guidelines

Enforces Next.js App Router frontend standards with Server Components, TypeScript, accessibility, and i18n.

Updated Apr 4, 2026
Search Tags:#typescript#accessibility#frontend#react#next.js#server components#app router
One-click install
npx skills add https://github.com/SleyiW/iWana-neXt --skill frontend-dev-guidelines-sleyiw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev-guidelines
Source: https://github.com/SleyiW/iWana-neXt/tree/main/.agents/skills/frontend-dev-guidelines
Command: npx skills add https://github.com/SleyiW/iWana-neXt --skill frontend-dev-guidelines-sleyiw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend code in the iWana neXt repo can drift into inconsistent patterns—client-side fetching everywhere, hardcoded styles, untyped props, and inaccessible UI. This Skill defines the canonical architecture and checklists so every page, component, and form follows the same Next.js App Router conventions. ## Core Features & Use Cases - Architecture doctrine: Server Components by default, Client Components only when justified, feature-based boundaries, and design-token-driven styling. - Implementation checklists: Step-by-step criteria for new pages, components, and features covering loading/error states, SEO, accessibility, and i18n. - Canonical patterns: Standard form stack (react-hook-form + zod), hybrid authentication via AuthProvider and useAuth, plus reference docs for data fetching, component structure, and file organization. - Use Case: When asked to build a new customers page, the Skill guides placement under app/, server-side data fetching, loading.tsx/error.tsx handling, and reuse of shared components instead of ad hoc UI. ## Quick Start Use the frontend-dev-guidelines skill to implement a new customers list page in the Next.js app following the repo's Server Components and accessibility standards.

Frequently Asked Questions about frontend-dev-guidelines

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

FAQPage Schema
How do I structure a new page in Next.js App Router?▼

Place the route under app/ using page.tsx, and add loading.tsx and error.tsx for async states. Default to a Server Component that fetches data on the server, and only add Client Components where interactivity or browser state is required.

When should I use Client Components vs Server Components in React?▼

Use Server Components by default for data fetching and rendering. Switch to Client Components only when you need user interaction, local browser state, or client-only APIs, keeping the client bundle and hydration cost minimal.

What form validation library works with React Hook Form?▼

The canonical stack is react-hook-form with zod schemas connected through @hookform/resolvers' zodResolver. Define a zod schema, infer the TypeScript type with z.infer, and render field errors from formState.errors.

How do I access the current user in a Next.js frontend?▼

Use the useAuth hook from the AuthProvider, which exposes user, isLoading, and logout. Never reimplement session or token logic outside AuthProvider, since token refresh is encapsulated in the shared api-client module.

Why avoid fetching data on the client in Next.js?▼

Client-side fetching duplicates requests, increases shipped JavaScript, and hurts Core Web Vitals like LCP and CLS. Resolving data in Server Components keeps rendering server-first and reserves client fetching for genuine reactivity needs.

When should this frontend skill not be used?▼

Skip it for backend-only tasks, React Native or other non-web platforms, and infrastructure or monorepo decisions. It applies specifically to web frontend work inside the Next.js App Router stack of the repository.

Related Skills

Explore More Software Engineering Skills→
BellaBeBellaBe
37

frontend-page-builder

Transform product specifications into production Next.js pages using Untitled UI components.

Community
Advanced
leonanpereirapintoleonanpereirapinto
1

a11y-testing

Automate WCAG accessibility checks with jest-axe and Playwright axe-core.

Community
Advanced
gabriellpequenogabriellpequeno
8

tailwind-patterns

Organize Tailwind usage around design tokens for consistent UI.

Community
Intermediate
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced