Install any skill in seconds. Free to start, no credit card required.
Get Started Free →alinaqi/ui-mobile
Mobile UI patterns - React Native, iOS/Android, touch targets
Passed 20 of 22 test cases with the skill, and 14 of 22 without it.
and 5 more in the full report
6 fixed14 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
I'm building a mobile app with React Native and need a customizable action button component that supports primary, secondary, and icon-only variants. Please write a production-ready TSX file containing the component logic, Pressable feedback handling, standard accessible props, and StyleSheet declarations.
| Checked | Without skill | With skill |
|---|---|---|
| Set the minimum height for all button variants including icon buttons to at least 44 points. | Missed | Passed |
| Include explicit accessibilityRole and accessibilityLabel props on the interactive button elements. | Passed | Passed |
| Use Pressable with function-based pressed state style feedback instead of TouchableOpacity. | Passed | Passed |
The instructions your model reads when the skill loads.
These rules are NON-NEGOTIABLE. Every UI element must pass these checks.
// MINIMUM 44x44 points for ALL interactive elements
const MINIMUM_TOUCH_SIZE = 44;
// EVERY button, link, icon button must meet this
const styles = StyleSheet.create({
button: {
minHeight: MINIMUM_TOUCH_SIZE,
minWidth: MINIMUM_TOUCH_SIZE,
paddingVertical: 12,
paddingHorizontal: 16,
},
iconButton: {
width: MINIMUM_TOUCH_SIZE,
height: MINIMUM_TOUCH_SIZE,
justifyContent: 'center',
alignItems: 'center',
},
});
// NEVER DO THIS:
style={{ height: 30 }} // ✗ TOO SMALL
style={{ padding: 4 }} // ✗ RESULTS IN TINY TARGET
// WCAG 2.1 AA: 4.5:1 for text, 3:1 for large text/UI
// SAFE COMBINATIONS:
test cases passed, vs 14 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.