Frontend

Skill hilmifawwazsaad/NextJS-js-Boilerplate/.agents/frontend

Generate production-grade Next.js (App Router) JSX code. Use for components, pages, layouts, and utilities — pure UI, no DB or server logic.From its SKILL.md

Install

npx -y skills add hilmifawwazsaad/NextJS-js-Boilerplate --skill frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.9 KB, 609 tokens by cl100k_base, as published. Nobody here has run it

Read .agents/software-principles/SKILL.md first.

Pre-Code Checklist

All four states: loading · error · empty · ideal
Server vs. client boundary (default: Server Component)
Existing conventions in app/, components/, hooks/, lib/
Only use libraries in package.json

Architecture

Need	Solution
Fetch + render data	`async` Server Component
`useState` / events / browser API	`'use client'` — push as deep as possible
Reusable UI	`components/` — server-first, add `'use client'` only if needed
Custom logic	`hooks/.js` (client) · `lib/.js` (server/shared)

Extensions: .jsx for JSX · .js for hooks and utilities.

Four States (all required)

State	Implementation
Loading	`loading.jsx` or `<Suspense fallback={<Skeleton />}>`
Error	`error.jsx` — must be `'use client'`
Empty	Inline message — helpful, not just "No data"
Not found	`not-found.jsx`

Data Fetching

Server: async RSC + fetch with { next: { revalidate: N } } or cache() for dedup
Client: useEffect with cleanup — only when Server Component is impossible
Never useEffect for data when Server Component works
useEffect deps array must be exhaustive — no suppression comments. Extract stable refs with useCallback/useMemo if needed

Styling

Tailwind: existing tokens only. No [] arbitrary values unless truly one-off
CSS Modules: follow existing class naming pattern
Never invent design tokens, colors, or custom fonts

Forms, Routing & Quality

Mutations → Server Actions ('use server')
layout.jsx for shared UI. Export metadata or generateMetadata for SEO
next/image for images · next/font for fonts · @/ alias for all imports
Semantic HTML + ARIA. All interactive elements keyboard-accessible
Stable key props — never array index for dynamic lists
Env vars server-only unless NEXT_PUBLIC_ prefix

Never Do

Hooks or browser APIs in Server Components
.tsx/.ts extensions — this is a JS project
Libraries not in package.json
Invented design tokens or broken folder conventions
Skip any of the four states
key={index} on dynamic lists
Suppress useEffect exhaustive-deps lint rule

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.