react

React / Next.js の TypeScript 規約。コンポーネント（.tsx）、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。

Repository: yend724/typography-playground
Letzte Quellaktivität: 9. Februar 2026 um 07:55
Erkannte Sprache von SKILL.md: Japanisch
Sterne: 0
Forks: 0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/yend724/typography-playground --skill react

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

commit

Git コミットメッセージの規約。Conventional Commits 形式、日本語。 Apply when creating git commits, reviewing commit messages, or when the user asks to commit changes.

2026-02-09

review

コミット前のセルフレビュー。プロジェクトの規約に沿っているかチェックする。 Apply when the user asks to review code, check conventions, or requests a self-review before committing.

2026-02-09

styling

スタイリング規約。Tailwind CSS v4 と inline styles の使い分け。 UI コンポーネントやプレビュー領域のスタイリング時に適用する。 Tailwind はアプリ UI に、inline styles はプレビュー領域に使い、混在させない。

2026-02-09

Alle aus diesem Repository ansehen

const useFilter = <T,>(items: readonly T[], predicate: (item: T) => boolean) =>
  useMemo(() => items.filter(predicate), [items, predicate])

setItems((prev) => [...prev, newItem])
setItems((prev) => prev.map((item) => item.id === id ? { ...item, done: true } : item))

const SearchForm = ({ onSearch }: Readonly<{ onSearch: (q: string) => void }>) => {
  const [query, setQuery] = useState("")
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSearch(query)
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
    </form>
  )
}

type PageProps = Readonly<{ params: Promise<{ slug: string }> }>

const ArticlePage = async ({ params }: PageProps) => {
  const { slug } = await params
  const article = await fetchArticle(slug)
  return <Article data={article} />
}
// Next.js のページは default export が必要
export default ArticlePage

"use server"

import { ok, err, type Result } from "neverthrow"

const createPost = async (formData: FormData): Promise<Result<Post, ValidationError>> => {
  const parsed = parsePostInput(formData)
  if (parsed.isErr()) return err(parsed.error)
  const post = await db.post.create({ data: parsed.value })
  return ok(post)
}

src/
├── app/                    # ルート（App Router）
│   ├── layout.tsx
│   └── users/page.tsx
├── features/               # 機能モジュール（純粋ロジック + actions）
│   └── auth/
│       ├── validate.ts
│       └── actions.ts
├── components/             # 共有 UI コンポーネント
└── lib/                    # 共有ユーティリティ

react

Installationsoptionen

Quelldateien prüfen

React / Next.js 規約

コンポーネント

React / Next.js 規約

コンポーネント

Props

Hooks

State — 常に不変

イベントハンドラ

Next.js Server Components（デフォルト）

Next.js Client Components

Next.js Server Actions

プロジェクト構成

name	react
description	React / Next.js の TypeScript 規約。コンポーネント（.tsx）、hooks、Server Components、Client Components、 Server Actions の実装時に適用する。

react

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

React / Next.js 規約

コンポーネント

React / Next.js 規約

コンポーネント

Props

Hooks

State — 常に不変

イベントハンドラ

Next.js Server Components（デフォルト）

Next.js Client Components

Next.js Server Actions

プロジェクト構成