# Wind

**Modern Flutter uygulamalarını widget ağacından hiç çıkmadan hızla geliştirin.**

Flutter için Tailwind CSS. `flex`, `p-4`, `dark:bg-gray-800`, `hover:scale-105` ve `md:flex-row` gibi sınıflarla dolu, yardımcı sınıf odaklı bir stil çatısı; bunlar responsive ve temaya duyarlı widget ağaçlarına dönüşür.

## Stille. Birleştir. Yayınla.

Stil için widget'ları iç içe geçirmeyi bırakın. Dart kodunuza doğrudan `className="p-4 bg-blue-500 hover:bg-blue-700"` yazın. Web'de yazdığınız aynı Tailwind sözdizimi.

### Yardımcı Sınıf Odaklı Stil

Widget'ları `p-4 bg-blue-500 rounded-lg` gibi birleştirilebilir sınıflarla stilleyin. Sadece stil için derin iç içe widget ağaçlarına gerek kalmaz.

[Daha fazla Yardımcı Sınıf Odaklı Stil hakkında](https://anilcancakir.com/wind_kit/docs/core-concepts/utility-first.md)

### Responsive Tasarım

Mobil öncelikli kırılma noktası sistemi. Belirli ekran boyutlarında stil uygulamak için herhangi bir sınıfın önüne `sm:`, `md:` veya `lg:` koyun.

[Daha fazla Responsive Tasarım hakkında](https://anilcancakir.com/wind_kit/docs/core-concepts/responsive-design.md)

### Etkileşim Durumları

Herhangi bir öğeye `hover:bg-blue-700` veya `disabled:opacity-50` ekleyin. Hover, focus, yükleniyor ve özel durum desteği hazır gelir.

[Daha fazla Etkileşim Durumları hakkında](https://anilcancakir.com/wind_kit/docs/core-concepts/state-management.md)

### Tema

Tüm tasarım sisteminizi `WindThemeData` içinde tanımlayın: özel renkler, tipografi ölçekleri, boşluk değerleri ve gölgeler. Tek yapılandırma, her yerde tutarlı arayüz.

[Daha fazla Tema hakkında](https://anilcancakir.com/wind_kit/docs/core-concepts/theming.md)

### Karanlık Mod

Otomatik karanlık mod için herhangi bir sınıfın önüne `dark:` koyun. `dark:bg-slate-900` kullanın ve temayı çalışma anında tek çağrıyla değiştirin.

[Daha fazla Karanlık Mod hakkında](https://anilcancakir.com/wind_kit/docs/core-concepts/dark-mode.md)

### Dinamik Render

`WDynamic` ile Flutter arayüzlerini çalışma anında JSON'dan kurun. CMS düzenleri, A/B testleri ve uzaktan yapılandırma için sunucu güdümlü arayüz. Uygulamayı yeniden derlemek gerekmez.

[Daha fazla Dinamik Render hakkında](https://anilcancakir.com/wind_kit/docs/core-concepts/dynamic-rendering.md)

## Canlı Playground

Wind kodunu yazın, sonucu anında görün. Yardımcı sınıfları deneyin, fikirlerinizi sınayın ve kodu doğrudan Flutter projenize kopyalayın.

- Yazarken gerçek zamanlı önizleme
- Tek tıkla panoya kopyalama
- Tüm yardımcı sınıflar desteklenir

## Ajanınız Wind konuşuyor.

Wind UI becerisi, kodlama asistanınıza ilk satırdan önce className dilbilgisini, karanlık mod eşleştirme kurallarını ve kaçınılacak kalıpları öğretir. Tek komut kurulumu tamamlar.

```bash
npx skills add anilcancakir/ai --skill wind-ui
```

[diğer editörler](https://github.com/anilcancakir/ai)

## Ve yazdığını doğrular.

Beceriler dilbilgisini öğretir. `mcp.anilcancakir.com/wind` adresindeki MCP sunucusu, ajanınıza düzenleme sırasında canlı doküman araması sağlar; böylece uydurma bir className göndermez.

```bash
claude mcp add --transport http wind_kit https://mcp.anilcancakir.com/wind
```

```bash
npx @anilcancakir/wind-mcp
```

## Saniyeler içinde geliştirmeye başlayın

```bash
flutter pub add wind_kit
```

Ya da `pubspec.yaml` dosyasına ekleyin:

```yaml
dependencies:
  wind_kit: ^1.12.0
```

Ya da yapay zeka ajanınıza şu istemi verin:

```text
https://anilcancakir.com/wind_kit/docs/llms.txt adresini oku ve Wind paketini bu projeye kur.
```

## Dokümanlar

### Getting Started

- [Installation](https://anilcancakir.com/wind_kit/docs/getting-started/installation.md)
- [Upgrade Guide](https://anilcancakir.com/wind_kit/docs/getting-started/upgrade-guide.md)

### Core Concepts

- [Utility-First Fundamentals](https://anilcancakir.com/wind_kit/docs/core-concepts/utility-first.md)
- [Responsive Design](https://anilcancakir.com/wind_kit/docs/core-concepts/responsive-design.md)
- [Dark Mode](https://anilcancakir.com/wind_kit/docs/core-concepts/dark-mode.md)
- [State Management & Interactive Styles](https://anilcancakir.com/wind_kit/docs/core-concepts/state-management.md)
- [Theme Configuration](https://anilcancakir.com/wind_kit/docs/core-concepts/theming.md)
- [Theme Binding](https://anilcancakir.com/wind_kit/docs/core-concepts/theme-binding.md)
- [Dynamic Rendering](https://anilcancakir.com/wind_kit/docs/core-concepts/dynamic-rendering.md)
- [Debugging](https://anilcancakir.com/wind_kit/docs/core-concepts/debugging.md)

### Layout

- [Display](https://anilcancakir.com/wind_kit/docs/layout/display.md)
- [Flexbox & Layout](https://anilcancakir.com/wind_kit/docs/layout/flexbox.md)
- [Grid Template Columns](https://anilcancakir.com/wind_kit/docs/layout/grid.md)
- [Sizing](https://anilcancakir.com/wind_kit/docs/layout/sizing.md)
- [Spacing](https://anilcancakir.com/wind_kit/docs/layout/spacing.md)
- [Positioning](https://anilcancakir.com/wind_kit/docs/layout/positioning.md)
- [Z-Index](https://anilcancakir.com/wind_kit/docs/layout/z-index.md)
- [Overflow](https://anilcancakir.com/wind_kit/docs/layout/overflow.md)
- [Aspect Ratio](https://anilcancakir.com/wind_kit/docs/layout/aspect-ratio.md)

### Typography

- [Font Family](https://anilcancakir.com/wind_kit/docs/typography/font-family.md)
- [Font Size](https://anilcancakir.com/wind_kit/docs/typography/font-size.md)
- [Font Weight](https://anilcancakir.com/wind_kit/docs/typography/font-weight.md)
- [Line Height](https://anilcancakir.com/wind_kit/docs/typography/line-height.md)
- [Letter Spacing](https://anilcancakir.com/wind_kit/docs/typography/letter-spacing.md)
- [Text Align](https://anilcancakir.com/wind_kit/docs/typography/text-align.md)
- [Text Color](https://anilcancakir.com/wind_kit/docs/typography/text-color.md)
- [Text Decoration](https://anilcancakir.com/wind_kit/docs/typography/text-decoration.md)
- [Text Overflow](https://anilcancakir.com/wind_kit/docs/typography/text-overflow.md)
- [Text Transform](https://anilcancakir.com/wind_kit/docs/typography/text-transform.md)

### Borders

- [Border Width, Color, & Radius](https://anilcancakir.com/wind_kit/docs/borders/borders.md)
- [Ring Width, Color, and Offset](https://anilcancakir.com/wind_kit/docs/borders/ring.md)

### Styling

- [Background Color](https://anilcancakir.com/wind_kit/docs/styling/background-color.md)
- [Background Gradient](https://anilcancakir.com/wind_kit/docs/styling/background-gradient.md)
- [Background Image](https://anilcancakir.com/wind_kit/docs/styling/background-image.md)
- [Opacity](https://anilcancakir.com/wind_kit/docs/styling/opacity.md)
- [Shadow](https://anilcancakir.com/wind_kit/docs/styling/shadow.md)
- [WindRecipe](https://anilcancakir.com/wind_kit/docs/styling/wind-recipe.md)

### Interactivity

- [Animation](https://anilcancakir.com/wind_kit/docs/interactivity/animation.md)
- [Transitions](https://anilcancakir.com/wind_kit/docs/interactivity/transition.md)
- [Cursor](https://anilcancakir.com/wind_kit/docs/interactivity/cursor.md)

### Widgets

- [WDiv](https://anilcancakir.com/wind_kit/docs/widgets/w-div.md)
- [WText](https://anilcancakir.com/wind_kit/docs/widgets/w-text.md)
- [WButton](https://anilcancakir.com/wind_kit/docs/widgets/w-button.md)
- [WIcon](https://anilcancakir.com/wind_kit/docs/widgets/w-icon.md)
- [WImage](https://anilcancakir.com/wind_kit/docs/widgets/w-image.md)
- [WSvg](https://anilcancakir.com/wind_kit/docs/widgets/w-svg.md)
- [WInput](https://anilcancakir.com/wind_kit/docs/widgets/w-input.md)
- [WFormInput](https://anilcancakir.com/wind_kit/docs/widgets/w-form-input.md)
- [WSelect](https://anilcancakir.com/wind_kit/docs/widgets/w-select.md)
- [WFormSelect](https://anilcancakir.com/wind_kit/docs/widgets/w-form-select.md)
- [WCheckbox](https://anilcancakir.com/wind_kit/docs/widgets/w-checkbox.md)
- [WFormCheckbox](https://anilcancakir.com/wind_kit/docs/widgets/w-form-checkbox.md)
- [WRadio](https://anilcancakir.com/wind_kit/docs/widgets/w-radio.md)
- [WSwitch](https://anilcancakir.com/wind_kit/docs/widgets/w-switch.md)
- [WDatePicker](https://anilcancakir.com/wind_kit/docs/widgets/w-date-picker.md)
- [WFormDatePicker](https://anilcancakir.com/wind_kit/docs/widgets/w-form-date-picker.md)
- [WPopover](https://anilcancakir.com/wind_kit/docs/widgets/w-popover.md)
- [WTabs](https://anilcancakir.com/wind_kit/docs/widgets/w-tabs.md)
- [WCard](https://anilcancakir.com/wind_kit/docs/widgets/w-card.md)
- [WBadge](https://anilcancakir.com/wind_kit/docs/widgets/w-badge.md)
- [WAnchor](https://anilcancakir.com/wind_kit/docs/widgets/w-anchor.md)
- [WSpacer](https://anilcancakir.com/wind_kit/docs/widgets/w-spacer.md)
- [WBreakpoint](https://anilcancakir.com/wind_kit/docs/widgets/w-breakpoint.md)
- [WDynamic](https://anilcancakir.com/wind_kit/docs/widgets/w-dynamic.md)
- [WKeyboardActions](https://anilcancakir.com/wind_kit/docs/widgets/w-keyboard-actions.md)
- [WindAnimationWrapper](https://anilcancakir.com/wind_kit/docs/widgets/wind-animation-wrapper.md)

### Utilities

- [Style Parser](https://anilcancakir.com/wind_kit/docs/utilities/style-parser.md)
- [Color Helpers](https://anilcancakir.com/wind_kit/docs/utilities/color-helpers.md)
- [Context Extensions](https://anilcancakir.com/wind_kit/docs/utilities/context-extensions.md)
- [Responsive Helpers](https://anilcancakir.com/wind_kit/docs/utilities/responsive-helpers.md)
- [Spacing Helpers](https://anilcancakir.com/wind_kit/docs/utilities/spacing-helpers.md)
- [Typography Helpers](https://anilcancakir.com/wind_kit/docs/utilities/typography-helpers.md)