envy-7z/mobile-ui-slicing-playbook
skills/mobile-ui-slicing-playbook/SKILL.md
Mobile UI slicing workflow for Android Compose, Android XML, and Flutter widgets. Use when implementing new screens/components, splitting large UI tasks into safe incremental slices, fixing layout/state coupling, or converting design specs into maintainable UI without logic leakage.
testing
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add envy-7z/mobile-agent-skillpack mobile-ui-slicing-playbookInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 2:01 AM4.8s4 files scanned
SKILL.md
- name:
- mobile-ui-slicing-playbook
- description:
- Mobile UI slicing workflow for Android Compose, Android XML, and Flutter widgets. Use when implementing new screens/components, splitting large UI tasks into safe incremental slices, fixing layout/state coupling, or converting design specs into maintainable UI without logic leakage.
Mobile UI Slicing Playbook
Overview
Build UI in thin, verifiable slices so each commit changes one concern: structure, styling, state wiring, interactions, and edge states.
Workflow
- Detect target stack
- Compose:
@Composable,Modifier,ui/packages. - XML View system:
res/layout/*.xml, adapters, custom views. - Flutter:
Widgettrees,build(), feature presentation files.
- Create slice plan before coding
- Slice 1: static layout skeleton.
- Slice 2: design tokens, spacing, typography, and colors.
- Slice 3: state rendering (
loading,content,error,empty). - Slice 4: interactions and callbacks.
- Slice 5: accessibility, previews/tests, and polish.
- Implement in minimal deltas
- Keep each slice scoped to one screen/component boundary.
- Keep business rules out of UI files; invoke state/use-case layers only.
- Prefer extracted subcomponents over one giant file.
- Verify every slice
- Build and run target module.
- Verify one happy path and one edge state per slice.
- If layout-related, validate spacing and alignment on at least one small and one large viewport.
Stack-Specific Rules
Compose
- Split into small composables with clear parameter contracts.
- Hoist mutable state up; keep leaf composables stateless where possible.
- Use previews for key states.
XML
- Keep XML declarative; avoid logic-heavy custom views unless required.
- Move behavior to view-model/presenter/controller layers.
- Reuse styles/themes to avoid duplicated attributes.
Flutter
- Break long
build()trees into private widgets. - Keep state boundaries explicit (
Bloc,Provider,Riverpod, or existing pattern). - Avoid pushing domain logic into widget classes.
Output Format
Use this structure in responses:
# UI Slicing Plan
## Target
- Platform:
- Screen/component:
- Files:
## Slices
1. Skeleton
2. Visual styling
3. State rendering
4. Interactions
5. Verification/polish
## Risks
- ...
## Next Patch
- Exact files to modify
- Minimal diff scope
Guardrails
- Do not refactor unrelated architecture while slicing UI.
- Do not mix layout and deep business logic in the same patch.
- Keep patches reversible and easy to review.
Resources
- Run
scripts/ui_slice_snapshot.sh <repo_root>to map UI files and hotspots. - Use
references/ui-slicing-checklist.mdfor review criteria.
Related Skills
envy-7z/writing-plans
development
VerifiedTrustedCommunity
Use when you have a spec or requirements for a multi-step task, before touching code
SKILL.mdUpdated Apr 5, 2026
envy-7z/verification-before-completion
data-ai
VerifiedTrustedCommunity
Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always
SKILL.mdUpdated Apr 5, 2026
envy-7z/using-git-worktrees
tools
VerifiedTrustedCommunity
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
SKILL.mdUpdated Apr 5, 2026
envy-7z/thinkies
testing
VerifiedTrustedCommunity
Applies Kent Beck's Thinkies—pattern-based thinking habits that generate ideas. Use when stuck, exploring alternatives, or reframing decisions.
SKILL.mdUpdated Apr 5, 2026