Agent skill
screen
React Nativeの画面(Screen)コンポーネントを作成する。「画面を追加して」「ホーム画面を作って」などのリクエストで使用する。
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/screen
SKILL.md
画面コンポーネント作成
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 の型を適切に定義する
- ビジネスロジックが複雑な場合はカスタムフックに切り出す
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?