원클릭으로 Manus에서 모든 스킬 실행

시작하기

mobile-ux-review

스타3

포크0

업데이트2026년 5월 16일 07:25

Use for mobile-first redesigns, tracker UX work, homepage/calculator/shops polish, Arabic/RTL mobile review.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

vctb12

vctb12/GoldTickerLive

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Skill: Mobile UX Review

Use this to systematically improve mobile UX without breaking Arabic/RTL parity or accessibility.

Inputs to gather

Which pages are in scope (homepage, tracker, calculator, shops, methodology, country pages)
Target viewports (default: 360, 390, 430, 768)
Whether RTL/Arabic parity is part of the scope (default: yes)
Performance baseline (current Lighthouse mobile scores from docs/performance-baseline.json)

Workflow

Establish baseline. Take "before" screenshots at each target viewport, EN + AR.
Apply page-specific checklist (below).
Apply cross-cutting checklists: tokens, RTL mobile, accessibility.
Implement changes in coherent commits — token first, then surface, then page.
Take "after" screenshots at same viewports.
Run npm run lint, npm run validate, npm test. Optionally npm run a11y.
Report with screenshot pairs + Lighthouse delta.

Checklists in this skill

Common mistakes

Polishing desktop and shipping; mobile regresses.
Adding sticky bars that overlap the chart on 360px.
Translating English-shaped copy as Arabic (run it past a native speaker or simplify).
Forgetting inputmode on numeric inputs.
Reducing font sizes to "fit" mobile (use truncation + tooltips, not font shrinks).
Removing the freshness pill to "declutter" — that's a trust violation.

Final report template

# Mobile UX Review — <scope>

## Pages
- <page>: before / after screenshots at 360 / 390 / 430 / RTL-360

## Changes
- Token: <e.g. consolidated card padding into --space-card>
- Component: <e.g. nav drawer rebuilt with <details>>
- Page: <e.g. tracker hero rebalanced; karat strip scannable at 360px>

## Verification
- `npm run lint` PASS
- `npm test` PASS
- `npm run validate` PASS
- Lighthouse mobile: <before>/<after> for LCP, CLS, TBT
- RTL: verified at <viewports>

## Follow-ups
- <e.g. consider rebuilding calculator inputs as bottom-sheet on mobile>

이 저장소의 다른 Skills

같은 저장소

create-subagent

vctb12/GoldTickerLive

Create custom subagents for specialized AI tasks. Use when you want to create a new type of subagent, set up task-specific agents, configure code reviewers, debuggers, or domain-specific assistants with custom prompts.

2026-07-103

debug

vctb12/GoldTickerLive

Debugging specialist for errors, test failures, and unexpected behavior. Use when encountering reproducible bugs; follow reproduction steps and remove instrumentation before finishing.

2026-07-103

migrate-to-skills

vctb12/GoldTickerLive

Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills format (.cursor/skills/). Use when you want to migrate rules or commands to skills, convert .mdc rules to SKILL.md format, or consolidate commands into the skills directory.

2026-07-103

multi-model-review

vctb12/GoldTickerLive

Adversarial multi-model code review — launch parallel readonly reviewers on different models, then synthesize consensus vs lone findings. Do not apply fixes unless the user asks.

2026-07-103

repro

vctb12/GoldTickerLive

Reproduce reported bugs before fixing. Provide evidence of reproduction and the fix; do not stop after repro to ask the user—continue to fix.

2026-07-103

sdk

vctb12/GoldTickerLive

Guide users building apps, scripts, CI pipelines, or automations on top of the Cursor SDK - TypeScript (@cursor/sdk) or Python (cursor-sdk / cursor_sdk). Use when integrating Cursor agents programmatically; Agent.create, Agent.prompt, streaming, local vs cloud runtime, MCP, errors.

2026-07-103

Skill: Mobile UX Review

Use this to systematically improve mobile UX without breaking Arabic/RTL parity or accessibility.

Inputs to gather

Which pages are in scope (homepage, tracker, calculator, shops, methodology, country pages)

Target viewports (default: 360, 390, 430, 768)

Whether RTL/Arabic parity is part of the scope (default: yes)

Performance baseline (current Lighthouse mobile scores from docs/performance-baseline.json)

Workflow

Establish baseline. Take "before" screenshots at each target viewport, EN + AR.

Apply page-specific checklist (below).

Apply cross-cutting checklists: tokens, RTL mobile, accessibility.

Implement changes in coherent commits — token first, then surface, then page.

Take "after" screenshots at same viewports.

Run npm run lint, npm run validate, npm test. Optionally npm run a11y.

Report with screenshot pairs + Lighthouse delta.

Checklists in this skill

Common mistakes

Polishing desktop and shipping; mobile regresses.

Adding sticky bars that overlap the chart on 360px.

Translating English-shaped copy as Arabic (run it past a native speaker or simplify).

Forgetting inputmode on numeric inputs.

Reducing font sizes to "fit" mobile (use truncation + tooltips, not font shrinks).

Removing the freshness pill to "declutter" — that's a trust violation.

Final report template

# Mobile UX Review — <scope> ## Pages - <page>: before / after screenshots at 360 / 390 / 430 / RTL-360 ## Changes - Token: <e.g. consolidated card padding into --space-card> - Component: <e.g. nav drawer rebuilt with <details>> - Page: <e.g. tracker hero rebalanced; karat strip scannable at 360px> ## Verification - `npm run lint` PASS - `npm test` PASS - `npm run validate` PASS - Lighthouse mobile: <before>/<after> for LCP, CLS, TBT - RTL: verified at <viewports> ## Follow-ups - <e.g. consider rebuilding calculator inputs as bottom-sheet on mobile>

name	mobile-ux-review
description	Use for mobile-first redesigns, tracker UX work, homepage/calculator/shops polish, Arabic/RTL mobile review.
when_to_use	["A page feels cramped, slow, or unusable on a real phone","You're shipping a redesign and need a mobile-first audit","Arabic/RTL parity check across changed surfaces","Mobile keyboard / input / sticky-control regressions reported"]
related_files	["styles/global.css","styles/pages/**","index.html, tracker.html, calculator.html, shops.html, methodology.html","src/components/nav.js, src/components/footer.js, src/components/ticker.js"]
related_prompts	[".github/prompts/mobile-ux-audit.prompt.md",".github/prompts/tracker-flagship-revamp.prompt.md",".github/prompts/accessibility-audit.prompt.md"]

name	mobile-ux-review
description	Use for mobile-first redesigns, tracker UX work, homepage/calculator/shops polish, Arabic/RTL mobile review.
when_to_use	["A page feels cramped, slow, or unusable on a real phone","You're shipping a redesign and need a mobile-first audit","Arabic/RTL parity check across changed surfaces","Mobile keyboard / input / sticky-control regressions reported"]
related_files	["styles/global.css","styles/pages/**","index.html, tracker.html, calculator.html, shops.html, methodology.html","src/components/nav.js, src/components/footer.js, src/components/ticker.js"]
related_prompts	[".github/prompts/mobile-ux-audit.prompt.md",".github/prompts/tracker-flagship-revamp.prompt.md",".github/prompts/accessibility-audit.prompt.md"]