Skill
fastapi
- [ ] **API Design:** Define RESTful endpoints, path parameters, and query parameters. - [ ] **Data Validation:** Plan Pydantic models for request (In) and…
@dongduong2001View SkillDevelopment
Skill
/nextjs
- [ ] **Rendering Strategy:** Define which routes will be Server Components (RSC) and which require Client Components (`use client`). - [ ] **Data Fetching:** Plan caching strategies using Next.js 15's native `fetch` overrides and `React.cache`. - [ ] **Routing Tree:** Map out
Install
$ npx -y skills add DongDuong2001/pudo-code-system --skill nextjs --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/nextjs
Context preview
The summary Claude sees to decide when to auto-load this skill.
- [ ] **Rendering Strategy:** Define which routes will be Server Components (RSC) and which require Client Components (`use client`). - [ ] **Data Fetching:** Plan caching strategies using Next.js 15's native `fetch` overrides and `React.cache`. - [ ] **Routing Tree:** Map out
SKILL.md
nextjs.SKILL.mdNext.js 15 (App Router) PUDO Checklist
1. PLAN (Architecture & Strategy)
- [ ] **Rendering Strategy:** Define which routes will be Server Components (RSC) and which require Client Components (`use client`).
- [ ] **Data Fetching:** Plan caching strategies using Next.js 15's native `fetch` overrides and `React.cache`.
- [ ] **Routing Tree:** Map out nested layouts, `loading.tsx`, `error.tsx`, and `not-found.tsx` boundaries.
- [ ] **Mutations:** Plan Server Actions for data mutations instead of traditional API routes where possible.
2. UNDERSTAND (Context & Auditing)
- [ ] **RSC Boundary:** Ensure `use client` directives are pushed as far down the component tree as possible.
- [ ] **Bundle Analysis:** Audit third-party packages to ensure they are compatible with Server Components.
- [ ] **State Management:** Review where global state (Zustand, Redux) is truly needed versus URL state or server state.
3. DEVELOP (Implementation)
- [ ] **Components:** Build Server Components by default. Extract interactivity (hooks, events) into minimal Client Components.
- [ ] **Forms & Mutations:** Use React 19 hooks (`useActionState`, `useFormStatus`) combined with Server Actions.
- [ ] **Streaming:** Wrap slow data-fetching components in `<Suspense>` to stream HTML to the client progressively.
- [ ] **Assets:** Utilize `<Image>`, `<Link>`, and `next/font` for automatic asset optimization.
4. OPTIMIZE (Performance & Review)
- [ ] **Caching:** Verify Data Cache, Full Route Cache, and Router Cache behaviors. Configure `revalidate` tags correctly.
- [ ] **SEO & Metadata:** Implement dynamic `generateMetadata` for accurate Open Graph and SEO tags.
- [ ] **Web Vitals:** Check LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) metrics.
- [ ] **Edge Compatibility:** Ensure middleware and essential handlers are Edge-runtime compatible if deploying to Vercel/similar.
Read more
Next.js 15 (App Router) PUDO Checklist
1. PLAN (Architecture & Strategy)
- [ ] **Rendering Strategy:** Define which routes will be Server Components (RSC) and which require Client Components (`use client`).
- [ ] **Data Fetching:** Plan caching strategies using Next.js 15's native `fetch` overrides and `React.cache`.
- [ ] **Routing Tree:** Map out nested layouts, `loading.tsx`, `error.tsx`, and `not-found.tsx` boundaries.
- [ ] **Mutations:** Plan Server Actions for data mutations instead of traditional API routes where possible.
2. UNDERSTAND (Context & Auditing)
- [ ] **RSC Boundary:** Ensure `use client` directives are pushed as far down the component tree as possible.
- [ ] **Bundle Analysis:** Audit third-party packages to ensure they are compatible with Server Components.
- [ ] **State Management:** Review where global state (Zustand, Redux) is truly needed versus URL state or server state.
3. DEVELOP (Implementation)
- [ ] **Components:** Build Server Components by default. Extract interactivity (hooks, events) into minimal Client Components.
- [ ] **Forms & Mutations:** Use React 19 hooks (`useActionState`, `useFormStatus`) combined with Server Actions.
- [ ] **Streaming:** Wrap slow data-fetching components in `<Suspense>` to stream HTML to the client progressively.
- [ ] **Assets:** Utilize `<Image>`, `<Link>`, and `next/font` for automatic asset optimization.
4. OPTIMIZE (Performance & Review)
- [ ] **Caching:** Verify Data Cache, Full Route Cache, and Router Cache behaviors. Configure `revalidate` tags correctly.
- [ ] **SEO & Metadata:** Implement dynamic `generateMetadata` for accurate Open Graph and SEO tags.
- [ ] **Web Vitals:** Check LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) metrics.
- [ ] **Edge Compatibility:** Ensure middleware and essential handlers are Edge-runtime compatible if deploying to Vercel/similar.
Ships withpudo-code-system
Modular, scalable, automated development intelligence.
Get the whole plugin
Stats
5
Stars
0
Forks
Maintained
Maintenance
JavaScript
Language
MIT
License
1mo ago
Last commit
4mo ago
Created
Repo: DongDuong2001/pudo-code-system
In this plugin
See everything inside Other skills on pudo-code-system.
@dongduong2001View SkillSkill
rust
- [ ] **Framework Selection:** Choose web framework (Axum, Actix-web) based on performance vs. ecosystem needs. - [ ] **Crate Ecosystem:** Plan dependencies…
@dongduong2001View SkillSkill
Skill
Skill
Skill