frontend-development

Name: frontend-development
Author: avibebuilder

109stars17forks

How to install frontend-development?

avibebuilder/claude-prime/frontend-development

$npx -y skills add avibebuilder/claude-prime --skill frontend-development

Installs into the current project.

Summary

Use this skill for ANY work involving React, Next.js, TypeScript, or Tailwind in the browser layer. This includes building components and pages, but equally covers debugging and fixing frontend issues: CSS/Tailwind classes not applying, form validation behavior, hydration mismatc

Files · 1

View on GitHub

SKILL.md

1	# Frontend Development
2
3	Project-specific patterns for React/Next.js/TypeScript frontend work.
4
5	## Architecture Decisions
6
7	### Server-First Boundaries
8	Start with Server Components. Only add `'use client'` when you need interactivity, state, or browser APIs. Extract only the interactive leaf — not the entire page or section.
9
10	### Colocation Over Centralization
11	Types, hooks, and utilities that serve one feature live in that feature's directory. Only truly shared code goes in global directories.
12
13	### Composition Over Customization
14	Compose existing components rather than adding props/variants. shadcn/ui components are meant to be copied and modified. Build up from primitives.
15
16	### Data Flows Down, Events Flow Up
17	Server fetches data and passes it as props. Client components handle interactions and call server actions. Never fetch in client components what could be fetched on the server.
18
19	## Gotchas
20
21	- `'use client'` does NOT mean "runs only in the browser" — it runs on the server during SSR too. It means "include in the client bundle." Putting secrets or DB calls in a `'use client'` file will leak them.
22	- Importing a Server Component into a Client Component makes it a Client Component. The boundary propagates DOWN. Pass server content as `children` props instead.
23	- `useEffect` with empty deps fires AFTER paint — use `useLayoutEffect` for DOM measurements that affect layout, but never in Server Components.
24	- Next.js `fetch()` caches by default in App Router. Add `{ cache: 'no-store' }` or `revalidate: 0` for data that must be fresh. Forgetting this causes stale data bugs that only appear in production.
25	- Tailwind classes are purged at build time — dynamically constructed class names like `` bg-${color}-500 `` will be missing. Use complete class names or safelist them.
26	- `key` prop on mapped elements must be stable and unique. Using array index as key causes subtle bugs when list items are reordered, inserted, or deleted.
27	- `useSearchParams()` requires a `<Suspense>` boundary in Next.js App Router or the entire page becomes client-rendered.
28	- shadcn/ui components are source code, not a library. After `npx shadcn-ui add`, the component lives in YOUR codebase — modify it directly, don't wrap it.
29	- React Hook Form's `register()` returns a ref — don't also pass your own `ref` to the same input without merging them.
30	- `async` Server Components that throw `redirect()` or `notFound()` must NOT be wrapped in try/catch — these work by throwing special errors that Next.js catches upstream.
31
32	## Quick Start
33
34	1. Check file structure — App Router or plain React? Check references below.
35	2. Identify the feature boundary — What feature does this work belong to?
36	3. Start with Server Component — Only add `'use client'` when you hit a wall
37	4. Name files specifically — `login-form.tsx` not `form.tsx`. Must be grep-findable.
38	5. Match existing patterns — Read 2-3 similar files before creating new ones
39
40	## References
41
42	\| When you need... \| Read \|
43	\|------------------\|------\|
44	\| File naming, imports, exports \| [conventions.md](./references/conventions.md) \|
45	\| Next.js App Router patterns \| [overview.md](./references/nextjs/overview.md) \|
46	\| React component patterns \| [overview.md](./references/react/overview.md) \|
47	\| TypeScript project patterns \| [typescript.md](./references/typescript.md) \|
48	\| shadcn/ui + Dice UI usage \| [shadcn.md](./references/shadcn.md) \|
49	\| Tailwind configuration \| [tailwind.md](./references/tailwind.md) \|
50	\| Data fetching (tRPC, TanStack, axios) \| [overview.md](./references/data-fetching/overview.md) \|
51	\| Biome/linter config \| [biome.md](./references/biome.md) \|
52
53	## Official Resources
54
55	For general framework docs beyond project-specific patterns, consult:
56
57	\| Framework \| URL \|
58	\|-----------\|-----\|
59	\| Next.js \| https://nextjs.org/docs \|
60	\| React \| https://react.dev \|
61	\| TypeScript \| https://www.typescriptlang.org/docs \|
62	\| Tailwind CSS \| https://tailwindcss.com/docs \|
63	\| shadcn/ui \| https://ui.shadcn.com/docs \|
64	\| Dice UI \| https://www.diceui.com/docs \|
65	\| TanStack Query \| https://tanstack.com/query/latest/docs \|
66	\| tRPC \| https://trpc.io/docs \|
67	\| Zustand \| https://zustand.docs.pmnd.rs \|
68	\| React Hook Form \| https://react-hook-form.com \|
69	\| Zod \| http

People who liked this also viewed

6 picks

Type

frontend-development

109stars17forks

View on GitHub

How to install frontend-development?

avibebuilder/claude-prime/frontend-development

$npx -y skills add avibebuilder/claude-prime --skill frontend-development

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Development
2
3	Project-specific patterns for React/Next.js/TypeScript frontend work.
4
5	## Architecture Decisions
6
7	### Server-First Boundaries
8	Start with Server Components. Only add `'use client'` when you need interactivity, state, or browser APIs. Extract only the interactive leaf — not the entire page or section.
9
10	### Colocation Over Centralization
11	Types, hooks, and utilities that serve one feature live in that feature's directory. Only truly shared code goes in global directories.
12
13	### Composition Over Customization
14	Compose existing components rather than adding props/variants. shadcn/ui components are meant to be copied and modified. Build up from primitives.
15
16	### Data Flows Down, Events Flow Up
17	Server fetches data and passes it as props. Client components handle interactions and call server actions. Never fetch in client components what could be fetched on the server.
18
19	## Gotchas
20
21	- `'use client'` does NOT mean "runs only in the browser" — it runs on the server during SSR too. It means "include in the client bundle." Putting secrets or DB calls in a `'use client'` file will leak them.
22	- Importing a Server Component into a Client Component makes it a Client Component. The boundary propagates DOWN. Pass server content as `children` props instead.
23	- `useEffect` with empty deps fires AFTER paint — use `useLayoutEffect` for DOM measurements that affect layout, but never in Server Components.
24	- Next.js `fetch()` caches by default in App Router. Add `{ cache: 'no-store' }` or `revalidate: 0` for data that must be fresh. Forgetting this causes stale data bugs that only appear in production.
25	- Tailwind classes are purged at build time — dynamically constructed class names like `` bg-${color}-500 `` will be missing. Use complete class names or safelist them.
26	- `key` prop on mapped elements must be stable and unique. Using array index as key causes subtle bugs when list items are reordered, inserted, or deleted.
27	- `useSearchParams()` requires a `<Suspense>` boundary in Next.js App Router or the entire page becomes client-rendered.
28	- shadcn/ui components are source code, not a library. After `npx shadcn-ui add`, the component lives in YOUR codebase — modify it directly, don't wrap it.
29	- React Hook Form's `register()` returns a ref — don't also pass your own `ref` to the same input without merging them.
30	- `async` Server Components that throw `redirect()` or `notFound()` must NOT be wrapped in try/catch — these work by throwing special errors that Next.js catches upstream.
31
32	## Quick Start
33
34	1. Check file structure — App Router or plain React? Check references below.
35	2. Identify the feature boundary — What feature does this work belong to?
36	3. Start with Server Component — Only add `'use client'` when you hit a wall
37	4. Name files specifically — `login-form.tsx` not `form.tsx`. Must be grep-findable.
38	5. Match existing patterns — Read 2-3 similar files before creating new ones
39
40	## References
41
42	\| When you need... \| Read \|
43	\|------------------\|------\|
44	\| File naming, imports, exports \| [conventions.md](./references/conventions.md) \|
45	\| Next.js App Router patterns \| [overview.md](./references/nextjs/overview.md) \|
46	\| React component patterns \| [overview.md](./references/react/overview.md) \|
47	\| TypeScript project patterns \| [typescript.md](./references/typescript.md) \|
48	\| shadcn/ui + Dice UI usage \| [shadcn.md](./references/shadcn.md) \|
49	\| Tailwind configuration \| [tailwind.md](./references/tailwind.md) \|
50	\| Data fetching (tRPC, TanStack, axios) \| [overview.md](./references/data-fetching/overview.md) \|
51	\| Biome/linter config \| [biome.md](./references/biome.md) \|
52
53	## Official Resources
54
55	For general framework docs beyond project-specific patterns, consult:
56
57	\| Framework \| URL \|
58	\|-----------\|-----\|
59	\| Next.js \| https://nextjs.org/docs \|
60	\| React \| https://react.dev \|
61	\| TypeScript \| https://www.typescriptlang.org/docs \|
62	\| Tailwind CSS \| https://tailwindcss.com/docs \|
63	\| shadcn/ui \| https://ui.shadcn.com/docs \|
64	\| Dice UI \| https://www.diceui.com/docs \|
65	\| TanStack Query \| https://tanstack.com/query/latest/docs \|
66	\| tRPC \| https://trpc.io/docs \|
67	\| Zustand \| https://zustand.docs.pmnd.rs \|
68	\| React Hook Form \| https://react-hook-form.com \|
69	\| Zod \| http

People who liked this also viewed

6 picks

Type