How do I install the Frontend skill?

Run npx skillmds@latest add hilmifawwazsaad/frontend in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Frontend free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Frontend?

hilmifawwazsaad (@hilmifawwazsaad) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Frontend by hilmifawwazsaad — Agent Skill

Name: Frontend
Author: hilmifawwazsaad

File contents

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

---name: frontenddescription: Generate production-grade Next.js (App Router) JSX code. Use for components, pages, layouts, and utilities — pure UI, no DB or server logic.license: MIT---> Read `.agents/software-principles/SKILL.md` first.## Pre-Code Checklist1. All four states: loading · error · empty · ideal2. Server vs. client boundary (default: Server Component)3. Existing conventions in `app/`, `components/`, `hooks/`, `lib/`4. 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

Frequently asked questions

Frontend