frontend-structure
Organizes Next.js App Router projects with a standard feature-based directory structure.
Install
mkdir -p .claude/skills/frontend-structure && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16909" && unzip -o skill.zip -d .claude/skills/frontend-structure && rm skill.zipInstalls to .claude/skills/frontend-structure
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Next.js App Router 프로젝트 구조 설정 시 사용. app(페이지), components(UI), features(도메인), lib(유틸), hooks 폴더 구조.Key capabilities
- →Organize Next.js App Router pages
- →Structure common UI components by domain
- →Group domain-specific logic and APIs into features
- →Manage utility functions and core configurations
- →Implement global common hooks
How it works
This skill defines a project structure for Next.js App Router applications, organizing code into `app/` for pages, `components/` for UI, `features/` for domain logic, `lib/` for utilities, and `hooks/` for global hooks. It provides rules for each folder and special Next.js files.
Inputs & outputs
When to use frontend-structure
- →Setup new Next.js project
- →Restructure feature-based modules
- →Implement standard API/type patterns
- →Initialize shared components library
About frontend-structure
Defines a scalable project layout using folders for features, UI components, hooks, and utilities. Promotes domain-driven design principles for maintainability.
Next.js App Router 프로젝트 구조 설정 시 사용. app(페이지), components(UI), features(도메인), lib(유틸), hooks 폴더 구조.
When not to use it
- →When placing components directly inside the `features/` folder
- →When placing domain-specific hooks outside their respective `features/` subfolders
- →When using `page.tsx` and `route.ts` in the same folder
Limitations
- →features는 도메인별 로직을 포함하는 모듈 단위
- →컴포넌트 (components 폴더로)
- →`page.tsx`와 같은 폴더에 `route.ts`를 두면 충돌 , 별도 `api/` 폴더 사용
How it compares
This skill provides a specific, opinionated directory structure for Next.js App Router projects, promoting domain-driven design and clear separation of concerns, unlike generic project setups.
Compared to similar skills
frontend-structure side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-structure (this skill) | 0 | 4mo | Review | Intermediate |
| nextjs-best-practices | 31 | 6mo | No flags | Intermediate |
| javascript-typescript-typescript-scaffold | 3 | 4mo | Review | Beginner |
| server-components | 1 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nextjs-best-practices
davila7
Next.js App Router principles. Server Components, data fetching, routing patterns.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
server-components
davepoon
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js.
open-notebook-lm-guidelines
RainLib
Core project guidelines, architecture, and UI styling instructions for the FerrisMind (openNotebookLm) AI workspace project. Use this whenever working on the frontend or backend of this project.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.