code_formatter
Otomatik kod formatlama, Prettier/ESLint entegrasyonu ve kod stil tutarlılığı rehberi.
Best use case
code_formatter is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Otomatik kod formatlama, Prettier/ESLint entegrasyonu ve kod stil tutarlılığı rehberi.
Teams using code_formatter should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/code_formatter/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How code_formatter Compares
| Feature / Agent | code_formatter | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Otomatik kod formatlama, Prettier/ESLint entegrasyonu ve kod stil tutarlılığı rehberi.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 🎨 Code Formatter
> Otomatik kod formatlama ve stil tutarlılığı rehberi.
---
## 📋 Prettier Yapılandırması
### .prettierrc
```json
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf"
}
```
### Komutlar
```bash
# Format single file
npx prettier --write src/file.ts
# Format all files
npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,md}"
# Check without writing
npx prettier --check "src/**/*"
```
---
## 🔧 ESLint Entegrasyonu
### .eslintrc.js
```javascript
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'prettier', // Prettier çakışmalarını devre dışı bırakır
],
plugins: ['@typescript-eslint', 'react'],
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
},
};
```
### Komutlar
```bash
# Lint
npx eslint src/
# Lint and fix
npx eslint src/ --fix
# Specific files
npx eslint "src/**/*.{ts,tsx}"
```
---
## 🔄 Git Hooks (Husky + lint-staged)
### package.json
```json
{
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"eslint --fix",
"prettier --write"
],
"*.{json,css,md}": [
"prettier --write"
]
}
}
```
### Setup
```bash
npx husky-init && npm install
npx husky add .husky/pre-commit "npx lint-staged"
```
---
## 📁 Ignore Files
### .prettierignore
```
node_modules/
dist/
build/
.next/
coverage/
*.min.js
```
### .eslintignore
```
node_modules/
dist/
build/
*.config.js
```
---
*Code Formatter v1.1 - Enhanced*
## 🔄 Workflow
> **Kaynak:** [Prettier Docs](https://prettier.io/docs/en/install.html)
### Aşama 1: Installation
- [ ] **Packages**: `prettier`, `eslint` ve ilgili pluginleri kur.
- [ ] **Config**: `.prettierrc` ve `.eslintrc` dosyalarını kök dizine ekle.
- [ ] **Ignore**: `.prettierignore` dosyasına `build/`, `dist/` ekle.
### Aşama 2: Automation
- [ ] **Scripts**: `package.json` içine `format` ve `lint` scriptlerini ekle.
- [ ] **VS Code**: `.vscode/settings.json` ile "Format on Save" aç.
- [ ] **Hooks**: Husky ve lint-staged ile commit öncesi kontrol ekle.
### Aşama 3: CI Integration
- [ ] **Pipeline**: CI sürecine `npm run lint` ve `prettier --check` adımlarını ekle.
### Kontrol Noktaları
| Aşama | Doğrulama |
|-------|-----------|
| 1 | `npm run format` çalışınca dosyalar değişiyor mu? |
| 2 | Hatalı bir kod commit edilmeye çalışıldığında Husky engelliyor mu? |
| 3 | CI pipeline format hatası olduğunda fail ediyor mu? |Related Skills
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
frontend-design
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
frontend-design-pro
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
frontend-design-2
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
frontend-css
Write and maintain CSS following a consistent methodology (Tailwind, BEM, utility classes, CSS modules), avoiding framework style overrides, maintaining design tokens for consistency, minimizing custom CSS, and optimizing for production with CSS purging and tree-shaking. Use this skill when writing CSS styles, working with CSS frameworks like Tailwind CSS, creating design systems with design tokens, implementing utility classes, managing CSS architecture, optimizing CSS performance, or working with CSS preprocessors. This skill applies when working on .css files, .scss files, .vue component styles, styled-components, or any styling code in your frontend application.
frontend-component
Generate React components for IntelliFill following patterns (forwardRef, CVA variants, Radix UI, TailwindCSS). Use when creating UI components, forms, or pages.
frontend-coding
Next.js App Routerベースのフロントエンド実装スキル。UIコンポーネント、ページ、レイアウト、フォーム、React Queryフック、i18n対応の実装時に使用。backend/配下は除外。Radix UI + Tailwind CSS v4 + TypeScript + next-intl + React Query v5 + Better-Auth のパターンに従う。
frontend-build
Production-grade frontend development with distinctive design. Activates for "build UI", "create component", "landing page", "dashboard", "form", "responsive", "tailwind", "frontend", "design", "React", "Next.js" requests.
frontend-analyzer
Analyze React/Next.js components to extract typography, colors, layout, fonts, spacing systems, and design tokens. Identifies accessibility issues, responsive breakpoints, and component hierarchies.
freight-optimization
When the user wants to optimize freight transportation, reduce shipping costs, or improve carrier selection. Also use when the user mentions "freight management," "carrier optimization," "mode selection," "LTL/TL optimization," "freight consolidation," "load planning," or "transportation procurement." For local delivery routes, see route-optimization. For last-mile, see last-mile-delivery.
framework
Display Claude Code Optimization Framework status and available configurations. Shows all DSL shortcuts, loaded configs, and project detection.
framework-to-capacitor
Guide for integrating modern web frameworks with Capacitor. Covers Next.js static export, React, Vue, Angular, Svelte, and others. Use this skill when converting framework apps to mobile apps with Capacitor.