screen
- Repo stars 330
- License MIT
- Author repo claude-skill-registry
画面コンポーネント作成
src/screens/ に画面用コンポーネントを作成する。
手順
src/screens/ディレクトリが存在しなければ作成する- PascalCase のファイル名で
.tsxファイルを作成する(例:$ARGUMENTS.tsxまたは${ARGUMENTS}Screen.tsx) - 画面名が "Screen" で終わっていなければ自動でサフィックスを付ける
テンプレート
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export const ScreenNameScreen: React.FC = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>ScreenName</Text>
<StatusBar style="auto" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
},
});
ルール
- 画面コンポーネントは
flex: 1でフルスクリーンにする SafeAreaViewやStatusBarを適切に使う- ナビゲーションライブラリが導入済みなら、navigation props の型を適切に定義する
- ビジネスロジックが複雑な場合はカスタムフックに切り出す
- Fluxly category
- Data
- Author-declared agents
- No explicit declaration found; this is not inferred or tested compatibility
- Static check
- 94 / 100 · heuristic scan, not runtime safety proof
- Author / version / license
- @majiayu000 · MIT
- Fluxly token estimate
- Lean
- Fluxly setup estimate
- Plug-and-play
- External API key
- No requirement detected
- Detected OS requirements
- Unspecified
- Runtime requirements
- Unspecified
- Detected file/system behavior
-
- Read-only
- Write / modify
- Detected network behavior
- Local-only
- Install commands
- None (reference only)
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
The current SKILL.md does not define a fixed output example. 手順
src/screens/ ディレクトリが存在しなければ作成する PascalCase のファイル名で .tsx ファイルを作成する(例: $ARGUMENTS.tsx または ${ARGUMENTS}Screen.tsx) 画面名が "Screen" で終わっていなければ自動でサフィックスを付ける
テンプレート
テンプレート
ルール
画面コンポーネントは flex: 1 でフルスクリーンにする SafeAreaView や StatusBar を適切に使う ナビゲーションライブラリが導入済みなら、navigation props の型を適切に定義する
# 画面コンポーネント作成
`src/screens/` に画面用コンポーネントを作成する。
## 手順
1. `src/screens/` ディレクトリが存在しなければ作成する
2. PascalCase のファイル名で `.tsx` ファイルを作成する(例: `$ARGUMENTS.tsx` または `${ARGUMENTS}Screen.tsx`)
3. 画面名が "Screen" で終わっていなければ自動でサフィックスを付ける
## テンプレート
```tsx
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export const ScreenNameScreen: React.FC = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>ScreenName</Text>
<StatusBar style="auto" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
},
});
```
## ルール
- 画面コンポーネントは `flex: 1` でフルスクリーンにする
- `SafeAreaView` や `StatusBar` を適切に使う
- ナビゲーションライブラリが導入済みなら、navigation props の型を適切に定義する
- ビジネスロジックが複雑な場合はカスタムフックに切り出す Evidence boundary and execution chain
Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.
sections -> 手順 → テンプレート → ルール
terms -> src/screens/ に画面用コンポーネントを作成する。 · 1. src/screens/ ディレクトリが存在しなければ作成する 2.
files/cmd -> src/screens/ · .tsx · $ARGUMENTS.tsx · ${ARGUMENTS}Screen.tsx · flex: 1 · SafeAreaView · StatusBar
body sha256 -> 49bc152936e3
Decide Fit First
Design Intent
How To Use It
Boundaries And Review