Configure Next.js projects with ESLint, Prettier, and recommended settings. Use when initializing Next.js projects, setting up linting, or when user mentions Next.js setup/Next.jsセットアップ.
Next.jsプロジェクトのセットアップ時に必要な設定を自動化するスキル。
Next.jsはESLintを自動インストールするが、Prettierも必ず追加：
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
パッケージの役割:
prettier: コードフォーマッターeslint-config-prettier: ESLintとPrettierの競合を防ぐprettier-plugin-tailwindcss: Tailwind CSSのクラス順序を整理（Tailwind使用時）.prettierrc.jsonプロジェクトルートに作成：
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "always"
}
.eslintrc.json の更新既存の設定に eslint-config-prettier を追加：
{
"extends": ["next/core-web-vitals", "prettier"]
}
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
使い方:
pnpm run format: 全ファイルをフォーマットpnpm run format:check: フォーマットチェック（CI用）.vscode/settings.json を作成（任意）：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
# 1. Next.jsプロジェクト作成
pnpm dlx create-next-app@latest my-app
# 2. ディレクトリ移動
cd my-app
# 3. Prettier追加
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
# 4. 設定ファイル作成
# （このスキルが自動で作成）
# 5. フォーマット実行
pnpm run format
# 1. Prettier追加
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
# 2. 設定ファイル追加
# （このスキルが自動で作成）
# 3. ESLint設定更新
# （このスキルが自動で更新）
# 4. フォーマット実行
pnpm run format
詳細なテンプレートは templates/ を参照。
セットアップ完了前に確認：
.prettierrc.json が作成されているか.eslintrc.json に prettier が追加されているかpnpm run format が正常に動作するか.vscode/settings.json の作成を検討したか.prettierrc.json の構文エラーを確認eslint-config-prettier が必要）prettier-plugin-tailwindcss がインストールされているか確認.prettierrc.json にプラグイン設定を追加npx skills add camoneart/Setting up Next.js Project下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer