원클릭으로 Manus에서 모든 스킬 실행

nexus-nextjs-dev

스타6

포크0

업데이트2026년 3월 2일 01:22

Guidelines for writing Next.js App Router frontend code, using Shadcn UI, and TailwindCSS for Project Nexus. Use this when creating or modifying UI components, pages, or client/server interactions.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

MAX-786

MAX-786/project-nexus

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Next.js & Frontend Guidelines

State Management & Workflows

Global State (Zustand): Use Zustand for global client-side state management instead of React Context or prop drilling.
Persistence: Use Zustand's persist middleware to automatically sync necessary state (like user preferences or local caches) with browser storage.
Logical Workflows: Keep business logic outside of UI components. Create modular custom hooks or utility functions to handle complex interactions, adhering to industry standards for separation of concerns.

Component Architecture (App Router)

Default to Server Components: All components in the app/ directory must be Server Components by default.
Client Components: Only add "use client" at the top of a file if it absolutely requires React hooks (useState, useEffect), browser APIs (like window), or complex interactivity (like React Flow canvases).
Data Fetching: Fetch data directly in Server Components using async/await and the @supabase/ssr client. Do not use useEffect for data fetching unless paginating on the client.
Modularity: Write small, reusable, and modular components. Break down complex UIs into logical pieces following the Single Responsibility Principle.

UI & Styling

Shadcn UI: Always check if a Shadcn component exists (e.g., Button, Dialog, Card, Sheet, Toast) before building a custom one.
TailwindCSS: Use utility classes for all styling. Do not use inline styles or external CSS files.
Responsive Design: Build mobile-first. Use md: and lg: prefixes for desktop views. The web app must look perfect on both mobile devices and large desktop monitors.
Icons: Strictly use lucide-react for all icons.

Loading & Error States

Every asynchronous action must have a visual loading state (spinner or skeleton loader).
Use Next.js loading.tsx and error.tsx boundaries for page-level states.

이 저장소의 다른 Skills

같은 저장소

nexus-docs-manager

MAX-786/project-nexus

Rules for creating, updating, and managing project documentation. Use this skill when analyzing Git commits, updating the README, writing API specs, or acting as the Technical Writer for Project Nexus.

2026-03-096

nexus-github-cli

MAX-786/project-nexus

Act as an autonomous project manager and lead developer. Use the GitHub CLI (`gh`) to orchestrate the entire development lifecycle: tracking tasks on Project Boards, organizing Sprints via Milestones, documenting progress via Issue Comments, and executing code changes via Pull Requests.

2026-03-046

nexus-code-quality

MAX-786/project-nexus

Rules for ESLint, Prettier, and TypeScript strictness. Use this skill when writing new files, refactoring code, or debugging build failures caused by type errors.

2026-03-046

nexus-deployments

MAX-786/project-nexus

Deployment protocols for Vercel (Next.js Web App), Chrome Web Store packaging (Plasmo Extension), and Supabase production migrations. Use this when setting up CI/CD, preparing a release, or configuring deployment environment variables.

2026-03-046

nexus-git-workflow

MAX-786/project-nexus

Guidelines for Git branching, commit messages (Conventional Commits), and Pull Request structures. Use this skill when asked to commit code, create a branch, or write a PR description.

2026-03-046

nexus-marketing-growth

MAX-786/project-nexus

Guidelines for generating marketing copy, Reddit posts, Hacker News launches, and growth strategies for Project Nexus. Use this skill when asked to write public-facing content, launch announcements, or analyze product-market fit.

2026-03-026

name	nexus-nextjs-dev
description	Guidelines for writing Next.js App Router frontend code, using Shadcn UI, and TailwindCSS for Project Nexus. Use this when creating or modifying UI components, pages, or client/server interactions.

Next.js & Frontend Guidelines

State Management & Workflows

Global State (Zustand): Use Zustand for global client-side state management instead of React Context or prop drilling.
Persistence: Use Zustand's persist middleware to automatically sync necessary state (like user preferences or local caches) with browser storage.
Logical Workflows: Keep business logic outside of UI components. Create modular custom hooks or utility functions to handle complex interactions, adhering to industry standards for separation of concerns.

Component Architecture (App Router)

Default to Server Components: All components in the app/ directory must be Server Components by default.
Client Components: Only add "use client" at the top of a file if it absolutely requires React hooks (useState, useEffect), browser APIs (like window), or complex interactivity (like React Flow canvases).
Data Fetching: Fetch data directly in Server Components using async/await and the @supabase/ssr client. Do not use useEffect for data fetching unless paginating on the client.
Modularity: Write small, reusable, and modular components. Break down complex UIs into logical pieces following the Single Responsibility Principle.

UI & Styling

Shadcn UI: Always check if a Shadcn component exists (e.g., Button, Dialog, Card, Sheet, Toast) before building a custom one.
TailwindCSS: Use utility classes for all styling. Do not use inline styles or external CSS files.
Responsive Design: Build mobile-first. Use md: and lg: prefixes for desktop views. The web app must look perfect on both mobile devices and large desktop monitors.
Icons: Strictly use lucide-react for all icons.

Loading & Error States

Every asynchronous action must have a visual loading state (spinner or skeleton loader).
Use Next.js loading.tsx and error.tsx boundaries for page-level states.