一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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.