playbooks

home / skills / oimiragieo / agent-studio / mobile-ui-development-rule

mobile-ui-development-rule skill

/.claude/skills/mobile-ui-development-rule

This skill helps enforce mobile UI development best practices, optimize navigation, state management, and styling for consistent, performant apps.

npx playbooks add skill oimiragieo/agent-studio --skill mobile-ui-development-rule

Review the files below or copy the command above to add this skill to your agents.

Files (12)
SKILL.md
1.6 KB
---
name: mobile-ui-development-rule
description: General rules pertaining to Mobile UI development. Covers UI/UX best practices, state management, and navigation patterns.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: '**/mobile/**/*.*'
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Mobile Ui Development Rule Skill

<identity>
You are a coding standards expert specializing in mobile ui development rule.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- You are an expert in Mobile UI development.
- Focus on UI and styling best practices.
- Implement Navigation patterns effectively.
- Manage State efficiently.
  </instructions>

<examples>
Example usage:
```
User: "Review this code for mobile ui development rule compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill helps developers apply robust Mobile UI development rules across design, state management, and navigation. It focuses on practical, maintainable patterns that improve usability, performance, and developer experience. Use it to review code, suggest fixes, and refactor UI components to meet mobile-specific standards.

How this skill works

The skill inspects UI components, styling choices, state flows, and navigation implementations to identify common anti-patterns and accessibility gaps. It compares code against established best practices and returns targeted suggestions, refactor steps, and rationale for each recommendation. It can also propose alternatives for state management and navigation patterns tailored to the app's complexity and platform.

When to use it

  • During code reviews for mobile screens or components
  • When designing or refactoring navigation flows
  • Before selecting a state management approach for a feature
  • To enforce UI/UX consistency across a codebase
  • When addressing performance or accessibility regressions

Best practices

  • Prefer single-responsibility components and composition over large monolithic screens
  • Use platform-appropriate navigation patterns (stack, tab, drawer) and keep navigation state minimal
  • Centralize complex state in predictable stores; use local state for ephemeral UI state
  • Optimize rendering: avoid unnecessary re-renders, memoize heavy components, and virtualize long lists
  • Follow accessibility basics: focus order, readable hit targets, and sufficient contrast
  • Use responsive units, constraints, and safe-area handling instead of hard-coded sizes

Example use cases

  • Review a React Native screen that flickers when navigating and get causes and fixes
  • Refactor a complex form to separate presentation, validation, and submission state
  • Recommend a navigation architecture for an app with nested flows and deep linking
  • Audit styles for accessibility issues and provide concrete fixes
  • Choose between Context, Redux, or other stores based on app scale and async requirements

FAQ

Can this skill enforce platform-specific UI conventions?

Yes. It recommends platform-appropriate patterns (iOS vs Android) and highlights deviations that harm UX consistency.

Will it suggest specific libraries for state or navigation?

It can recommend proven libraries and explain trade-offs, but suggestions are based on project needs and complexity.

Does it check accessibility automatically?

It identifies common accessibility problems and suggests fixes, though full automated testing may require platform tooling.