How this skill is triggered — by the user, by Claude, or both
Slash command
/syntek-dev-suite:stack-mobileThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Last Updated**: 29/12/2025
Last Updated: 29/12/2025 Version: 1.3.1 Maintained By: Development Team Language: British English (en_GB) Timezone: Europe/London
| Layer | Technology |
|---|---|
| Platform | Native / Simulator (NO Docker) |
| Framework | React Native, Expo (optional), TypeScript |
| Styling | NativeWind (Tailwind for Mobile) |
| Navigation | React Navigation |
| Testing | Jest, React Native Testing Library |
CRITICAL: Do NOT suggest Docker commands for this stack. Mobile runs natively.
| Task | Command |
|---|---|
| Start Metro Bundler | npm start |
| Run on iOS | npm run ios |
| Run on Android | npm run android |
| Install iOS Pods | cd ios && pod install && cd .. |
| Run tests | npm test |
| Run tests (watch) | npm test -- --watch |
| Install packages | npm install <package> |
| Lint | npm run lint |
| Clean build (iOS) | cd ios && rm -rf build && cd .. |
| Clean build (Android) | cd android && ./gradlew clean && cd .. |
| Reset Metro cache | npm start -- --reset-cache |
<View>, <Text>, <ScrollView>, <TouchableOpacity><div>, <span>, <p>, <button>import { View, Text, TouchableOpacity } from 'react-native';
interface UserCardProps {
user: User;
onPress: (userId: string) => void;
}
export function UserCard({ user, onPress }: UserCardProps): JSX.Element {
return (
<TouchableOpacity
className="rounded-lg bg-white p-4 shadow-md"
onPress={() => onPress(user.id)}
>
<Text className="text-lg font-semibold text-gray-900">{user.name}</Text>
<Text className="text-sm text-gray-500">{user.email}</Text>
</TouchableOpacity>
);
}
className="flex-1 bg-white"| Pattern | Use Case |
|---|---|
Platform.OS === 'ios' | Inline conditionals |
Component.ios.tsx / Component.android.tsx | Separate component files |
Platform.select({ ios: {...}, android: {...} }) | Style objects |
src/
├── components/
│ ├── ui/ # Generic UI components
│ │ ├── Button.tsx
│ │ └── Card.tsx
│ └── features/ # Feature-specific components
├── screens/ # Screen components
│ ├── HomeScreen.tsx
│ └── ProfileScreen.tsx
├── navigation/
│ ├── types.ts # Navigation type definitions
│ ├── RootNavigator.tsx
│ └── TabNavigator.tsx
├── hooks/
│ ├── useAuth.ts
│ └── useStorage.ts
├── services/
│ └── api.ts
├── types/
│ └── index.ts
├── utils/
│ └── formatters.ts
└── App.tsx
SafeAreaView)import { render, fireEvent, screen } from '@testing-library/react-native';
import { UserCard } from './UserCard';
describe('UserCard', () => {
const mockUser = { id: '1', name: 'Test User', email: '[email protected]' };
it('renders user information', () => {
render(<UserCard user={mockUser} onPress={jest.fn()} />);
expect(screen.getByText('Test User')).toBeOnTheScreen();
expect(screen.getByText('[email protected]')).toBeOnTheScreen();
});
it('calls onPress when tapped', () => {
const onPress = jest.fn();
render(<UserCard user={mockUser} onPress={onPress} />);
fireEvent.press(screen.getByText('Test User'));
expect(onPress).toHaveBeenCalledWith('1');
});
});
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub syntek-dev/syntek-dev-suite --plugin syntek-dev-suite