David Dias

Review website image delivery and configure an image CDN, a service that optimizes and distributes images. Check file formats, dimensions, loading behavior, and initial screen impact, with guidance on verifying changes in DevTools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking whether website images use a CDN
• Configuring automatic image resizing and format conversion
• Reviewing image loading and initial screen impact

Review website images for file format, size, dimensions, and loading behavior. Produce improved HTML with image variants for different screen sizes, suitable compression, and deferred loading where appropriate, while addressing loading speed and layout shifts.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Auditing image sizes and formats on slow-loading pages
• Serving suitable image sizes for mobile and desktop screens
• Preventing layout shifts while images load

Find links that use identical text but lead to different URLs. Review the rendered page and suggest distinct labels or consistent destinations so readers, including people using screen readers, can understand where each link goes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Find identical link text with different destinations
• Improve labels in screen reader link lists
• Review links in shared components

Find optional features that slow the first page load and defer their code until a user interacts. Use dynamic imports, which load code on demand, and add immediate loading feedback while preserving the initial page experience.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Loading a map only when its panel opens
• Deferring an editor until a user activates it
• Reviewing chat widgets that slow initial loading

Audit links between pages on a website to find important pages with few incoming links. Suggest relevant connections from related content and clearer link text that describes the destination page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding important pages with too few internal links
• Adding relevant links between related articles
• Replacing vague link text with descriptive wording

Investigate slow page loads and check whether resources use HTTP/2 or HTTP/3. Measure the actual bottleneck, then recommend server or CDN changes where appropriate, explaining how shared connections and compressed headers affect loading.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating slow page loads
• Checking the HTTP protocol used for resources
• Reviewing web server or CDN settings

Review image dimensions to find risks of layout shift, where content moves as images load. Get file-level findings and before-and-after HTML using correct width, height, and responsive CSS, while accounting for small decorations with stable sizing.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating content jumps while images load
• Finding images missing width or height attributes
• Preserving image proportions in responsive layouts

Review loading priorities for key images, fonts, and CSS, then adjust fetchpriority hints so important resources receive attention earlier. Use it to improve LCP, the time until the largest visible content appears.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Improving the loading priority of a page’s main image
• Reducing competition from images below the visible area
• Reviewing preload priorities for critical fonts and CSS

GIF, 동영상, CSS 애니메이션의 빠른 깜박임을 점검합니다. 빛에 민감한 사용자를 고려해 빈도와 화면 면적을 확인하고 효과 제거, 속도 조절, 대체 표현을 지원합니다.

• 움직이는 GIF의 깜박임을 확인합니다
• 동영상과 CSS 애니메이션을 점검합니다
• 깜박임을 페이드나 정지 화면으로 바꿉니다

Review CSS text sizes for mobile readability and accessibility. Identify undersized text and fixed pixel settings, suggest relative units that follow browser font preferences, and check that content and controls remain usable at 200% zoom.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Auditing text sizes on mobile pages
• Converting pixel sizes to relative units
• Checking layouts at 200% zoom

Review and implement dark mode using CSS variables and the user's operating system preference. Check fixed colors, contrast, responsive layouts, and interaction states, with guidance for adding a manual theme switch that remembers the user's choice.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Match site colors to the operating system's dark mode
• Find fixed colors that break the dark theme
• Add a manual theme switch that remembers the user's choice

Review decorative images and icons to prevent unnecessary screen reader announcements. Check empty alt text, aria-hidden, and relevant keyboard behavior, then suggest fixes for concrete accessibility issues without flagging decorative assets solely because they exist.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking decorative images for unnecessary announcements
• Reviewing accessibility of SVGs and icons
• Checking shared decorative component patterns

Review custom elements and Web Components for missing screen reader information, keyboard controls, focus handling, and HTML form integration. Get concrete fixes and identify cases where a native HTML control could serve the same purpose.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing custom controls for screen reader support
• Checking keyboard navigation in menus and listboxes
• Connecting custom inputs to HTML forms

Review forms, API requests, and browser storage to find personal data that no active feature needs. Identify unnecessary collection, suggest removal or anonymisation, and check analytics and logs for exposed personal identifiers and missing retention periods.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing personal data collected by forms
• Finding personal identifiers in analytics and logs
• Reviewing browser storage and retention periods

Audit and set up favicons, the small site icons used in browser tabs and search results. Check HTML links, image formats and dimensions, HTTPS access, and crawler restrictions, with guidance for ICO, SVG, and iOS icons.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking a site's existing favicon configuration
• Setting up favicons for a new project
• Investigating missing icons in search results

Review CSS focus indicators, the visible outlines that show which element receives keyboard input. Identify missing, clipped, or misplaced indicators, check contrast and responsive states, and guide changes that make keyboard navigation easier to follow.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Check keyboard focus visibility
• Review CSS that removes outlines
• Fix clipped or misplaced focus rings

Check and implement site icons for browser tabs, bookmarks, and mobile home screens. Review icon formats, sizes, HTML declarations, and PWA manifest settings to help the site display appropriate icons across browsers and devices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Prepare icons for browser tabs and bookmarks
• Set up mobile home screen icons
• Review PWA manifest icon settings

Review images and their visible captions, then connect them with figure and figcaption markup. Check caption placement and alternative text so screen readers can present the relationship between an image and its description.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Reviewing HTML for images with captions
• Checking captions and alternative text for duplication
• Improving screen reader access to image descriptions

Check whether sticky headers, banners, or chat widgets hide controls reached with the keyboard. Review tab order, zoomed views, and mobile layouts, then suggest spacing or scrolling changes that keep the focused control and its indicator visible.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking keyboard navigation around sticky headers
• Testing pages with cookie banners and chat widgets open
• Reviewing overlap in zoomed and mobile layouts

Review file upload interfaces for clear labels, accepted formats, size limits, and accessible progress and error messages. Check that keyboard and screen reader users can complete uploads, including alternatives to drag and drop.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review labels and instructions on file upload forms
• Check keyboard alternatives to drag and drop
• Improve upload progress and error announcements

Check third-party packages for known security vulnerabilities, review dependency versions and lock files, and plan updates or replacements. The skill also guides automated scanning in CI, the pipeline that runs project checks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Checking dependencies before a production deployment
• Investigating a reported package vulnerability
• Adding automated dependency scanning to CI

웹 화면을 느리게 만드는 DOM 읽기와 쓰기, 이벤트 처리를 살펴봅니다. 처리 순서와 갱신 빈도를 조정하고 브라우저에서 원인에 맞는 수정인지 검증합니다.

• 애니메이션 끊김 원인 조사
• DOM 읽기와 쓰기 작업 모으기
• 스크롤 및 터치 이벤트 처리 점검

Audit or draft an editorial policy for a blog, news site, or sensitive-topic publication. Cover author qualifications, research, fact-checking, corrections, and funding disclosures, and check that readers can find the policy from relevant pages.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Drafting an editorial policy page
• Reviewing author and fact-checking standards
• Documenting corrections and funding disclosures

Find empty links, unlabeled icon links, and broken destinations. Add descriptive text or labels that screen readers can announce, and fix or remove broken links so users can understand where each link leads.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding empty links across a page
• Adding destination labels to icon links
• Reviewing and fixing broken link destinations