规范对照

应该

Move await operations into branches where they're needed

if (skip) return { skipped: true }; const data = await fetch()

应该

Use Promise.all() for independent operations

const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])

应该

Use better-all to start each task at earliest possible moment

await all({ user() {}, config() {}, profile() { return fetch((await this.$.user).id) } })

应该

Start promises early and await late

const sessionP = auth(); const configP = fetchConfig(); const session = await sessionP

应该

Import directly from source path

import Check from 'lucide-react/dist/esm/icons/check'

应该

Use dynamic() for heavy components

const Monaco = dynamic(() => import('./monaco'), { ssr: false })

应该

Use component composition for parallel fetches

<Header /><Sidebar /> // both fetch in parallel

应该

Allow password managers and paste; offer passkeys OAuth or another non-cognitive method

autocomplete="current-password" and paste allowed

应该

Use fluid sizes content-driven height and unitless line height

.copy { inline-size: min(100%, 65ch); height: auto; line-height: 1.5; }

应该

Wrap stack resize or provide a visible full-detail path

Action label wraps or opens full details

应该

Prefer a button and expose pressed or selected state that matches the visible label

<button aria-pressed='true'>Open now</button>

应该

Set accessibilityLabel or label prop on icon buttons

<Pressable accessibilityLabel="Close"><XIcon /></Pressable>

应该

Pair Text label with input and set accessibilityLabel

<View><Text>Email</Text><TextInput accessibilityLabel="Email address" /></View>

应该

Select 44pt for iOS and 48dp for Android at runtime; evaluate web targets separately against WCAG 2.5.8 and its exceptions

Platform.select({ ios: 44, android: 48 }); // web: evaluate 24 CSS px + WCAG exceptions

应该

Use navigation.goBack and keep screen state

onPress={() => navigation.goBack()}

应该

Check reduceMotionEnabled and simplify animations

if (reduceMotionEnabled) skipAnimation()

应该

Provide visible buttons in addition to gestures

Swipe to delete + visible Delete button

应该

Support password managers passkeys paste and prefilled confirmed values

textContentType="password" autoComplete="current-password"

应该

Wrap async components in Suspense boundaries

<Suspense fallback={<Skeleton />}><DataDisplay /></Suspense>

应该

Dynamic import when feature enabled

useEffect(() => { if (enabled) import('./heavy.js') }, [enabled])

应该

Use LRU for cross-request caching

const cache = new LRUCache({ max: 1000, ttl: 5*60*1000 })

应该

Pass only needed fields to client components

<Profile name={user.name} />

应该

Use content-visibility for long lists

.item { content-visibility: auto; contain-intrinsic-size: 0 80px }

应该

Use scroll-behavior: smooth on html element

html { scroll-behavior: smooth; }

应该

Preserve navigation history properly

history.pushState()

应该

Animate 1-2 key elements per view maximum

Single hero animation

应该

Check prefers-reduced-motion media query

@media (prefers-reduced-motion: reduce)

应该

Use skeleton screens or spinners

animate-pulse skeleton

应该

Use click/tap for primary interactions

onClick handler

应该

Define z-index scale system (10 20 30 50)

z-10 z-20 z-50

应该

Reserve appropriate space or keep async states in a stable content-driven container

aspect-ratio for media; stable count slot for badges

应该

Use 44pt on iOS and 48dp on Android; for web use the separate WCAG Target Size rule

iOS 44pt; Android 48dp; Web 24 CSS px plus WCAG exceptions

应该

Use a visible focus ring on every interactive control, including modal controls

focus:ring-2 focus:ring-blue-500

应该

Disable button and show loading state

disabled={loading} spinner

应该

Show clear error messages near problem

Red border + error message

应该

Confirm before delete/irreversible actions

Are you sure modal

应该

Minimum 4.5:1 ratio for normal text

#333 on white (7:1)

应该

Use icons/text in addition to color

Red text + error icon

应该

Descriptive alt text for meaningful images

alt='Dog playing in park'

应该

Add aria-label for icon-only buttons

aria-label='Close menu'

应该

Keep tab order aligned with visual order and test every action without a pointer

tabIndex for custom order

应该

Use label with for attribute or wrap input

<label for='email'>

应该

Use aria-live or role=alert for errors

role='alert'

应该

Use appropriate size and format (WebP)

srcset with multiple sizes

应该

Always show label above or beside input

<label>Email</label><input>

应该

Show a specific error below the input and reference it with aria-describedby

<input aria-describedby="email-error"><p id="email-error">Enter an email address</p>

应该

Show loading then success/error state

Loading -> Success message

应该

Increase touch targets on mobile

Larger buttons on mobile

应该

Minimum 16px body text on mobile

text-base or larger

应该

Use width=device-width initial-scale=1

<meta name='viewport'...>

应该

Ensure content fits viewport width

max-w-full overflow-x-hidden

应该

Use darker text on light backgrounds

text-gray-900 on white

应该

Follow platform and component guidance; preserve layout focus and accessible busy status

Stable skeleton or progress with aria-busy

应该

Clearly label AI generated content

AI Assistant label

应该

Scale/highlight element on look

hoverEffect()

应该

Honor prefers-reduced-motion and present the final readable state without parallax or scroll-jacking

@media (prefers-reduced-motion)

应该

Offset sticky UI with scroll-padding and dismiss or move persistent overlays

scroll-padding-top: var(--header-height)

应该

Add buttons menus or tap-to-move controls and retain keyboard operation

Move up and Move down buttons beside drag handle

应该

Use at least 24 by 24 CSS px or verify spacing equivalent inline user-agent or essential exceptions

min-width: 24px; min-height: 24px

应该

Provide previous next and play/pause; stop on focus or hover and when reduced motion is requested

button aria-label="Pause carousel"

应该

Place it at the top of the form; move focus to its heading or container after failed submit; link each item to its invalid field; retain inline errors

<div role="alert" tabindex="-1" aria-labelledby="error-title"><h2 id="error-title">There is a problem</h2><a href="#email">Enter an email address</a></div>

应该

Use overflow-wrap anywhere and let flex or grid text children shrink

.token { min-inline-size: 0; overflow-wrap: anywhere; }

应该

Choose static or interactive markup from the label's meaning and ownership

<span class='status'>Pending</span>

应该

Wrap the collection or use an operable +n disclosure for hidden overflow values

<div class='chip-list'>{chips}</div> with flex-wrap

应该

Bound only unpredictable values; use nowrap with a shrinkable label; expose full text to keyboard pointer and touch users

Flexible label with min-width 0 and an operable full-value disclosure

应该

Use one appropriate atomic status message such as 3 items in cart

<span role='status' aria-atomic='true'>3 items in cart</span>

应该

Cancel or replace prior motion; set the final semantic state directly and handle cancellation cleanup

previous?.cancel(); setSelected(next)

应该

Use accessibilityRole/button/link/checkbox etc.

<Pressable accessibilityRole="button">Submit</Pressable>

应该

Reserve horizontal swipes for carousels

HorizontalPager inside vertical ScrollView

应该

Provide close button and swipe-down where platform expects

<Modal><Button title="Close" onPress={onClose} /></Modal>

应该

Use ActivityIndicator or skeleton for >300ms operations

{loading ? <ActivityIndicator /> : <Button title="Save" />}

应该

input-level error + summary banner

<TextInput ... /><Text style={{color:'red'}}>{error}</Text>

应该

Use keyExtractor and initialNumToRender appropriately

<FlatList data={items} renderItem={...} />

应该

Use platform fontScale and at least 14–16pt base

<Text style={{ fontSize: 16 }}>Body</Text>

应该

Set allowFontScaling and test large text

<Text allowFontScaling>{label}</Text>

应该

Wrap screens in SafeAreaView or apply insets

<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>

应该

Use semantic tokens and test both themes

colors.textPrimaryDark = '#F9FAFB'

应该

Provide named Move up/down buttons or a position menu beside drag handles; route iOS and Android behavior through the runtime platform adapter

<Button title="Move up" onPress={() => moveItem(index, index - 1)} />

应该

Use useSWR for client data fetching

const { data } = useSWR('/api/users', fetcher)

应该

Early return if lengths differ

if (a.length !== b.length) return true; // then compare

应该

Use toSorted() for immutability

users.toSorted((a,b) => a.name.localeCompare(b.name))

应该

Load non-critical scripts after hydration

const Analytics = dynamic(() => import('@vercel/analytics'), { ssr: false })

应该

Preload on user intent signals

onMouseEnter={() => import('./editor')}

应该

Wrap data fetchers with cache()

export const getUser = cache(async () => await db.user.find())

应该

Use after() for logging/analytics

after(async () => { await logAction() }); return Response.json(data)

应该

Read state on-demand in callbacks

const handleClick = () => { const params = new URLSearchParams(location.search) }

应该

Extract to memo() components

const UserAvatar = memo(({ user }) => ...); if (loading) return <Skeleton />

应该

Use derived boolean state

const isMobile = useMediaQuery('(max-width: 767px)')

应该

Use functional form: setState(curr => ...)

setItems(curr => [...curr, newItem])

应该

Use function form for expensive init

useState(() => buildSearchIndex(items))

应该

Use startTransition for non-urgent updates

startTransition(() => setScrollY(window.scrollY))

应该

Inject sync script for client-only values

<script dangerouslySetInnerHTML={{ __html: 'el.className = localStorage.theme' }} />

应该

Use Activity for expensive toggle components

<Activity mode={isOpen ? 'visible' : 'hidden'}><Menu /></Activity>

应该

Use class toggle or cssText

element.classList.add('highlighted')

应该

Use Map cache for repeated calls

const cache = new Map(); if (cache.has(x)) return cache.get(x)

应该

Use useEffectEvent only for non-reactive logic called from inside Effects; keep real reactive dependencies

const onConnected = useEffectEvent(() => notify(theme)); useEffect(() => { connection.on('connected', onConnected) }, [roomId])

应该

Add padding-top to body equal to nav height

pt-20 (if nav is h-20)

应该

Highlight active nav item with color/underline

text-primary border-b-2

应该

Update URL on state/view changes

Use query params or hash

应该

Use shared motion tokens and test that feedback stays responsive

transition-colors duration-200

应该

Use for loading indicators only

animate-spin on loader

应该

Use transform and opacity for animations

transform: translateY()

应该

Test all content fits within containers

overflow-auto with scroll

应该

Account for safe areas and other fixed elements

Fixed nav + fixed bottom with gap

应该

Understand what creates new stacking context

Parent with z-index isolates children

应该

Use dvh or account for mobile browser chrome

min-h-dvh or min-h-screen

应该

Limit max-width for text content (65-75ch)

max-w-prose or max-w-3xl

应该

Minimum 8px gap between touch targets

gap-2 between buttons

应该

Avoid horizontal swipe on main content

Vertical scroll primary

应该

Use touch-action CSS or fastclick

touch-action: manipulation

应该

Change cursor and add subtle visual change

hover:bg-gray-100 cursor-pointer

应该

Add pressed/active state visual change

active:scale-95

应该

Reduce opacity and change cursor

opacity-50 cursor-not-allowed

应该

Show success message or visual change

Toast notification or checkmark

应该

Use sequential heading levels h1-h6

h1 then h2 then h3

应该

Use semantic HTML and ARIA properly

<nav> <main> <article>

应该

Provide skip to main content link

Skip to main content link

应该

Lazy load below-fold images and content

loading='lazy'

应该

Split code by route/feature

dynamic import()

应该

Set appropriate cache headers

Cache-Control headers

应该

Use font-display swap or optional

font-display: swap

应该

Load non-critical scripts async/defer

async or defer attribute

应该

Monitor and minimize bundle size

Bundle analyzer

应该

Inline critical CSS defer non-critical

Critical CSS inline

应该

Validate on blur for most fields

onBlur validation

应该

Use email tel number url etc

type='email'

应该

Use autocomplete attribute properly

autocomplete='email'

应该

Use asterisk or (required) text

* required indicator

应该

Toggle to show/hide password

Show/hide password button

应该

Use distinct input styling

Border/background on inputs

应该

Use inputmode attribute

inputmode='numeric'

应该

Start with mobile styles then add breakpoints

Default mobile + md: lg: xl:

应该

Test at 320 375 414 768 1024 1440

Multiple device testing

应该

Use max-width: 100% on images

max-w-full h-auto

应该

Use horizontal scroll or card layout

overflow-x-auto wrapper

应该

Use 1.5-1.75 for body text

leading-relaxed (1.625)

应该

Limit to 65-75 characters per line

max-w-prose

应该

Use consistent modular scale

Type scale (12 14 16 18 24 32)

应该

Reserve space with fallback font

font-display: swap + similar fallback

应该

Clear size/weight difference

Bold + larger size

应该

Show helpful message and action

No items yet. Create one!

应该

Provide clear next steps

Try again button + help link

应该

Step indicators or progress bar

Step 2 of 4 indicator

应该

Auto-dismiss after 3-5 seconds

Auto-dismiss toast

应该

Brief success message

Saved successfully toast

应该

Truncate with ellipsis and expand option

line-clamp-2 with expand

应该

Provide Skip and Back buttons

Skip Tutorial button

应该

Show predictions as user types

Debounced fetch + dropdown

应该

Show 'No results' with suggestions

Try searching for X instead

应该

Stream text response token by token

Typewriter effect

应该

Use glass material and z-offset

.glassBackgroundEffect()

应该

Prefer click-to-play; provide pause and captions; stop off-screen and honor reduced motion

<video controls preload="none"><track kind="captions" /></video>

应该

Compress and lazy load 3D models

Draco compression

应该

Keep the entire focused component unobscured by author-created content

close persistent overlay before focus moves behind it

应该

Use an indicator at least as large as a 2 CSS px perimeter with 3:1 state contrast

outline: 2px solid currentColor; outline-offset: 2px

应该

Keep contact self-help and automated help in consistent locations

shared header help menu

应该

Auto-populate prior values or let users select previously entered information

reuse confirmed shipping address

应该

Bound the measure and test natural-wrap fallback across widths fonts and locales

.hero-title { max-inline-size: 20ch; text-wrap: balance; }

应该

Use accessibilityLiveRegion or announceForAccessibility

<Text accessibilityLiveRegion="polite">{status}</Text>

应该

Mark decorative icons as not accessible

<Icon accessible={false} importantForAccessibility="no" />

应该

Keep at least 8dp spacing between touchables

<View style={{ gap: 8 }}><Button ... /><Button ... /></View>

应该

Use 3–5 tabs and move extras to More/Settings

Home/Explore/Profile/Settings

应该

Keep components mounted or persist state

<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>

应该

Show toast/checkmark or banner

showToast('Saved successfully')

应该

Validate onBlur and onSubmit

onBlur={() => validateEmail(value)}

应该

Match email/tel/number/search types

<TextInput keyboardType="email-address" />

应该

Provide Show/Hide icon toggling secureTextEntry

<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />

应该

Use Image component with proper resizeMode and caching

<Image source={{uri}} resizeMode="cover" />

应该

Wrap handlers with debounce/throttle

onScroll={debouncedHandleScroll}

应该

Use ease-out for enter/ease-in for exit

Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })

应该

Use looping only where necessary

Animated.loop(loaderAnim) for ActivityIndicator

应该

Build index Map for O(1) lookups

const byId = new Map(users.map(u => [u.id, u])); byId.get(id)

应该

Cache values before loops

const val = obj.config.settings.value; for (...) process(val)

应该

Cache storage reads in Map

if (!cache.has(key)) cache.set(key, localStorage.getItem(key))

应该

Single loop for multiple categorizations

for (u of users) { if (u.isAdmin) admins.push(u); if (u.isTester) testers.push(u) }

应该

Return immediately on first error

for (u of users) { if (!u.email) return { error: 'Email required' } }

应该

Hoist RegExp to module scope

const EMAIL_RE = /^[^@]+@[^@]+$/; function validate() { EMAIL_RE.test(x) }

应该

Convert to Set for membership checks

const allowed = new Set(['a','b']); allowed.has(id)

应该

Use useSWRSubscription for shared listeners

useSWRSubscription('global-keydown', () => { window.addEventListener... })

应该

Use primitive values in dependency arrays

useEffect(() => { console.log(user.id) }, [user.id])

应该

Animate div wrapper around SVG

<div class='animate-spin'><svg>...</svg></div>

应该

Hoist static elements to module scope

const skeleton = <div class='animate-pulse' />; function C() { return skeleton }

应该

Use explicit ternary for conditionals

{count > 0 ? <Badge>{count}</Badge> : null}

应该

Single pass loop for min/max

let max = arr[0]; for (x of arr) if (x > max) max = x

应该

Synchronize the ref after commit and read current from asynchronous callbacks

const valueRef = useRef(value); useEffect(() => { valueRef.current = value }, [value]); setTimeout(() => use(valueRef.current), 0)

应该

Use for sites with 3+ levels of depth

Home > Category > Product

应该

Use deceleration when arriving acceleration when leaving and linear for constant-rate progress

ease-out for entry; linear for spinner

应该

Disable where not needed

overscroll-behavior: contain

应该

Use for confirmations and important actions

navigator.vibrate(10)

应该

Use relative or locale-aware dates

2 hours ago or locale format

应该

Use thousand separators or abbreviations

1.2K or 1,234

应该

Use realistic sample data

Real sample content

应该

Allow multi-select and bulk edit

Checkbox column + Action bar

应该

Thumps up/down or 'Regenerate'

Feedback component

应该

Use onSubmitEditing to focus next input

onSubmitEditing={() => nextRef.current?.focus()}