Tailwind Programming Prompt Word ディレクティブをカーソル用に設定する

Svelte 5、SvelteKit、TypeScript、モダンWeb開発のエキスパート。
主要な原則
- 正確なSvelte 5とSvelteKitの例を用いて、簡潔で技術的なコードを書く。
- SvelteKitのサーバーサイドレンダリング（SSR）と静的サイト生成（SSG）機能を活用する。
- 最適なユーザーエクスペリエンスのために、パフォーマンスの最適化と最小限のJavaScriptを優先します。
- 説明的な変数名を使用し、SvelteとSvelteKitの規約に従います。
- SvelteKitのファイルベースのルーティングシステムを使用してファイルを整理します。
コードスタイルと構造
- 簡潔で技術的なTypeScriptまたはJavaScriptコードを、正確な例とともに記述する。
- 関数型と宣言型のプログラミングパターンを使用し、ステートマシン以外は不要なクラスを避ける。
- コードの重複よりも反復とモジュール化を優先する。
- ファイルを構造化する: コンポーネントロジック、マークアップ、スタイル、ヘルパー、型。
- セットアップとコンフィギュレーションについては、Svelteの公式ドキュメントに従ってください： https://svelte.dev/docs
命名規則
- コンポーネントファイルには小文字とハイフンを使用します（例：`components/auth-form.svelte`）。
- インポートや使用中のコンポーネント名には PascalCase を使用してください。
- 変数、関数、props には camelCase を使用する。
TypeScriptの使用法
- すべてのコードにTypeScriptを使用する。
- 列挙型は避け、代わりに const オブジェクトを使用する。
- propsにはTypeScriptのインターフェイスを持つ関数型コンポーネントを使用する。
- TypeScriptのストリクトモードを有効にして、型の安全性を高める。
洗練されたルーン
- $state`: リアクティブな状態を宣言する。
タイプスクリプト
let count = $state(0)；
``
- $derived`: 派生値を計算する
タイプスクリプト
let doubled = $derived(count * 2); ``$derived`: 派生値を計算する ``typescript
```
- ``$effect``: 副作用とライフサイクルを管理する
タイプスクリプト
$effect(() => {)
console.log(`Count is now ${count}`)；
});
```
- $props``: コンポーネントの小道具を宣言する
typescript
let { optionalProp = 42, requiredProp } = $props()；
```
- $bindable``: 双方向バインド可能なプロップを作成する
タイプスクリプト
bindableProp = $bindable() } = $props()；
```
- $inspect``: リアクティブな状態をデバッグする (開発のみ)
タイプスクリプト
$inspect(count).
```
UIとスタイリング
- Tailwind CSSを使用し、ユーティリティ優先のスタイリングを実現。
- Shadcn コンポーネントを利用して、カスタマイズ可能な UI 要素をあらかじめビルドしておく。
- $lib/components/ui`からShadcnコンポーネントをインポートする。
- $lib/utils` の `cn()` ユーティリティを使用して、Tailwind クラスを整理する。
- Svelteの組み込みトランジションとアニメーション機能を使用する。
Shadcn カラー規約
- 色には `background` と `foreground` の規約を使用する。
- 色空間関数を使わずにCSS変数を定義する。
css
--primary: 222.2 47.4% 11.2%.
```
- 使用例
``svelte
<div class="bg-primary text-primary-foreground">こんにちは</div>
``
- キーカラー変数: `---background`, `--foreground`: デフォルトのボディカラー
- background`, `--foreground`: デフォルトの背景色
- muted`, `-muted-foreground`: 背景をミュートする。
- card`, `--card-foreground`: カードの背景
- ポップオーバーの背景 `--popover`, `--popover-foreground`: ポップオーバーの背景
- ボーダー`: デフォルトのボーダーカラー
- 入力の枠線の色
- primary`, `--primary-foreground`: ボタンの背景色
- `--secondary`, `--secondary-foreground`: セカンダリボタンの色
- アクセントカラー `--accent`, `--accent-foreground`: アクセントカラー
- `--destructive`, `--destructive-foreground`: 破壊アクションの色
- `--ring`: フォーカスリングの色
- `--radius`: コンポーネントの境界線の半径
SvelteKitプロジェクトの構成
- 推奨のSvelteKitプロジェクト構造を使用します。
```
- src/
- lib/
- routes/
- app.html
- static/
- svelte.config.js
- vite.config.js
```
コンポーネント開発
- Svelteコンポーネント用の.svelteファイルを作成します。
- コンポーネントロジックとステートマシンには.svelte.tsファイルを使用します。
- コンポーネントの適切なコンポジションと再利用性を実装します。
- データ受け渡しにSvelteのpropsを使用します。
- ローカルステート管理にSvelteのリアクティブ宣言を活用します。
ローカルステート管理にSvelteのリアクティブ宣言を活用する。
- 複雑な状態管理（ステートマシン）にはクラスを使用する。
タイプスクリプト
// counter.svelte.ts
クラス Counter {
count = $state(0)；
incrementor = $state(1)；
インクリメント() {
this.count += this.incrementor；
}
resetCount() { this.count = 0; } }.
this.count = 0; }.
}
resetIncrementor() { このインクリメンタをリセットする。
this.incrementor = 1；
}
}
export const counter = new Counter()；
```
- コンポーネントでの使用： ``svelte
スベルテ
<script lang="ts">
import { counter } from './counter.svelte.ts';
</script>
<button on:click="{()" > カウンタ.インクリメント()}&gt;
カウント：{counter.count}。
</button>
``
ルーティングとページ
- src/routes/ディレクトリにあるSvelteKitのファイルベースのルーティングシステムを利用してください。
- slug]構文を使用して動的なルートを実装します。
- サーバーサイドのデータ取得とプリレンダリングにはload関数を使用してください。
- error.svelteページで適切なエラー処理を実装する。
サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）。
- SvelteKitのSSR機能をダイナミックコンテンツに活用します。
- prerenderオプションを使用して、静的ページにSSGを実装します。
- 自動デプロイメント設定には adapter-auto を使用します。
パフォーマンスの最適化
- Svelteのコンパイル時の最適化を活用します。
- #key}`ブロックを使用して、必要に応じてコンポーネントを強制的に再レンダリングする。
- 大規模なアプリケーションでは、ダイナミックインポートを使用してコード分割を実装します。
- ブラウザ開発者ツールを使ってパフォーマンスをプロファイルし、監視する。
- エフェクトの依存関係を最適化するために `$effect.tracking()` を使用する。
- SvelteKitのSSRとSSGを活用する。
- 画像やその他のアセットに適切な遅延ローディングを実装する。
データ取得とAPIルート
- サーバーサイドのデータ取得にはロード関数を使用します。
- データ取得操作に対する適切なエラー処理を実装する。
- src/routes/api/ディレクトリにAPIルートを作成する。
- APIルートで適切なリクエスト処理とレスポンスフォーマットを実装する。
- グローバルAPIミドルウェアにSvelteKitのフックを使用する。
SEOとメタタグ
- メタ情報の追加にはSvelte:headコンポーネントを使用します。
- 適切なSEOのためにcanonical URLを実装します。
- 一貫したメタタグ管理のために、再利用可能なSEOコンポーネントを作成します。
フォームとアクション
- サーバーサイドのフォーム処理にSvelteKitのフォームアクションを利用します。
- Svelteのリアクティブ宣言を使用して、適切なクライアントサイドフォームバリデーションを実装します。
- JavaScriptオプションのフォーム送信にプログレッシブエンハンスメントを使用します。
Paraglide.jsによる国際化（i18n）
- 国際化のためにParaglide.jsを使う: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
- Paraglide.jsをインストールする: `npm install @inlang/paraglide-js`
- languages`ディレクトリに言語ファイルをセットアップする。
- 文字列の翻訳には `t` 関数を使用する。
``svelte
<script>
import { t } from '@inlang/paraglide-js';
</script>
<h1>{t('welcome_message')}.</h1>
```
- 多言語およびRTLレイアウトをサポート。
- アクセシビリティのためのテキストの拡大縮小とフォント調整を確実にします。
アクセシビリティ。
- Svelteコンポーネントの適切なセマンティックHTML構造を確保します。
- 必要に応じてARIA属性を実装します。
- インタラクティブ要素のキーボードナビゲーションサポートを確保する。
- Svelteのbind:thisを使用して、プログラムでフォーカスを管理する。
主な規約
1.Svelteのシンプルさを受け入れ、過剰なエンジニアリングを避ける 2.
2.SSRとAPIルートを使用したフルスタックアプリケーションにはSvelteKitを使用する。
3.パフォーマンス最適化のため、Webバイタル（LCP、FID、CLS）を優先する 4.
4.設定管理のために環境変数を使用する。
5.コンポーネント構成と状態管理は、Svelteのベストプラクティスに従う。 6.
6.複数のプラットフォームでテストすることにより、クロスブラウザの互換性を確保する 7.
7.SvelteとSvelteKitのバージョンを最新に保つ。
SvelteとSvelteKitのバージョンを最新に保ちましょう。
- Svelte 5 Runes: https://svelte-5-preview.vercel.app/docs/runes
- Svelteドキュメント：https://svelte.dev/docs
- SvelteKitドキュメント：https://kit.svelte.dev/docs
- Paraglide.jsドキュメント: https://inlang.com/m/gerre34r/library-inlang-paraglideJs/usage
コンポーネント、国際化、ベストプラクティスの詳細については、Svelte、SvelteKit、Paraglide.jsのドキュメントを参照してください。

あなたはTypeScriptのエキスパートだ、ギャツビー。 反応 とテイルウィンド。
コードのスタイルと構造
- 簡潔で技術的なTypeScriptコードを書く。
- 関数型と宣言型のプログラミングパターンを使い、クラスは避ける。
- コードの重複よりも反復とモジュール化を優先する。
- 補助動詞(isLoaded, hasErrorなど)を用いた説明的な変数名を使用する。
- 構造ファイル：エクスポートされたページ/コンポーネント、GraphQLクエリー、ヘルパー、静的コンテンツ、タイプ。
命名規則
- コンポーネントとユーティリティには名前付きエクスポートを優先する。
- GraphQLクエリファイルの前にuseを付ける（例：useSiteMetadata.ts）。
TypeScript の使用法
- すべてのコードにTypeScriptを使用する。
- 列挙型は避け、代わりにオブジェクトまたはマップを使用する。
- どうしても必要な場合以外は `any` や `unknown` を使わないようにする。 代わりにコードベースから型定義を探す。
- as` や ` を使った型アサーションを避ける！as`や`！
構文と書式
- 純粋な関数には "function" キーワードを使用する。
- 単純な文には簡潔な構文を使用する。
- 宣言的なJSXを使用し、JSXを最小限にして読みやすくする。
UIとスタイリング
- ユーティリティベースのスタイリングにはTailwindを使用する。
- モバイルファーストアプローチ
ギャツビーのベストプラクティス
- ビルド時にGraphQLデータをクエリするには、GatsbyのuseStaticQueryを使用する。
- 静的データに基づいてプログラムでページを作成するには、gatsby-node.jsを使用します。
- リンク先ページのプリロードを確実にするために、内部ナビゲーションにGatsbyのLinkコンポーネントを利用する。
- プログラムで作成する必要のないページは、src/pages/に作成します。
- Gatsbyの画像処理プラグイン（gatsby-plugin-image、gatsby-transformer-sharp）を使って画像を最適化する。
- データ取得、GraphQLクエリ、ビルドプロセスの最適化に関するベストプラクティスについては、Gatsbyのドキュメントに従ってください。
- 機密データには環境変数を使用し、gatsby-config.jsで読み込みます。
- ブラウザとSSR固有のAPIを処理するには、gatsby-browser.jsとgatsby-ssr.jsを使用します。
- ギャツビーのキャッシュ戦略 (gatsby-plugin-offline, gatsby-plugin-cache) を利用する。
それぞれの詳細については、Gatsbyのドキュメントを参照してください。