メニュー
Development workflow optimization — ESLint flat config, Prettier, TypeScript strict mode, pre-commit hooks, build optimization, branch strategy, and monorepo patterns
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/InugamiDev/ultrathink-oss --skill dev-workflowコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | dev-workflow |
| description | Development workflow optimization — ESLint flat config, Prettier, TypeScript strict mode, pre-commit hooks, build optimization, branch strategy, and monorepo patterns |
| layer | utility |
| category | development |
| triggers | ["dev workflow","DX","developer experience","eslint config","prettier config","pre-commit hooks","lint-staged","husky","monorepo","turborepo","build optimization","editorconfig","commitlint","dx setup"] |
| inputs | ["Project type and tech stack","Team size and workflow requirements","Build performance concerns","Monorepo structure needs"] |
| outputs | ["ESLint, Prettier, TypeScript configuration files","Pre-commit hook setup (husky + lint-staged)","Build optimization recommendations","Branch strategy and workflow documentation"] |
| linksTo | ["git-workflow","test","code-review","cicd"] |
| linkedFrom | ["cook","bootstrap","plan"] |
| preferredNextSkills | ["git-workflow","test","cicd"] |
| fallbackSkills | ["code-review"] |
| riskLevel | low |
| memoryReadPolicy | selective |
| memoryWritePolicy | selective |
| sideEffects | ["Creates/modifies configuration files","Installs dev dependencies","Modifies git hooks"] |
Optimize the developer experience loop: write code, get instant feedback, catch errors early, ship confidently. This skill covers the essential DX tooling stack organized in tiers, from individual essentials to team-scale infrastructure.
Essential DX tools for any project, regardless of size.
// tsconfig.json — non-negotiable settings
{
"compilerOptions": {
"strict": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"exactOptionalPropertyTypes": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"moduleDetection": "force",
"verbatimModuleSyntax":
Key flags explained:
noUncheckedIndexedAccess — Array/object access returns T | undefined (catches #1 runtime error)exactOptionalPropertyTypes — Distinguishes undefined from "not set"verbatimModuleSyntax — Forces explicit import type for type-only importsisolatedModules — Ensures compatibility with SWC/esbuild (non-tsc bundlers)// eslint.config.js (flat config — ESLint 9+)
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import reactPlugin from "eslint-plugin-react";
import hooksPlugin from "eslint-plugin-react-hooks";
export default tseslint.config(
js.configs.recommended,
...tseslint.configs.strictTypeChecked,
...tseslint.configs.stylisticTypeChecked,
{
languageOptions: {
parserOptions: {
projectService: true,
tsconfigRootDir: import.meta.dirname,
},
},
},
{
files: ["**/*.{ts,tsx}"],
plugins: {
react: reactPlugin,
"react-hooks": hooksPlugin,
},
rules: {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"@typescript-eslint/no-unused-vars": [
"error",
{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
],
"@typescript-eslint/consistent-type-imports": [
"error",
{ prefer: "type-imports", fixStyle: "inline-type-imports" },
],
"@typescript-eslint/no-misused-promises": [
"error",
{ checksVoidReturn: { attributes: false } },
],
},
},
{
ignores: [
"node_modules/",
".next/",
"dist/",
"build/",
"coverage/",
"*.config.{js,cjs,mjs}",
],
}
);
// .prettierrc
{
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"tabWidth": 2,
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
"plugins": ["prettier-plugin-tailwindcss"]
}
// .prettierignore
node_modules
.next
dist
build
coverage
pnpm-lock.yaml
# .editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
# Install
pnpm add -D husky lint-staged
pnpm exec husky init
// package.json
{
"lint-staged": {
"*.{ts,tsx}": [
"eslint --fix --no-warn-ignored",
"prettier --write"
],
"*.{json,md,yml,yaml,css}": [
"prettier --write"
]
}
}
# .husky/pre-commit
pnpm exec lint-staged
Additional tools for team collaboration and code quality.
pnpm add -D @commitlint/cli @commitlint/config-conventional
// commitlint.config.js
export default {
extends: ["@commitlint/config-conventional"],
rules: {
"type-enum": [
2,
"always",
["feat", "fix", "docs", "style", "refactor", "perf", "test", "build", "ci", "chore"],
],
"subject-case": [2, "never", ["start-case", "pascal-case", "upper-case"]],
"subject-max-length": [2, "always", 72],
"body-max-line-length": [2, "always", 100],
},
};
# .husky/commit-msg
pnpm exec commitlint --edit "$1"
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@/components/*": ["./src/components/*"],
"@/lib/*": ["./src/lib/*"],
"@/hooks/*": ["./src/hooks/*"],
"@/types/*": ["./src/types/*"]
}
}
}
<!-- .github/pull_request_template.md -->
## Summary
<!-- What does this PR do? Keep to 1-3 sentences. -->
## Changes
-
## Testing
- [ ] Unit tests added/updated
- [ ] Manual testing completed
- [ ] No regressions observed
## Screenshots
<!-- If UI changes, include before/after screenshots -->
pnpm add -D @changesets/cli @changesets/changelog-github
pnpm exec changeset init
// .changeset/config.json
{
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
"changelog": ["@changesets/changelog-github", { "repo": "org/repo" }],
"commit": false,
"access": "restricted",
"baseBranch": "main"
}
Tools for managing multi-package repositories.
// turbo.json
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**"]
},
"lint": {
"dependsOn": ["^build"]
},
"typecheck": {
"dependsOn": ["^build"]
},
"test": {
"dependsOn": ["^build"],
"cache": false
},
"dev": {
"persistent": true,
"cache": false
}
}
}
repo/
apps/
web/ Next.js app
api/ API server
admin/ Admin dashboard
packages/
ui/ Shared component library
db/ Database schema + client
config/ Shared ESLint, TS, Prettier configs
types/ Shared TypeScript types
turbo.json
pnpm-workspace.yaml
# pnpm-workspace.yaml
packages:
- "apps/*"
- "packages/*"
// packages/config/package.json — shared ESLint config
{
"name": "@repo/eslint-config",
"exports": {
"./base": "./eslint.base.js",
"./react": "./eslint.react.js",
"./next": "./eslint.next.js"
}
}
// apps/web/eslint.config.js
import { nextConfig } from "@repo/eslint-config/next";
export default nextConfig;
# Enable Vercel Remote Cache
npx turbo login
npx turbo link
# Or self-hosted
# Set TURBO_TOKEN and TURBO_TEAM env vars
Run independent tasks in parallel:
// package.json scripts
{
"scripts": {
"check": "concurrently -n lint,types,test --kill-others-on-fail \"pnpm lint\" \"pnpm typecheck\" \"pnpm test:unit\"",
"precommit": "pnpm check"
}
}
Or with Turborepo:
turbo lint typecheck test --parallel
next dev --turbopack # 10x faster HMR in development
SWC is the default compiler in Next.js 12+. Ensure you're not overriding with Babel:
Delete: .babelrc, babel.config.js (if present)
Next.js will auto-use SWC without Babel config
# Next.js bundle analyzer
pnpm add -D @next/bundle-analyzer
# next.config.js
import withBundleAnalyzer from "@next/bundle-analyzer";
export default withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" })({
// ...config
});
# Run
ANALYZE=true pnpm build
Ensure package.json has:
"sideEffects": false (for libraries)
"sideEffects": ["*.css"] (for apps with CSS imports)
Use named exports, not default exports
Avoid barrel files (index.ts re-exports) in performance-critical paths
# GitHub Actions — cache node_modules and Turbo
- uses: actions/cache@v4
with:
path: |
node_modules
.turbo
.next/cache
key: ${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ github.sha }}
restore-keys: |
${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
${{ runner.os }}-
main (production)
├── feat/feature-name (short-lived, 1-3 days max)
├── fix/bug-description (short-lived)
└── chore/task-name (short-lived)
Rules:
- Branch from main, merge to main
- Squash merge PRs (clean linear history)
- No long-lived feature branches
- Feature flags for incomplete features in production
main (production)
└── develop (integration)
├── feature/xyz (from develop)
├── release/v1.2 (from develop, merge to main + develop)
└── hotfix/urgent (from main, merge to main + develop)
feat/short-description New features
fix/short-description Bug fixes
chore/short-description Maintenance, refactoring
docs/short-description Documentation only
test/short-description Test additions/changes
perf/short-description Performance improvements
ci/short-description CI/CD changes
// renovate.json
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:recommended",
":automergeMinor",
":automergePatch",
"group:allNonMajor"
],
"labels": ["dependencies"],
"schedule": ["before 9am on monday"],
"packageRules": [
{
"matchPackagePatterns": ["eslint", "prettier", "typescript"],
"groupName": "tooling",
"automerge": true
},
{
"matchUpdateTypes": ["major"],
"automerge": false,
"labels": ["dependencies", "breaking-change"]
}
]
}
Tier 1 (Every Project):
[ ] TypeScript strict mode enabled
[ ] ESLint flat config with strict type checking
[ ] Prettier with Tailwind plugin
[ ] .editorconfig for consistent editor settings
[ ] Husky + lint-staged pre-commit hooks
[ ] .gitignore comprehensive and up-to-date
Tier 2 (Team Projects):
[ ] Commitlint enforcing conventional commits
[ ] PR template in .github/
[ ] Path aliases configured (@/ imports)
[ ] Changesets for versioning (if library/package)
[ ] Branch protection rules on main
Tier 3 (Monorepo):
[ ] Turborepo or Nx configured
[ ] Shared configs in packages/config
[ ] Package boundaries respected (no circular deps)
[ ] Remote caching enabled
[ ] Renovate for automated dependency updates
eslint.config.js), not .eslintrc. Legacy config is deprecated in ESLint 9+.eslint-config-prettier if needed.index.ts re-exports import everything in the barrel. Use direct imports for Next.js/Webpack projects.dependsOn: ["^build"] or you get stale type errors.package.json rather than loosening hoisting rules..husky/pre-commit is executable (chmod +x) and husky is initialized (pnpm exec husky).