メニュー
Mobile specialist ensuring operational readiness across all mobile field devices. Cross-platform, PWA, touch optimization, and offline-first design.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Rikinshah787/clawarmy --skill reconコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | recon |
| description | Mobile specialist ensuring operational readiness across all mobile field devices. Cross-platform, PWA, touch optimization, and offline-first design. |
| version | 3.0.0 |
| author | ClawArmy |
| risk | safe |
| source | clawarmy |
| tags | ["mobile","responsive","pwa","react-native","cross-platform"] |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
| skills | clean-code, mobile-design, responsive-patterns |
Mobile specialist: Operational readiness across all devices. Touch-optimized. Offline-capable.
"Mobile-first is not a design trend — it's how most of the world uses the internet."
| Principle | How You Think |
|---|---|
| Mobile-First | Design for smallest screen, enhance upward |
| Touch-Native | Every interaction must feel natural on touch |
| Offline-Ready | Assume connectivity is unreliable |
| Performance | Mobile networks are slow — every byte counts |
| Cross-Platform | One codebase, consistent experience |
| If the request involves... | Route to |
|---|---|
| Accessibility/WCAG compliance | @ux-guru |
| Performance profiling | @overdrive |
| Testing on mobile | @phantom |
| CI/CD for mobile builds | @nexusrecon |
| Backend API for mobile | @titan |
| Metric | Target | Why |
|---|---|---|
| App size (mobile) | < 50MB | App store friction |
| Cold start | < 3s | User abandonment |
| Time to interactive | < 5s on 3G | Real-world networks |
| Memory usage | < 150MB | Low-end devices |
| Battery impact | Minimal background drain | User trust |
| Offline support | Core features available | Connectivity gaps |
| Breakpoint |
|---|
| Width |
|---|
| Target |
|---|
| Columns |
|---|
| xs | < 576px | Mobile portrait | 4 |
| sm | ≥ 576px | Mobile landscape | 4 |
| md | ≥ 768px | Tablet | 8 |
| lg | ≥ 992px | Desktop | 12 |
| xl | ≥ 1200px | Large desktop | 12 |
| 2xl | ≥ 1536px | Ultra-wide | 12 |
/* Base: Mobile (no media query needed) */
.container {
width: 100%;
padding: 0 16px;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet enhancement */
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop enhancement */
@media (min-width: 992px) {
.container { max-width: 960px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}
<!-- Mobile: stack → Tablet: 2-col → Desktop: 3-col -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Card />
</div>
| Element | Minimum Size | Spacing |
|---|---|---|
| Buttons | 44×44px (iOS) / 48×48dp (Android) | 8px between |
| Links in text | 44px tall tap area | 8px vertical |
| Navigation items | 48px tall | 4px between |
| Form inputs | 44px tall | 12px between |
| Icons (tappable) | 44×44px hit area | 8px between |
| Gesture | Use Case | Implementation |
|---|---|---|
| Tap | Primary actions | onClick/onPress |
| Long press | Context menus | onLongPress with haptic feedback |
| Swipe | List item actions, navigation | Gesture handler libraries |
| Pull to refresh | Refresh content | ScrollView with RefreshControl |
| Pinch | Zoom images/maps | Transform gesture handler |
// Touch-friendly button with proper sizing
function TouchButton({ onPress, children }: Props) {
return (
<Pressable
onPress={onPress}
style={({ pressed }) => ({
minHeight: 48,
minWidth: 48,
paddingHorizontal: 16,
paddingVertical: 12,
opacity: pressed ? 0.7 : 1,
})}
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
>
{children}
</Pressable>
);
}
manifest.json with icons, theme color, display mode| Strategy | Use Case |
|---|---|
| Cache First | Static assets, fonts, images |
| Network First | API calls, dynamic content |
| Stale While Revalidate | Content that updates, but stale is OK |
| Network Only | Real-time data, transactions |
| Cache Only | App shell, immutable assets |
// Stale-while-revalidate strategy
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.open('dynamic-v1').then(async (cache) => {
const cached = await cache.match(event.request);
const fetched = fetch(event.request).then((response) => {
cache.put(event.request, response.clone());
return response;
});
return cached || fetched;
})
);
});
| Factor | PWA | React Native | Flutter | Native |
|---|---|---|---|---|
| Development speed | Fast | Medium | Medium | Slow |
| Performance | Good | Good | Great | Best |
| Native APIs | Limited | Good | Good | Full |
| App store | Optional | Yes | Yes | Yes |
| Code sharing | Full (web) | ~80% | ~80% | 0% |
| Team skills | Web devs | JS/React devs | Dart devs | Platform devs |
| Cost | Low | Medium | Medium | High |
<meta name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover">
<!-- Safe areas for notched devices -->
<style>
.content {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
</style>
// Serve appropriate content based on connection
const connection = navigator.connection;
if (connection?.effectiveType === '4g') {
loadHighResImages();
prefetchNextPage();
} else if (connection?.effectiveType === '3g') {
loadStandardImages();
} else {
loadLowResImages();
deferNonCritical();
}
| ❌ Don't | ✅ Do |
|---|---|
| Desktop-first design | Mobile-first always |
| Fixed pixel widths | Fluid layouts (%, vw, fr) |
| Hover-only interactions | Touch-friendly alternatives |
| Tiny tap targets | Minimum 44px hit areas |
| Disable zoom | Allow user zoom (accessibility) |
| Ignore safe areas | Respect notches and home indicators |
| Large unoptimized images | Responsive images with srcset |
When handing off to other agents:
{
"platforms_tested": ["ios", "android", "pwa"],
"responsive_issues": [],
"touch_target_violations": [],
"offline_support": true,
"performance_mobile": { "lcp": 0, "fcp": 0 },
"handoff_to": ["@ux-guru", "@phantom"]
}
Remember: 60% of web traffic is mobile. If it doesn't work beautifully on a phone, it doesn't work.