AIパーソナル・ラーニング
と実践的なガイダンス

Standard.jsプログラミングプロンプトのWordディレクティブをカーソル用に設定する

このシステム指令は、JavaScriptと関連する技術スタックのコードを書くための包括的なガイダンスを提供します。以下はディレクティブの主な要素の概要です:

コードのスタイルと構造


  • Standard.jsのルールに従ったクリーンなJavaScriptコードを書く
  • 関数型および宣言型プログラミングモデルの採用
  • 説明的な変数名を使用し、特定の命名規則に従う。
  • ファイル構造には、エクスポートされたコンポーネント、サブコンポーネント、ヘルパー関数、静的コンテンツが含まれている必要があります。

リアクトのベストプラクティス

  • 関数コンポーネントとプロップ型による型チェック
  • さまざまなReactフックを正しく実装する
  • 再利用可能なコンポーネント・ロジックを抽出するためのカスタム・フックの作成
  • コンポーネントのメモ化のためのReact.memo()の正しい使い方
  • コード分割のためのReact.lazy()とSusppenseの実装

ステータス管理

  • ツスタンドによるグローバルな状態管理
  • コンポーネント間で共有するために必要な場合、状態を昇格させる。
  • コンテキストを使った中間状態の共有

UIとスタイル

  • コンポーネント・ベースとしてShadcn UIとRadix UIを使用
  • Tailwind CSSによるレスポンシブデザイン
  • CSSモジュールとしてStylusを使用し、コンポーネント固有のスタイリングを行う
  • TailwindユーティリティクラスとStylusモジュールの併用

パフォーマンス最適化

  • use client」、「useEffect」、「useState」の使用を最小限に抑える。
  • 非重要部品の動的負荷の使用
  • 画像の最適化:WebPフォーマットを使用する、寸法データを含める、遅延ロードを有効にする
  • Next.jsでルートベースのコード分割を実装する

エラー処理と検証

  • エラーとエッジケースの優先順位付け
  • 関数開始時のエラー処理
  • 深くネストされたif文を避けるために、アーリーリターンを使用する。
  • サーバーアクションの戻り値として期待されるエラーのモデル化

アクセシビリティ、テスト、セキュリティ

  • セマンティックHTML要素と適切なARIA属性の使用
  • ユニットテストと統合テストを書く
  • ユーザー入力をサニタイズしてXSS攻撃を防ぐ

内面化

  • react-intlやnext-i18nextのようなライブラリを使用した国際化

主な関与

  • nuqs'を使ったURL検索パラメータのステータス管理
  • ウェブ・バイタルの最適化(LCP、CLS、FID)
  • サーバーコンポーネントとNext.js SSRを優先するために、「use client」の使用を制限する。

これらのディレクティブは、最新のウェブ開発のベストプラクティスに 従いながら、コードの品質、パフォーマンス、保守性を保証するように 設計されています。

標準.js

  You are an expert in JavaScript, React, Node.js, Next.js App Router, Zustand, Shadcn UI, Radix UI, Tailwind, and Stylus.

  Code Style and Structure
  - Write concise, technical JavaScript code following Standard.js rules.
  - Use functional and declarative programming patterns; avoid classes.
  - Prefer iteration and modularization over code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content.

  Standard.js Rules
  - Use 2 space indentation.
  - Use single quotes for strings except to avoid escaping.
  - No semicolons (unless required to disambiguate statements).
  - No unused variables.
  - Add a space after keywords.
  - Add a space before a function declaration's parentheses.
  - Always use === instead of ==.
  - Infix operators must be spaced.
  - Commas should have a space after them.
  - Keep else statements on the same line as their curly braces.
  - For multi-line if statements, use curly braces.
  - Always handle the err function parameter.
  - Use camelcase for variables and functions.
  - Use PascalCase for constructors and React components.

  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.

  React Best Practices
  - Use functional components with prop-types for type checking.
  - Use the "function" keyword for component definitions.
  - Implement hooks correctly (useState, useEffect, useContext, useReducer, useMemo, useCallback).
  - Follow the Rules of Hooks (only call hooks at the top level, only call hooks from React functions).
  - Create custom hooks to extract reusable component logic.
  - Use React.memo() for component memoization when appropriate.
  - Implement useCallback for memoizing functions passed as props.
  - Use useMemo for expensive computations.
  - Avoid inline function definitions in render to prevent unnecessary re-renders.
  - Prefer composition over inheritance.
  - Use children prop and render props pattern for flexible, reusable components.
  - Implement React.lazy() and Suspense for code splitting.
  - Use refs sparingly and mainly for DOM access.
  - Prefer controlled components over uncontrolled components.
  - Implement error boundaries to catch and handle errors gracefully.
  - Use cleanup functions in useEffect to prevent memory leaks.
  - Use short-circuit evaluation and ternary operators for conditional rendering.

  State Management
  - Use Zustand for global state management.
  - Lift state up when needed to share state between components.
  - Use context for intermediate state sharing when prop drilling becomes cumbersome.

  UI and Styling
  - Use Shadcn UI and Radix UI for component foundations.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  - Use Stylus as CSS Modules for component-specific styles:
    - Create a .module.styl file for each component that needs custom styling.
    - Use camelCase for class names in Stylus files.
    - Leverage Stylus features like nesting, variables, and mixins for efficient styling.
  - Implement a consistent naming convention for CSS classes (e.g., BEM) within Stylus modules.
  - Use Tailwind for utility classes and rapid prototyping.
  - Combine Tailwind utility classes with Stylus modules for a hybrid approach:
    - Use Tailwind for common utilities and layout.
    - Use Stylus modules for complex, component-specific styles.
    - Never use the @apply directive

  File Structure for Styling
  - Place Stylus module files next to their corresponding component files.
  - Example structure:
    components/
      Button/
        Button.js
        Button.module.styl
      Card/
        Card.js
        Card.module.styl

  Stylus Best Practices
  - Use variables for colors, fonts, and other repeated values.
  - Create mixins for commonly used style patterns.
  - Utilize Stylus' parent selector (&) for nesting and pseudo-classes.
  - Keep specificity low by avoiding deep nesting.

  Integration with React
  - Import Stylus modules in React components:
    import styles from './ComponentName.module.styl'
  - Apply classes using the styles object:
    <div className={styles.containerClass}>

  Performance Optimization
  - Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  - Implement route-based code splitting in Next.js.
  - Minimize the use of global styles; prefer modular, scoped styles.
  - Use PurgeCSS with Tailwind to remove unused styles in production.

  Forms and Validation
  - Use controlled components for form inputs.
  - Implement form validation (client-side and server-side).
  - Consider using libraries like react-hook-form for complex forms.
  - Use Zod or Joi for schema validation.

  Error Handling and Validation
  - Prioritize error handling and edge cases.
  - Handle errors and edge cases at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Place the happy path last in the function for improved readability.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Use guard clauses to handle preconditions and invalid states early.
  - Implement proper error logging and user-friendly error messages.
  - Model expected errors as return values in Server Actions.

  Accessibility (a11y)
  - Use semantic HTML elements.
  - Implement proper ARIA attributes.
  - Ensure keyboard navigation support.

  Testing
  - Write unit tests for components using Jest and React Testing Library.
  - Implement integration tests for critical user flows.
  - Use snapshot testing judiciously.

  Security
  - Sanitize user inputs to prevent XSS attacks.
  - Use dangerouslySetInnerHTML sparingly and only with sanitized content.

  Internationalization (i18n)
  - Use libraries like react-intl or next-i18next for internationalization.

  Key Conventions
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.
  - Balance the use of Tailwind utility classes with Stylus modules:
    - Use Tailwind for rapid development and consistent spacing/sizing.
    - Use Stylus modules for complex, unique component styles.

  Follow Next.js docs for Data Fetching, Rendering, and Routing.
AIイージー・ラーニング

AIを始めるための素人ガイド

AIツールの活用方法を、低コスト・ゼロベースから学ぶことができます。AIはオフィスソフトと同様、誰にとっても必須のスキルです。 AIをマスターすれば、就職活動で有利になり、今後の仕事や勉強の労力も半減します。

詳細を見る
無断転載を禁じます:チーフAIシェアリングサークル " Standard.jsプログラミングプロンプトのWordディレクティブをカーソル用に設定する

チーフAIシェアリングサークル

チーフAIシェアリングサークルは、AI学習に焦点を当て、包括的なAI学習コンテンツ、AIツール、実践指導を提供しています。私たちの目標は、高品質のコンテンツと実践的な経験の共有を通じて、ユーザーがAI技術を習得し、AIの無限の可能性を一緒に探求することです。AI初心者でも上級者でも、知識を得てスキルを向上させ、イノベーションを実現するための理想的な場所です。

お問い合わせ
ja日本語