agentskills.codes
GO

goodfill-ui-qa

by Phakamas1715Source

Review Goodfill frontend UI/UX from the perspective of older Thai adults, caregivers, and daily health users. Use when asked to inspect layouts, mobile/desktop responsiveness, hero/card/navigation clarity, voice/chat controls, screenshots, browser previews, accessibility, or "ตรวจ UI/UX" for Goodfil

Install

mkdir -p .claude/skills/goodfill-ui-qa && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14762" && unzip -o skill.zip -d .claude/skills/goodfill-ui-qa && rm skill.zip

Installs to .claude/skills/goodfill-ui-qa

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Review Goodfill frontend UI/UX from the perspective of older Thai adults, caregivers, and daily health users. Use when asked to inspect layouts, mobile/desktop responsiveness, hero/card/navigation clarity, voice/chat controls, screenshots, browser previews, accessibility, or "ตรวจ UI/UX" for Goodfill pages.
308 chars✓ has a “when” triggerlonger than Claude Code's old 250-char listing cap (fine on current versions)

About this skill

Goodfill UI QA

Use this skill to review or improve Goodfill screens for daily repeated use. Prioritize practical health workflows over decoration.

Core Audience

  • Older Thai adults who need large, obvious controls and low cognitive load.
  • Family caregivers who scan status quickly and need trust signals.
  • Everyday health users who repeat the same actions: talk, record BP/glucose, check reminders, send family summary.

Review Workflow

  1. Open the target page in the in-app browser when available.
  2. Check mobile first, then desktop.
  3. Inspect the first viewport, primary action path, and bottom/header navigation.
  4. Report issues by severity, with concrete fixes.
  5. If asked to implement, make focused UI changes and verify with lint/type/build plus a browser screenshot when practical.

Goodfill UI Standards

  • The first screen should be usable, not a marketing page.
  • Primary daily actions should be visible early: คุย, บันทึกความดัน, เตือนยา.
  • Health-task screens should be calmer than landing screens.
  • Decorative layers must not compete with numbers, warnings, buttons, or forms.
  • Cards should be individual items only; avoid cards inside cards.
  • Text must not overlap, clip, or rely on tiny labels.
  • Thai text should use Sarabun for readability and avoid letter spacing.
  • Buttons must have clear verbs, icons, and stable tap targets.
  • Voice/mic states must show obvious visual feedback: idle, listening, speaking, connecting, error.
  • Hero images may be expressive, but task areas should be dense, clear, and repeatable.

Accessibility Checks

  • Minimum practical tap target: 44px, preferably larger for health actions.
  • Color cannot be the only state signal; pair color with text/icon.
  • Bottom nav should not hide important CTAs or floating avatars.
  • Form errors should say exactly what to fix in Thai.
  • Health charts and badges should include readable labels, not only acronyms.

Output Format

For reviews, lead with findings:

  • [P0] blocks task completion or safety.
  • [P1] causes confusion, misread health info, or repeated-use friction.
  • [P2] polish/accessibility issue.

Then give a short change plan or implementation summary.

Search skills

Search the agent skills registry