A web visual dictionary essential for writing Skill or Prompt keywords

Create a responsive card-based layout for a personal portfolio website.
Show 6 cards in the projects section, each with a cover image, title, two-line summary, technology tags, and a details button.
Use three columns on desktop, two on tablet, and one on mobile; use a warm white background, dark green accents, thin borders, subtle shadows, and restrained corner radii.

Create a three-column masonry portfolio gallery that preserves each image's original aspect ratio.
Switch to two columns on tablet and one on mobile; load images only when they approach the viewport, and open a full-screen preview when a thumbnail is clicked.
First check target-browser support for CSS Masonry; fall back to a regular Grid when it is unavailable.
The DOM order must match the visual reading order.

Design a Bento Grid personal homepage: use a large module on the left for the name, role, introduction, and primary action;
use differently sized modules on the right for About, Skills, Latest Writing, and Contact;
add a horizontal Featured Project section at the bottom.
Do not use an evenly sized nine-cell grid; let module sizes express hierarchy.

Create a split-screen hero: the left side takes about 45% and contains the name, role, introduction, and two action buttons;
the right side takes about 55% and presents an abstract interface visual. Keep the side-by-side layout on desktop, and stack text before the visual on mobile.

Build a portfolio page with CSS Grid. Use a 12-column grid on desktop: the primary project spans 8 columns, its description spans 4, and remaining projects each span 4 columns;
switch to 6 columns below 900px and a single column below 640px.
Use `grid-template-columns` and `gap`; do not use CSS `order` to change a meaningful reading order or rely on absolute positioning to assemble the layout.

Implement the top navigation with Flexbox: place the brand mark on the left and Work, About, Writing, Contact, and a theme toggle on the right;
align the ends and center them vertically. Hide the text navigation on small screens and show a hamburger menu.

Add a 260px-wide left sidebar to the Journal page with an avatar, introduction, categories, tags, and social links; show the article list on the right.
Make the sidebar sticky on desktop; collapse it into a top filter panel on mobile.

Create a personal creator dashboard. The left navigation includes Overview, Projects, Writing, Analytics, and Settings;
place search, notifications, and an avatar at the top; show four statistic cards, recent projects, and traffic trends in the main area.
Use a fixed sidebar on desktop and a drawer on mobile.

Define desktop, tablet, and mobile layout states for the website.
Use a 1200px maximum container width on desktop, two-column cards on tablet, and a single column with a hamburger navigation on mobile;
prevent horizontal scrolling and ensure touch targets are sufficiently large.

Create a full-bleed Hero: make the background visual fill the browser width and occupy about 90vh, with an oversized title, introduction, and View Work button in the foreground;
return to a centered 1120px content container after the Hero, and ensure sufficient contrast for foreground text.

Create a single-page portfolio website with sections in this order: Hero, About, Selected Work, Writing, Contact, and Footer.
Use anchor navigation to reach each section; give every section a semantic heading and a unique `id`.
Disable smooth scrolling when `prefers-reduced-motion: reduce` is enabled, and after navigation move focus to the target content or preserve a clear focus order.

Plan seven page types: Home, Work, Project Detail, About, Journal, Article, and Contact.
All pages share a Header and Footer;
the navigation indicates the current page; clicking a project card opens a separate detail URL.

Create a booking-focused landing page for an AI design service, with a Hero, value proposition, collaboration process, three case studies, client testimonials, FAQ, and a final CTA in that order.
Use the same action copy on primary buttons and remove complex entry points unrelated to booking.

Create a project case-study page with a project overview, background problem, personal responsibilities, process, key decisions, final solution, outcome metrics, and reflection.
Use a large cover at the top, a narrower line length for body content, and full-width process images; provide a sticky table of contents on the right on desktop.

Create an information-rich Hero. Let the main headline directly summarize the professional positioning, keep the subtitle to no more than two lines, and provide View Work and Contact buttons;
pair it with a low-saturation abstract interface visual on the right, without unrelated stock people or office scenes.

Add a four-item Feature Grid below About: Design, Frontend, AI Prototyping, and Writing.
Give each item a line icon, title, and description of no more than two lines; use four columns on desktop, two on tablet, and one on mobile, while avoiding heavy shadows.

Design a Sticky Storytelling section. On desktop, the left side takes about 38%, remains fixed, and displays the current stage;
the right side scrolls through Discover, Design, and Build in sequence.
Update the left content when a new stage begins; remove sticky behavior and use a normal vertical layout on mobile.

Add a vertical timeline to the About page. Each node includes a year, event title, and two-line description;
place content to the right of the axis on desktop and keep a single column on mobile; use a thin line and simple circular nodes.

Add six FAQ items before the contact section. Use a native `button` for each heading, placed within a heading element appropriate to the document outline;
connect each content panel with `aria-expanded` and `aria-controls`.
Whether only one item may be open should depend on the reading task, not be a fixed Accordion rule.

Design a complete footer: place the brand and a short description on the left, three link groups named Explore, Connect, and Elsewhere in the middle, an email address and subscription form on the right, and copyright and privacy links at the bottom.
Use a dark green background with warm white text to create a clear boundary from the main content.

Add a Sticky Navbar. Keep its background transparent at the top of the page, then switch to a warm white background, thin border, and subtle backdrop blur after scrolling more than 40px;
keep the navigation height unchanged during the transition, and use a hamburger menu on mobile.

Show a hamburger button below 768px that opens a Drawer from the right containing the primary page entries.
Lock background scrolling while the menu is open; support Esc, backdrop clicks, and complete keyboard focus management.

Add Home › Work › AI Tools › Project Detail at the top of project details.
Use a `nav` with `aria-label="Breadcrumb"` and an ordered list; the final item represents the current page, is not a link, and has `aria-current="page"`.

Add in-page anchors for About, Work, Writing, and Contact. Reserve space for the fixed Header when scrolling to a target, and highlight the corresponding navigation item according to the currently visible section;
motion must respect the `prefers-reduced-motion` setting.

Add four tabs to the work section: All, Web, AI, and Experiments, with All selected by default.
Use `tablist`, `tab`, `tabpanel`, `aria-selected`, and roving `tabindex`; support Left and Right arrow keys horizontally, with Home and End moving to the first and last tabs.
Use automatic activation on focus only when panels can display instantly; otherwise require Enter or Space to confirm the switch.

Add sidebar navigation to the creator dashboard with Overview, Projects, Posts, Media, Analytics, and Settings.
Identify the current page with an accent color and icon, make secondary menus collapsible, and move the entire navigation into a Drawer on mobile.

Make the Work entry open a three-column Mega Menu that shows Projects, Experiments, and Resources, with a featured project preview on the right.
Open the menu on click, support keyboard controls and Esc, and use an Accordion on mobile.

Display five fixed entries on mobile: Home, Projects, Create, Notes, and Profile. Use a filled icon and accent color for the current item.
Respect `safe-area-inset-bottom`; hide the entire component on desktop.

Add pagination to the article archive, showing 10 items per page. Provide Previous, page numbers, and Next at the bottom;
make the current-page state clear and persist the page number in a URL such as `?page=2`. Use real links for pagination so refresh, sharing, and back navigation work.

Show a back-to-top button in the bottom-right after scrolling more than 800px. Give the button understandable visible text or `aria-label="Back to top"`;
allow smooth scrolling in the default mode and jump directly when `prefers-reduced-motion: reduce` is enabled. Ensure the keyboard focus location remains sensible after returning to the top.

Make the Contact button open a Modal containing a name, email, project type, and message form.
Prefer the native `<dialog>` element and `showModal()`; give the dialog an accessible name and a clear close button, and choose a suitable initial focus target;
return focus to the trigger after closing. Keep the browser-provided Esc closing behavior and background `inert` behavior.

Open a 420px-wide detail Drawer from the right after a project card is clicked, showing its cover, introduction, technology stack, and visit link.
Manage initial focus and focus trapping when it opens so background content cannot be interacted with; support Esc and a clear close button, then restore focus to the trigger when it closes.
On mobile, open it from the bottom at close to full-screen size.

Implement an Accordion. Place each `button` in a heading element appropriate to the document outline, and connect its content panel with `aria-expanded` and `aria-controls`;
change the icon state when expanded, using 200 ms as the starting transition duration. Restrict it to a single open item only when product requirements explicitly call for it.

Add a Tooltip to icon-only actions, supporting both hover and focus.
Limit its content to one short phrase; the Tooltip itself must not enter the Tab order, and it must be connected to the trigger with `role="tooltip"` and `aria-describedby`.
Keep it visible while the pointer is over the trigger or Tooltip, and close it on Esc;
use a visible label or equivalent explanation on touch devices.

Show a Toast in the top-right after a successful save, including a status icon, message, and close button. Ordinary success messages may disappear after four seconds;
messages with actions, error messages, and Toasts that receive keyboard focus must not close automatically.
Use `role="status"` for success states and `role="alert"` for errors requiring immediate attention, avoiding duplicate attributes that cause repeated announcements.

Create a Featured Projects Carousel that emphasizes one project at a time while revealing part of the next item.
Provide Previous, Next, and a 01 / 05 counter; do not autoplay by default, support touch and keyboard input, and disable sliding animation when `prefers-reduced-motion: reduce` is enabled.

Add a Lightbox to the portfolio gallery. Display the full-size image after a thumbnail is clicked, support previous and next navigation, Esc closing, and title display, and lock background scrolling;
the trigger must be keyboard accessible, and every image must have accurate alt text.

Create an accessible contact form with Name, Email, Project Type, Budget Range, and Message.
Give every field a visible label and clearly associate error messages with their fields;
show a loading state during submission, provide a Toast after success, and do not clear inputs until the server confirms success.

Add a Command Palette that opens with Command+K or Ctrl+K.
Support searching pages and actions, use Up and Down arrow keys to select, Enter to execute, and Esc to close, and group results into Pages and Commands.

Add a Floating Action Button with a plus icon to the bottom-right of the project dashboard. On click, expand New Project, New Post, and Upload Image actions.
The button must not obstruct bottom navigation or primary content, and must respect mobile safe areas.

Add Scroll Reveal to headings, body content, and project cards. Fade elements in and move them upward by 16px as they enter the viewport, with a duration of 400-600 ms;
cards in a group may be lightly staggered, but do not animate the entire page at once. Under `prefers-reduced-motion: reduce`, remove movement and show content directly or with only a brief fade.
Content must remain visible by default even if scripts fail.

Add lightweight parallax to the Hero: background abstract shapes move the slowest, semi-transparent mid-layer panels move at a medium speed, and the foreground title stays in normal document flow.
Limit maximum displacement and avoid dramatic scaling; reduce the intensity on mobile and disable it entirely under `prefers-reduced-motion: reduce`.
Animate only `transform` and `opacity` to avoid continuous layout work during scrolling.

Add a 3px dark green reading-progress line at the top of long articles, positioned below the sticky navigation and growing from left to right.
Prefer CSS Scroll-driven Animation; batch updates in `requestAnimationFrame` for the JavaScript fallback.
Use `aria-hidden="true"` for a purely decorative progress line;
if progress must be provided to assistive technology, use a named `<progress>` element and do not announce every percentage change at high frequency.

Use CSS Scroll Snap for horizontally featured work.
Set `scroll-snap-type: inline proximity` on the container's inline axis and `scroll-snap-align: center` on every card;
use `mandatory` only when page-by-page snapping is truly necessary.
Preserve natural touch and trackpad inertia, provide previous and next buttons on desktop, and do not take over vertical page scrolling.

Create a horizontal project archive. Reveal about 3.5 cards at once on desktop, using part of the next card to indicate more content;
support trackpad, touch, and Left and Right arrow input, keep cards keyboard focusable, and use native horizontal scrolling on mobile.

Implement Infinite Scroll for an inspiration feed, loading 12 projects per batch.
Place a sentinel at the bottom of the list and use `IntersectionObserver` to request the next page early;
also provide a focusable Load more fallback and a clear end state. Show a Skeleton while loading and provide Retry on failure;
persist pagination and scroll position in the URL or history state so they can be restored after refresh, back navigation, and sharing.

Add a slowly looping skills Marquee below the Hero, with two content groups joined seamlessly and paused on hover or keyboard focus. Do not use the obsolete `<marquee>` element; under `prefers-reduced-motion: reduce`, switch to a normal wrapping tag list and prevent assistive technology from reading duplicated content twice.

Add a micro-interaction to project cards: on hover, move them up 4px, change the border to dark green, scale the cover to 1.03, and move the arrow 4px right; use 180-240 ms `ease-out`. `focus-visible` must provide equally clear feedback, and displacement and scaling must be removed under `prefers-reduced-motion: reduce`.

Add staggered entrances to four capability cards. After the first card is triggered, have the others fade in and move up 12px every 70 ms, with total delay not exceeding 300 ms;
play the animation only once, and show all content directly under `prefers-reduced-motion: reduce`.

Use a scroll-driven animation in the Process section of the case-study page: a progress line on the left advances with reading, and three prototype panels on the right appear progressively.
Use `animation-timeline` and `view()` inside `@supports`, and declare `animation-timeline` after the `animation` shorthand so it is not reset;
fall back to `IntersectionObserver` when unsupported. Show the final state directly under `prefers-reduced-motion: reduce`.

Create a Skeleton for the project list.
Match the final card dimensions in the placeholder, including the cover, title, two-line summary, and tag positions; use low-contrast gray-green without fake text.
Hide the skeleton itself from assistive technology and set `aria-busy="true"` on the loading container; remove the busy state and replace it with real content when data returns, avoiding layout shifts.

Load above-the-fold critical images normally;
use `loading="lazy"` for `<img>` and `<iframe>` elements below the fold.
Predefine `width`, `height`, or `aspect-ratio` for every image, and provide appropriate `srcset` and `sizes` for responsive covers.
Do not lazy-load the largest contentful paint element or rely on lazy loading as a substitute for image compression.

Show a Spinner only in the portion of the interface currently updating, and use `role="status"` to provide status text such as "Loading projects...".
After waiting more than eight seconds, add an explanation and a cancel option;
use a static status icon under `prefers-reduced-motion: reduce`.

Show determinate 0-100% progress, the current stage, and a cancel button for export tasks.
Prefer a native `<progress>` element with a visible `<label>`; a custom implementation must provide `role="progressbar"`, an accessible name, and a live `aria-valuenow`.
When progress cannot be calculated, omit the value and describe the current stage instead of fabricating a percentage.

After Send Message is clicked, prevent duplicate submissions, change the button text to Sending..., show a small Spinner, and set `aria-busy="true"`.
Keep the button width unchanged; show Sent after success, or restore the available state and explain the reason after failure. Do not let state changes cause keyboard focus to be lost.

Design an Empty State for a page with no projects, including a simple graphic, clear title, one-sentence explanation, and a Create your first project button.
If filters caused the empty state, instead say No matching results and provide a clear filters action.

Design an error state for failed project loading, with a clear title, brief reason, Retry, and a back-to-list entry.
Keep other content that loaded successfully; use icons, text, and color together to communicate the error. Use `role="alert"` for dynamically appearing errors that need immediate attention, and use ordinary semantic structure for errors in initial page content to avoid interruptive announcements on load.

After an image upload fails, retain its thumbnail and filename, and show a failure indicator with Retry and Remove actions. Retry must re-upload only the current file and switch it to a progress state;
replace it directly with the completed state after success.

Make a favorite button update its icon and count immediately on click, then send the request in the background.
Restore the original state on failure, show a non-blocking error, and allow retry.
Do not use optimistic updates for high-risk or irreversible actions such as payments or account deletion.

Check the email format after the field blurs and display specific correction guidance below the input;
set `aria-invalid="true"` on invalid fields and associate error descriptions with `aria-describedby`.
Do not show an error immediately after the user types the first character. On submission failure, focus the error summary and provide links to each invalid field.

Design a minimalist portfolio using warm white, black, and a single dark green accent color, while limiting font, corner-radius, and shadow variations.
Keep only the identity, selected projects, and contact entry on the homepage; establish hierarchy through whitespace and typography without purposeless gradients or decorative icons.

Use an Editorial Layout for the Journal, including oversized headlines, a narrow body column, cross-column images, chapter numbers, drop caps, and pull quotes.
Keep body text at a comfortable line length and line height; do not wrap every piece of content in a card.

Build a portfolio index with a 12-column grid, left-aligned sans-serif type, prominent numbering, and thin divider lines.
Use only warm white, black, and dark green; align years, categories, and roles by column, without handwritten fonts or complex shadows.

Layer two or three semi-transparent panels over a dark green abstract background, using about 16px `backdrop-filter: blur()`, low-opacity light backgrounds, and thin bright borders.
Keep body text sufficiently contrasted; use `@supports` for feature detection and use more opaque solid-color panels when background blur is unsupported. Do not make every card transparent.

Use a Neo-brutalist style for an experimental project page: thick black borders, hard shadows, large headlines, and high-contrast primary buttons.
Components must still follow a clear grid and information hierarchy; do not sacrifice readability or touch usability for deliberate misalignment.

Use `prefers-color-scheme` to read the initial system preference and provide a persistent manual theme toggle;
the user's manual choice takes priority over the system value. Avoid large pure-black areas in dark mode, use soft light gray for body text, and brighten the accent green appropriately;
use `color-scheme` to synchronize native controls, and check contrast, focus, and image treatment in both modes.

Build a monochrome-plus-duotone system with warm white, black, and dark green. Show project images in a low-saturation green duotone by default, restoring a little original color on hover;
text, borders, and buttons must use different brightness values to maintain hierarchy.

Create a low-saturation Gradient Mesh for the Hero using warm white, gray-green, and dark green color fields, with blurred edges and an extremely slow drift.
Keep the text area calm and high-contrast; use a static version on mobile and disable animation under `prefers-reduced-motion: reduce`.

Add low-opacity Grain to the warm white background and dark green Hero.
Use a small repeatable texture or CSS/SVG filter without affecting text clarity; keep body and form areas clean.
Measure filter rendering cost, and use a small static texture or disable the effect on low-performance devices.

Use local Neumorphism only for play, volume, and mode buttons in a media player, while retaining clear text, icons, and focus outlines.
Do not use it for navigation, forms, or long text; express pressed states through shadow, position, and color together.

In a desktop gallery, use a pointer-following visual layer to supplement the native cursor, showing View when hovering an image and Drag when entering a horizontal gallery.
Do not hide the system cursor or change the real click target; disable this effect on touch devices, when a fine pointer is unavailable, and under `prefers-reduced-motion: reduce`.

Add lightweight magnetic behavior to View Work. Move only the button's internal decorative layer by a maximum of 6px; keep the real button position and hit area unchanged.
Use standard button feedback for touch, keyboard focus, and `prefers-reduced-motion: reduce` modes.

Add 3D Tilt to Featured Project. Keep `rotateX` and `rotateY` at no more than `5deg`, with only slight Z-axis differences for the cover, text, and highlight;
smoothly return it to rest when the pointer leaves.
Disable tilt on mobile, for keyboard interaction, and under `prefers-reduced-motion: reduce`, while retaining equivalent focus styles.

Use mouse position to control the radial gradient inside the current card, keeping the spotlight range and brightness restrained.
Provide a static highlight when keyboard focus enters; do not use intense continuous glow or reduce text contrast.

Add a Text Mask to the Hero headline so a low-saturation abstract texture appears only inside the text.
Fall back to solid dark green text when `background-clip: text` is unsupported; the heading must remain semantic, selectable, and readable.

When a project cover enters the viewport, transition it from fully clipped horizontally to fully visible, starting with a 500 ms duration and playing only once.
The default state must show the full image; apply the clipped initial state only when `@supports (clip-path: inset(0))` succeeds and scripts initialize successfully.
Show the image directly under `prefers-reduced-motion: reduce`.

Create a lightweight Three.js Hero with a low-poly abstract object and a small number of semi-transparent interface planes, using only subtle pointer parallax.
Limit geometry count, texture size, and device pixel ratio; pause rendering when the page is not visible and release GPU resources when the component unmounts.
Use a simplified scene on mobile; show a static poster with an alternative text strategy when WebGL is unavailable, device performance is insufficient, or `prefers-reduced-motion: reduce` is enabled.

Give the project card cover and detail Hero a shared, unique `view-transition-name`, with a transition duration of 300-450 ms.
For same-document transitions, check `document.startViewTransition`; enable `@view-transition` for cross-document transitions only on same-origin pages.
Keep normal navigation when unsupported, skip animation under `prefers-reduced-motion: reduce`, and verify focus, scroll position, and back-navigation behavior.

Fully support `prefers-reduced-motion: reduce`: disable Parallax, magnetic behavior, 3D Tilt, automatic Marquee, and large page transitions;
change Scroll Reveal to direct display or a brief fade, and stop Carousel autoplay. Disabling animation must not hide content or remove status feedback.

First measure the current page, then define measurable budgets for mobile above-the-fold JavaScript, critical images, fonts, third-party requests, and Core Web Vitals.
Use suitable formats and dimensions for critical images, load WebGL on demand, and retain only necessary font families and weights.
Check regressions in CI with fixed devices, network conditions, and multiple samples; fail the check or require explicit approval when a budget is exceeded.

Design and implement a responsive personal portfolio website.

The information architecture includes Home, Work, Project Detail, About, Journal, and Contact. The homepage uses a Split-screen Hero: the left side presents professional positioning, a short introduction, and primary actions, while the right side shows an abstract interface visual; below it, use a Bento Grid to organize Featured Project, About, Skills, Latest Writing, and Contact.

The Work page uses a responsive Card-based Layout: three columns on desktop, two on tablet, and one on mobile. Use a Masonry Gallery for visual work when the browser supports it; otherwise fall back to a regular Grid while keeping DOM and reading order consistent. Project details use a Case Study structure with Overview, Problem, Role, Process, Key Decisions, Solution, Outcome, and Reflection; add a sticky table of contents on desktop.

Use a Sticky Navbar on desktop and a Hamburger Menu with a right-side Drawer on mobile; provide Breadcrumbs on project details and Anchor Links for single-page sections. Put the contact form in a native dialog, support Lightbox for project images, use Toast feedback for saving and copying, use an Accordion for the FAQ, and provide a Command Palette for in-site navigation. Dialog, Drawer, Tabs, Accordion, Lightbox, and Command Palette must all implement correct focus management, keyboard operation, accessible names, and closing mechanisms.

Use a warm white background, dark green accents, and dark body text, with low-saturation abstract shapes, semi-transparent interface panels, and moderate spatial depth. Do not use unrelated home products, staged office photography, stock people, or cartoon illustrations.

Use mobile-first, semantic HTML, CSS Grid, and Flexbox. Cover loading, empty, error, success, disabled, and long-text states. All interactions support keyboard input, visible focus, and screen readers; respect `prefers-reduced-motion`; provide contextual alt text and `width` and `height` for images, with native lazy loading below the fold. Experimental capabilities must use feature detection, progressive enhancement, and a fallback experience that does not depend on animation.

Add a complete experience layer to the responsive personal portfolio website.

[Scroll and Motion]
Use lightweight Scroll Reveal on the homepage and case-study pages; use Horizontal Scroll and CSS Scroll Snap for featured work; show reading progress at the top of long articles. Implement Infinite Scroll for inspiration feeds through `IntersectionObserver`, while retaining a focusable Load more entry, end state, and history-position restoration. Skill tags may use a slow Marquee. All effects must support `prefers-reduced-motion`, and content must remain visible by default if scripts fail.

[Feedback and Loading]
Use Skeletons that match the final layout for project lists, and express loading states with `aria-busy`. Use Lazy Loading and predefined dimensions for images and iframes below the fold; do not lazy-load the largest contentful paint image. Use a local Spinner with status text for short tasks, and prefer native progress for calculable tasks; submission buttons enter a Loading state and prevent duplicate actions. Design distinct Empty, Error, and Retry states for no content, failed loading, and retries; permit Optimistic UI for low-risk, reversible favorites; use `aria-invalid`, `aria-describedby`, error summaries, and Inline Validation in forms.

[Visual Style]
Combine Minimalism and Editorial Design with a warm white background, black body text, and dark green accents. Maintain a clear grid, large headlines, numbering, cross-column images, and generous whitespace. The Hero may selectively use restrained Glassmorphism, a low-saturation Gradient Mesh, and subtle Grain; do not turn all content into transparent cards.

[Advanced Effects]
Desktop galleries may use a Custom Cursor that does not replace the system cursor; primary CTAs may use a lightweight Magnetic Effect; featured cards may use 3D Tilt up to 5deg; and images may use a one-time Clip-path Reveal. The Hero may include a lightweight Three.js scene when needed, but it must provide a static fallback and release GPU resources; list-to-detail navigation may use View Transitions while retaining normal navigation when unsupported.

[Quality Requirements]
Use semantic HTML, modern CSS, and necessary JavaScript, prioritizing CSS Scroll Snap, Scroll-driven Animations, IntersectionObserver, native lazy loading, and the View Transition API. Define the target-browser matrix; use feature detection and progressive enhancement for all experimental capabilities. All interactions must support keyboard input, visible focus, and screen readers. Animation must not hide important information or become a prerequisite for completing tasks. First measure the baseline, then establish measurable performance budgets for scripts, fonts, images, third-party resources, Core Web Vitals, and WebGL.