Skills

• Every insight must include a source reference for traceability.
• Actionable items must be clearly highlighted.
• Outputs must be concise, structured, and validated by cross-checking critical data points.

Source Identification

Identify and collect from all relevant data sources: documents, databases, tools

Data Extraction

Extract key information and categorize by relevance and topic

Cross-Analysis

Detect patterns, anomalies, and actionable insights across datasets

Structured Output

Format findings for the target audience: report, dashboard, brief, or presentation

• Every persona must include goals, pain points, observed behaviors, and specific source references.
• Conflicting or incomplete data must be flagged with recommended follow-up.
• Outputs must be presentation-ready without further reformatting.

Data Collection

Gather and clean relevant user information from all specified sources

Pattern Analysis

Analyze user behaviors, goals, pain points, and communication patterns

Persona Synthesis

Construct structured persona profiles from analyzed findings

Output Formatting

Format for presentation, stakeholder reports, or further research use

• Outputs a W3C-compatible tokens.json and tokens.css ready to drop into any project.
• Both raw.json and normalized.json must be generated.
• Every extracted token category must be documented with examples.
• Flag anything that could not be extracted and explain why.

Colors

Brand palette, backgrounds, text colors, border colors: full color scale extracted

Typography

Font families, sizes, weights, and line heights across all text styles

Spacing

Padding and margin scale, normalized to a consistent spacing system

Border Radius

Button, card, and pill radii: all elevation levels documented

Shadows

Box-shadow values across all elevation levels, ready for token mapping

• Each finding must include: element, current state, expected state, location reference, design token reference, and recommendation.
• Prioritise as Critical / Major / Minor and group related issues to reduce redundancy.

Consistency

Components look and behave identically across screens

Spacing

All spacing follows the design system scale

Typography

Font sizes, weights, line heights match the type scale

Color

Semantic colors used correctly; sufficient contrast

Components

Standard components used; avoid custom one-offs

Accessibility

Touch targets ≥44px; contrast ≥4.5:1; focus indicators visible

• Every measurement must reference a design token, with no arbitrary pixel values.
• Interactive states must cover all scenarios including error, empty, and loading.
• Animations must include duration and easing.
• The handoff should allow developers to implement fully without follow-up questions.

Component Inventory

List each unique component with token mappings

Layout Spec

Grid, container widths, breakpoint behavior

Interaction Spec

State changes, transitions, micro-interactions

Asset Spec

Images, icons, illustrations, download-ready files

• Core flows should have ≤7 steps for critical tasks.
• Every screen must include a clear back/escape path.
• Error states must include recovery actions.
• Loading states must be specified for screens fetching data.
• Flows remain cohesive with consistent visual and interaction patterns.

Screen Specification

Name, purpose, content hierarchy, and primary CTA for each screen

State Variations

Loading, empty, error, and success states for every screen

Transitions

Push, modal, drawer, or inline expansion between screens

Data Dependencies

What each screen needs from prior steps: inputs and outputs documented

• Every animation must have a clear reason (spatial consistency, state indication, feedback).
• Only animate transform and opacity.
• Buttons must have active states.
• Respect prefers-reduced-motion.
• Never animate from scale(0).
• Duration must match element type: button press 100–160ms, dropdowns 150–250ms, modals 200–500ms.

Animation Decision

Frequency-based check: should this animate at all? What is its purpose?

Easing & Duration

Enter/Exit → ease-out · Movement → ease-in-out · Button press 100–160ms

Component Craft

Buttons scale(0.97) on active · Popovers origin-aware · No pop-in from scale(0)

Performance

Only animate transform and opacity: stays on GPU, no layout or paint costs

• Every evaluation must address alignment and visual balance, typographic hierarchy (scale, weight, line height), motion naturalness, and spacing clarity.
• Identify and remove boilerplate-looking patterns.
• Every suggestion must reference a specific visual principle.

Layout & Alignment

Elements well-aligned and visually balanced, with no awkward spacing or misaligned columns

Typography Hierarchy

Correct font scale, weight, and line height to establish clear reading order

Motion Quality

Natural interaction feedback, with no jarring or purposeless animations

Spacing & Density

Reduce visual clutter, emphasize hierarchy through negative space

• Primary CTA must be the most visually prominent interactive element on screen.
• Key information (price, availability, ratings) must be visible without scrolling.
• Visual grouping must match logical grouping.
• Every negative finding must include a specific improvement with rationale.

Size Hierarchy

Largest elements draw attention first: are the right elements largest?

Color Hierarchy

High-contrast and saturated colors draw attention: is color used strategically?

Spatial Hierarchy

Elements with more whitespace appear more important: is breathing room allocated correctly?

Typography Hierarchy

Font size, weight, and style create reading order: is the type scale effective?

Position Hierarchy

Top-left and center get natural attention: are key elements positioned there?

• Accuracy issues are critical: incorrect prices, times, or policies can harm users.
• Every issue must include the original text, the problem, and a suggested correction.
• Output must classify overall quality: Publish-ready / Needs editing / Needs retranslation.

Accuracy

Factual details correct: prices, times, locations, inclusions match source

Fluency

Reads naturally in the target language, not machine-like or stilted

Tone

Matches intended brand voice: enthusiastic but not hyperbolic, informative but engaging

Cultural Adaptation

Culturally specific references handled correctly: measurements, date formats, norms

Completeness & SEO

No content missing; target-language keywords included naturally

• Every design decision must be defensible.
• Generic patterns are flagged.
• Motion without purpose is removed.
• Architecture shortcuts are documented as risks.
• Output is not done until it passes this filter.

Design Decisions

Every visual choice must be defensible, with no defaults accepted without rationale

Motion Quality

Purposeless animation flagged and removed; remaining motion must earn its place

Frontend Architecture

Shortcuts and structural compromises documented with risk assessment

Visual Craft

Typography, spacing, depth, and colour evaluated against premium standard

• Only animate transform and opacity.
• Buttons must have :active states.
• Popovers must be origin-aware.
• No scale(0) entrances.
• Duration matched to element type: button 100–160ms, tooltip 125–200ms, modal 200–500ms.

Animation Quality

Easing, duration, and properties: every animation correct or removed

Interaction States

Hover, active, focus, disabled: all states explicitly designed

Visual Polish

Origin-aware popovers, grounded entrances, no unrealistic motion

Production Readiness

prefers-reduced-motion respected, GPU-only properties used

• No placeholder states.
• No generic animations.
• No unfinished edge cases.
• Every pixel intentional.
• Every interaction considered.
• Empty, loading, and error states are part of done, not polish.

Completeness

Empty, loading, error, and success states all explicitly designed and implemented

Generic Pattern Check

Default browser styles, boilerplate animations, and placeholder content flagged

Interaction Quality

Hover, focus, active states: all meaningful and intentional

Real Content Test

Validated with actual content lengths, not placeholder text

• Typography has a clear hierarchy with ≤3 distinct scales.
• Spacing follows a consistent scale with no deviations.
• Depth is earned not decorative.
• Motion feels inevitable, not added.

Typography

Scale, weight, line-height, tracking: creating clear reading order and hierarchy

Spacing Rhythm

Consistent 4pt/8pt scale; breathing room creates perceived quality

Depth & Layering

Shadows and blur must have a consistent light model, not decorative

Motion System

Defined once, applied everywhere: consistent motion vocabulary

• Every animation must justify itself: spatial consistency, state indication, feedback, explanation, or preventing jarring changes.
• No animation survives "it looks cool" as its only reason.

Purpose Check

Every animation must have a clear reason: spatial, feedback, state, or transition

Frequency Assessment

100+/day = no animation. Frequent = reduce. Occasional = standard. Rare = optional delight

Easing & Duration

Enter/Exit → ease-out · Movement → ease-in-out · Button 100–160ms · Modal 200–500ms

Reduced Motion

Every animation has a prefers-reduced-motion alternative defined

• Natural motion follows physics.
• Timing must match the perceived weight of the element.
• Exaggeration serves clarity at 10–15% beyond reality.
• Slow In/Slow Out applied to everything visible.

Slow In/Slow Out

The minimum: all visible motion uses easing, never linear

Anticipation

Small preparation before main action increases perceived responsiveness

Follow Through

Parts finish at different times: exits feel complete, not cut off

Timing & Weight

Heavy elements move slower; light elements faster: duration matches perceived mass

• Exit animations must complete before component is removed from DOM.
• Key props must be stable and unique.
• Exit variants must be explicitly defined, not just inverted initial states.

Mode Strategy

sync = overlapping · wait = sequential · popLayout = list removal with layout shift

Key Management

Unique stable keys are the most common source of AnimatePresence bugs

Exit Variants

Explicit exit prop required: do not rely on inverted initial/animate

Tree Position

AnimatePresence must be above the conditional, not around the condition

• Gesture-driven motion = spring.
• State-change motion = easing.
• Never spring on loading states.
• Never linear easing on anything visible to users.

Use Springs When

Gesture-driven, interruptible, physical weight needed, delight overshoot desired

Use Easing When

State-change triggered, precise timing required, lightweight element, loading/data states

Spring Configuration

stiffness: 300, damping: 30 as starting point: adjust for feel

Overshoot Check

Test spring overshoot against clipping bounds and adjacent elements

• Hover states must be immediate.
• Focus indicators must be visible and intentional.
• Typography must be optically aligned.
• Every interaction must provide visible feedback.
• Loading skeletons must match real content dimensions.

Hover & Focus States

Immediate, meaningful, custom: not browser defaults or absent entirely

Typography Details

Optical alignment, kerning, consistent scale, icon alignment to cap height

Loading States

Skeletons must match real content shape exactly: generic rectangles do not count

Interaction Feedback

Every user action has visible confirmation, with no silent interactions

• A complete brief must have a falsifiable success metric.
• Constraints must be explicit.
• Open questions must be assigned to someone.
• Scope must define what is NOT being built.

User Need

What is the user actually trying to do, not the feature being requested

Business Goal

What does success look like for the product: measurable and falsifiable

Constraints

Time, tech, system, regulatory: documented before design begins

Scope

What is in, what is out, what is deferred: explicit on all three

• Target 60fps (16.7ms per frame) for all visible animations.
• Scroll-linked animations use IntersectionObserver or CSS scroll-timeline.
• No layout or paint triggers in animation loops.
• Only transform and opacity animated on GPU.

Layout Thrashing

Reading and writing DOM layout properties in the same frame: causes forced reflows

Non-Compositor Animations

width, height, top, left, padding animate layout: replace with transform

Scroll Performance

Passive scroll listeners + IntersectionObserver + CSS scroll-timeline

GPU Strategy

Only transform and opacity on GPU; will-change used sparingly as a hint