메뉴
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명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Unified design foundations — design system architecture, tokens, component specs, visual principles, creative vision, figma integration, plus brand design system loader (66 real brands via DESIGN.md). Absorbs design, design-system, design-systems, design-principles, design-router, creative-vision, figma, design-md.
Render, summarize, and present markdown documents and structured content in multiple output modes
Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
SKILL.md 표시 중
SOC 직업 분류 기준
| 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).