react-component-convention SKILL.md skillA
react-component-convention from ncaq/konoka is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add ncaq/konoka/react-component-convention@git:20260409.f28ecbePins git:20260409.f28ecbe in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- ncaq/konoka
- Path
plugins/web-tasuke/skills/react-component-convention/SKILL.md- Versions recorded
- 1
- Latest version
- git:20260409.f28ecbe, committed Apr 9, 2026
- Size
- 4,584 bytes
- Repository stars
- 3
- License
- Apache-2.0
React component file conventions covering structure ordering, one-component-per-file, and splitting bloated components. Use when writing or reviewing React components.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Reactコンポーネントの規約
## ファイル内の構造順序を守る
すべてのコンポーネントファイルは、上から順に次の流れで構成します。
1. デザイン定義 — `sva`/`cva`/`css`などのstyled-system呼び出し
2. props定義 — `type Props = ...`や`interface Props { ... }`
3. Functional Component定義 — `export const Foo: React.FC<Props> = ...`や`export function Foo(props: Props): React.ReactElement { ... }`
import群は当然この前に置きます。
純粋な振る舞いだけのコンポーネントならデザイン定義は省略可能ですが、
それ以外で順序の入れ替えは認めません。
理由: 「見た目」「インターフェース」「振る舞い」の責務分離をファイル内の縦方向で表現することで、
コンポーネントを読むときの認知の階段を一定に保つため。
## 1ファイル1コンポーネント
1つのファイルの中にexport/非exportを問わずコンポーネントを2つ以上書かないでください。
ファイル内で再利用される小さなコンポーネントが必要になった場合は、必ず別ファイルに切り出します。
切り出した先のファイル名はIDEのQuick Openで識別しやすい名前にし、
`index.tsx`や`index.ts`といった汎用名を新規作成しないでください。
既存の`index.tsx`を大幅に書き換える場合も、
リファクタリングの一環として適切なファイル名にリネームします。
例外として、他のコンポーネントのrender propに渡すためのごく小さなコンポーネントは、
その場で定義することを許容します。
`<DataGrid renderRow={...} />`や`columns[i].render`、
`react-hook-form`の`Controller`の`render`などが該当します。
ただし次の条件をすべて満たすこと。
- 呼び出し元のrender関数の引数型にそのまま当てはめられる、数行〜十数行程度の軽量なものに限る
- ファイル内で1度しか使われない。使い回される可能性が出てきた時点で別ファイルに切り出す
- どのrender propに渡すために定義しているのかを説明するコメントを直前に付ける
例:
```tsx
// DataGridのrenderRowに渡すための行コンポーネント。このファイル内でしか使わない
const DeviceRow: React.FC<{ device: Device }> = ({ device }) => (
<tr>
…Read the whole file at its exact version.
How to install
mdr add ncaq/konoka/react-component-convention@sha256:d9041e884d69fc6eThe line at the top of this page pins the label git:20260409.f28ecbe, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_vemof4d5xxbvrqt6)
1 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 1 version of this file, committed on Apr 9, 2026.
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (4584 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
ncaq/konoka · 3 stars · license Apache-2.0 · pushed 2026-10-19 · branch master
API
GET https://markdownregistry.com/api/v1/artifacts/art_vemof4d5xxbvrqt6 GET https://markdownregistry.com/api/v1/resolve?ref=ncaq/konoka/react-component-convention GET https://markdownregistry.com/api/v1/blob/d9041e884d69fc6ec83d768593534fa2179a0a62bb2c542e18eb37f25ec096bc
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.