UI Design & Frontend Skills

Run a structured rigor audit on how a team validated (or plans to validate) its assumptions — for a discovery plan, experiment, test, or any "we validated it" claim. Produces a severity-rated issue list with concrete fixes — catches testing the comfortable assumption instead of the riskiest, untestable phrasing, method fidelity mismatched to decision risk, stated intent mistaken for behavior, success criteria set after the fact, goalpost-moving, and underpowered evidence. Use when reviewing a validation/discovery approach or as the validation step after generating an assumption-test plan.

Plan how to test the assumptions behind a product idea before building — decompose the idea into its load-bearing beliefs, prioritize the riskiest, phrase them as falsifiable hypotheses, and pick the cheapest method that answers the question. Or critique an existing validation plan. Trigger when asked to validate an idea, de-risk a feature, plan discovery/experiments, test assumptions or a hypothesis, design an MVP test, or decide "how do we know this will work?

Run a structured quality audit on a product decision or its rationale — a build/buy/sunset/re-platform/pricing call, a decision log, a retrospective, or any "we decided X because...". Produces a severity-rated issue list with concrete fixes — catches outcome-based reasoning (resulting), deliberation mismatched to reversibility, uncalibrated confidence, confirmation/anchoring/framing/sunk-cost bias, missing pre-mortems, and undocumented reasoning. Use when reviewing a major decision or its write-up, or as a validation step after a decision is made.

Design or critique an A/B test or controlled product experiment with statistical rigor — pre-registered falsifiable hypothesis, sample-size/power up front, a full business cycle, one primary metric plus guardrails, segment + long-term reads, and a pre-set iterate/pivot/persevere decision. Catches the defaults Claude misses: peeking/early stopping, tiny samples, no guardrails, vanity metrics, \"it won\" with no learning loop. Trigger when asked to set up or review an A/B test, design an experiment, pick experiment metrics, decide sample size/significance/duration, or interpret/act on test results.

Build a go-to-market plan that's a stage-appropriate system — customers, channels, pricing, timing, and partnerships that fit the company's maturity — not a generic launch checklist. Gates on GTM readiness (validated demand) and company stage, picks the right channel and entry timing, and treats the buyer journey as non-linear. Catches the defaults Claude misses: GTM-as-one-time-launch, stage-skipping, channel/timing blindness, funnel-forcing, partnerships-as-shortcut. Trigger when asked to create a GTM/go-to-market plan, launch plan, channel or distribution strategy, market-entry/timing plan, or launch metrics.

Orchestrated, idea-to-plan PM workflow. Establishes context once, then composes the PM generative ladder in order — problem → discovery → users → riskiest-assumption test → prioritization → spec → metrics — gating each step, enforcing evidence before the spec, and handing the result to product-review. Trigger when the user wants to go from a raw idea to a build-ready plan ("take me from problem to plan", "I have an app idea, where do I start", "turn this idea into a product plan", "plan a new product end to end") — but NOT when they ask for one specific PM artifact (let that skill trigger directly), and NOT for the strategy/launch arc (vision, competitive analysis, roadmap, GTM — offer those next).

Run a structured validity audit on OKRs, KPIs, North Star Metrics, or any success-metric set. Produces a severity-rated issue list with concrete fixes — catches vanity metrics, unfalsifiable key results, outputs disguised as outcomes, gameable targets without guardrails, and metrics disconnected from business value. Use when reviewing OKRs, goals, KPIs, dashboards, or success metrics, or as a validation step after defining metrics in a spec, roadmap, or strategy doc.

Write OKRs, KPIs, or a North Star Metric derived from product strategy — or review an existing goal set. Enforces outcome-based key results with baselines and targets, one focus objective per team per cycle, leading+lagging balance, and guardrails against gameable targets. Trigger when asked to write OKRs, set quarterly goals, define KPIs or success metrics, choose a North Star Metric, or run goal-setting/planning for a team or product.

Build or critique an audience-understanding artifact — research-based user personas, a Jobs-to-Be-Done framing, or the choice between them. Grounds the work in real research (never invented demographic fiction), keeps only detail that changes a decision, and picks the lens by research objective, stage, and resources. Applies the always-true core and gates context-dependent decisions (personas vs. JTBD vs. both, research-based vs. proto, how many personas, which details, segmentation depth, AI's role). Trigger when asked to create user personas, define a target audience/segment, apply Jobs-to-Be-Done, decide who the product is for, or review existing personas.

Run a structured rigor audit on prioritization decisions, scored backlogs, RICE/ICE/MoSCoW outputs, or roadmap orderings. Produces a severity-rated issue list with concrete fixes — catches invented scores with false precision, priorities unmoored from strategy, feature-factory ordering, everything-is-a-must-have inflation, and trade-offs left implicit. Use when reviewing a prioritized backlog, scoring exercise, roadmap order, or "what should we build first" decision, or as a validation step after any prioritization work.

Run a structured quality audit on a product spec, PRD, or requirements document. Produces a severity-rated issue list with concrete fixes — catches untestable requirements, happy-path-only flows, missing scope exclusions, absent dependencies/constraints/assumptions, implementation details leaking into functional specs, and unvalidated assumptions presented as facts. Use when reviewing a spec, PRD, or requirements doc, or as the validation step after writing one.

Produce or critique a product vision and/or product strategy — an aspirational destination and the deliberate, trade-off-driven choices to reach it — not a buzzword poster or a feature list. Distinguishes the vision/strategy/roadmap/mission artifacts, ladders product vision up to company vision, forces a focused segment + differentiation + explicit "won't do", and sets the stability rule (stubborn on vision, flexible on strategy). Applies the always-true core and gates context-dependent decisions (which strategy framework, vision communication format, single vs. multi-product, B2B vs. B2C, new vs. existing, depth). Trigger when asked to write/define/critique a product vision, vision statement, product strategy, strategic themes, positioning/where-to-play/how-to-win, or to tell vision from strategy from roadmap.

Design or critique an activity feed / stream — a scannable list of updates where what matters stands out and noise fades. Gates the feed-type choice (chronological vs. algorithmic/ranked) and levers like notification aggregation, follow recommendations, and per-entry controls, while applying the always-true core (curated entries, legible text, relative timestamps, no empty feed, visible refresh status). Trigger when the user asks to design or review an activity feed, news/social feed, activity stream, notifications feed, or timeline.

Design or critique UI buttons — pick the right button type for the action's importance, apply sizing/label/state best practices, and gate stylistic levers like shape, shadows, FABs, and icon-only buttons. Trigger when the user asks to design, choose, style, or review buttons, CTAs, button labels, button hierarchy, or button states.

Design or critique UI cards — one-topic, scannable cards with clear hierarchy, the right container style (elevated, outlined, flat), and restrained shadows. Trigger when the user asks to design or review cards, card layouts, card grids, content tiles, user/profile cards, or a browse view built from cards.

Design or critique a checkout, cart, payment, or booking flow — the path from "ready to buy" to "order confirmed." Applies the conversion-protecting core (guest checkout, transparent cost summary, inline validation, processing feedback, confirmation) and gates context-dependent levers (name fields, payment-method count, single- vs. multi-step, booking date pickers, promo-code prominence) with trade-offs. Trigger when designing or reviewing a checkout page, shopping cart, payment form, card-entry screen, promo/discount code, booking/reservation flow, or when checkout/cart abandonment needs improving.

Design or critique a contact/support experience — help center, FAQ, contact methods, live chat, point-of-error help, and feedback flows. Leads with self-service deflection (most contacts are UX failures), applies the always-true core (easy access, expectation-setting, honest chat, close the loop) and gates context-dependent levers (which channels and order, chatbot vs. human, help-button placement) with trade-offs. Trigger when the user asks to design or review a contact us page, support page, help center, FAQ, live chat, or feedback form.

Audit a UI, flow, or copy for dark (deceptive) patterns — design that manipulates users into unintended actions. Produces a prioritized findings list naming each pattern, its intent, severity, and an honest-design fix. Use when reviewing conversion flows, checkouts, paywalls, sign-ups, or cancellation flows for ethical design issues.

Orchestrated, build-from-zero UX workflow. Establishes context once, then composes the generative ladder in order — foundations (color, type, spacing) → components → screens → flows — applying each skill with relevance gating, and hands the result to design-review. Trigger when the user is starting a new product/app/UI from scratch, "help me design an app", "set up a design system and screens", "I'm starting a new product", or any multi-artifact design build — but NOT when they ask for one specific screen or component (let that skill trigger directly).

Icon design principles, selection criteria, and system creation. Build cohesive icon sets that enhance usability and reinforce brand identity. 圖示設計原則、選擇準則與系統建立:構建增強可用性、強化品牌識別的一致圖示集。 Use when: selecting or designing icons, building icon system, defining icon sizing or accessibility requirements, choosing between icon libraries.

Design or critique empty states — first-use screens, cleared states, no-results pages, and 404s that explain why the screen is empty and guide the next action instead of dead-ending. Trigger when the user asks to design or review an empty state, blank screen, zero-data view, first-run dashboard, no-results page, or 404 page.

Run a structured usability audit of any UI against Nielsen's 10 heuristics. Produces a severity-rated, prioritized issue list — each finding tagged with the violated heuristic and a concrete fix. Use when auditing a screen, flow, or component for usability problems, or as a validation step after generating UI.

Design or critique forms and input fields — field selection, labels, layout, validation, error states, and submission. Applies the always-true core (minimal fields, one column, labels outside inputs, inline validation) and gates levers like multi-step splitting, floating labels, and smart defaults. Trigger when the user asks to design, build, or review a form, signup/checkout/survey fields, input validation, or error messages.

Lay out a screen with disciplined spacing, sizing, and grids — every value on one base unit (8px/4px scale), content aligned to a grid, proximity and whitespace doing the grouping, and space establishing visual hierarchy. Replaces arbitrary pixel values and ad-hoc alignment with a system. Also carries the spatial visual-hierarchy/alignment/composition fundamentals. Trigger when asked to design or critique a layout, set spacing/padding/margins, build a spacing scale or design tokens, choose or apply a grid/columns, fix inconsistent spacing or alignment, or establish visual hierarchy through space and position.