メニュー
React 19 + Vite SPA development guidelines. Composition patterns, performance
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | react-vite-guide |
| description | React 19 + Vite SPA development guidelines. Composition patterns, performance |
Comprehensive guidelines for building React 19 SPA applications with Vite. Combines composition patterns, performance optimization, and web interface best practices into a single reference optimized for AI agent workflows.
use(), ref as prop, React Compiler supportReact.lazy() + dynamic import(), env variables, HMRComponent architecture and state management patterns for scalable React apps.
| Priority | Category | Impact |
|---|---|---|
| 1 | Component Architecture | HIGH |
| 2 | State Management | MEDIUM |
| 3 | Implementation Patterns | MEDIUM |
| 4 | React 19 APIs | MEDIUM |
Key topics:
use() replaces useContext(), ref as regular propPerformance optimization patterns adapted for Vite + React 19 SPA. Next.js-specific patterns removed; Vite equivalents provided.
| Priority | Category | Impact |
|---|---|---|
| 1 | Async Optimization | CRITICAL |
| 2 | Bundle Size | CRITICAL |
| 3 | Client-Side Data Fetching | MEDIUM-HIGH |
| 4 | Re-render Optimization | MEDIUM |
| 5 | Rendering Performance | MEDIUM |
| 6 | JavaScript Performance | LOW-MEDIUM |
| 7 | Advanced Patterns | LOW |
Key topics:
Promise.all() and dependency-based parallelizationReact.lazy() + Suspense for code splitting (Vite)setState, lazy state initializationuseTransition for non-urgent updatescontent-visibility: auto for long listsuseRef for transient valuesUI/UX patterns for accessibility, forms, animation, performance, and content quality.
| Category | Focus |
|---|---|
| Accessibility | ARIA, semantic HTML, keyboard handlers |
| Focus States | focus-visible, no bare outline-none |
| Forms | autocomplete, correct type, paste allowed |
| Animation | prefers-reduced-motion, compositor-only props |
| Typography | Ellipsis, curly quotes, tabular-nums |
| Content Handling | Truncation, empty states, long content |
| Images | Explicit dimensions, lazy loading |
| Performance | Virtualization, no layout reads in render |
| Navigation & State | URL reflects state, deep-linkable UI |
| Touch & Interaction | touch-action, overscroll-behavior |
| Dark Mode | color-scheme, theme-color meta |
| Locale & i18n | Intl.DateTimeFormat, Intl.NumberFormat |
Vite-specific configuration, conventions, and optimization patterns.
Key topics:
import.meta.env)manualChunks, rollupOptions)Analyze repository structure and generate or update standardized AGENTS.md files that serve as contributor guides for AI agents. Supports both single-repo and monorepo structures. Measures LOC to determine character limits and produces structured documents covering overview, folder structure, patterns, conventions, and working agreements. Update mode refreshes only the standard sections while preserving user-defined custom sections. Use when setting up a new repository, onboarding AI agents to an existing codebase, updating an existing AGENTS.md, or when the user mentions AGENTS.md.
Identify and validate profitable business opportunities by analyzing market size (TAM/SAM/SOM), unit economics, competitive landscape, and PMF indicators. Generates comprehensive HTML reports with opportunity scorecards.
Performs production-ready code reviews on git changes. Supports commit/range/file-scoped analysis, impact assessment, breaking-change detection, confidence-aware finding classification, and risk-weighted verdict generation.
Performs OWASP-based code security audits on any codebase. Analyzes source code against ASVS 5.0.0 verification requirements, API Security Top 10 2023 risk patterns, OWASP CheatSheet secure coding practices, and WSTG testing methodologies. Input is a codebase to review; output is a detailed Markdown security audit report. Use when the user requests a security audit, security review, vulnerability assessment, or code security analysis.
React composition patterns that scale. Use when refactoring components with
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".