+ 
+
+
+{/* After: Overflow control */}
+
+
+
+```
+
+### Text Clipping Prevention
+
+```jsx
+{/* Single line truncation */}
+Long text...
+ +{/* Multi-line truncation */} +Long text...
+ +{/* Allow wrapping */} +Long text...
+``` + +### Responsive Support + +```jsx +{/* Mobile-first responsive */} +
+
+```
+
+### Spacing Unification (Tailwind Config)
+
+```javascript
+// tailwind.config.js
+module.exports = {
+ theme: {
+ extend: {
+ spacing: {
+ '18': '4.5rem',
+ '22': '5.5rem',
+ },
+ },
+ },
+}
+```
+
+### Accessibility Improvements
+
+```jsx
+{/* Add focus state */}
+
+
+{/* Improve contrast */}
+
+ Content
+
+{/* Changed from text-gray-500 */} + Readable text +
+``` + +--- + +## React + CSS Modules + +### Fixes in Module Scope + +```css +/* Component.module.css */ + +/* Before */ +.container { + display: flex; +} + +/* After: Add overflow control */ +.container { + display: flex; + flex-wrap: wrap; + overflow: hidden; + max-width: 100%; +} +``` + +### Component-side Fixes + +```jsx +// Component.jsx +import styles from './Component.module.css'; + +// Before +
+
+// After: Add conditional class
+
+```
+
+---
+
+## styled-components / Emotion
+
+### Style Fixes
+
+```jsx
+// Before
+const Container = styled.div`
+ width: 100%;
+`;
+
+// After
+const Container = styled.div`
+ width: 100%;
+ max-width: 100%;
+ overflow-x: hidden;
+
+ @media (max-width: 768px) {
+ padding: 1rem;
+ }
+`;
+```
+
+### Responsive Support
+
+```jsx
+const Card = styled.div`
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.5rem;
+
+ @media (max-width: 1024px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (max-width: 640px) {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+`;
+```
+
+### Consistency with Theme
+
+```jsx
+// theme.js
+export const theme = {
+ colors: {
+ primary: '#2563eb',
+ text: '#1f2937',
+ textLight: '#4b5563', // Improved contrast
+ },
+ spacing: {
+ sm: '0.5rem',
+ md: '1rem',
+ lg: '1.5rem',
+ },
+};
+
+// Usage
+const Text = styled.p`
+ color: ${({ theme }) => theme.colors.text};
+ margin-bottom: ${({ theme }) => theme.spacing.md};
+`;
+```
+
+---
+
+## Vue (Scoped Styles)
+
+### Fixing Scoped Styles
+
+```vue
+
+
+ {/* Header */}
+
+
+ {children}
+
+
+
+
+ );
+}
+```
+
+---
+
+## Common Patterns
+
+### Fixing Flexbox Layout Issues
+
+```css
+/* Before: Items overflow */
+.flex-container {
+ display: flex;
+ gap: 1rem;
+}
+
+/* After: Wrap and size control */
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.flex-item {
+ flex: 1 1 300px; /* grow, shrink, basis */
+ min-width: 0; /* Prevent flexbox overflow issues */
+}
+```
+
+### Fixing Grid Layout Issues
+
+```css
+/* Before: Fixed column count */
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+
+/* After: Auto-adjust */
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+```
+
+### Organizing z-index
+
+```css
+/* Systematize z-index */
+:root {
+ --z-dropdown: 100;
+ --z-sticky: 200;
+ --z-modal-backdrop: 300;
+ --z-modal: 400;
+ --z-tooltip: 500;
+}
+
+.modal {
+ z-index: var(--z-modal);
+}
+```
+
+### Adding Focus States
+
+```css
+/* Add focus state to all interactive elements */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+ outline: 2px solid #2563eb;
+ outline-offset: 2px;
+}
+
+/* Customize focus ring */
+.custom-focus:focus-visible {
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
+}
+```
+
+---
+
+## Debugging Techniques
+
+### Visualizing Element Boundaries
+
+```css
+/* Use only during development */
+* {
+ outline: 1px solid red !important;
+}
+```
+
+### Detecting Overflow
+
+```javascript
+// Run in console to detect overflow elements
+document.querySelectorAll('*').forEach(el => {
+ if (el.scrollWidth > el.clientWidth) {
+ console.log('Horizontal overflow:', el);
+ }
+ if (el.scrollHeight > el.clientHeight) {
+ console.log('Vertical overflow:', el);
+ }
+});
+```
+
+### Checking Contrast Ratio
+
+```javascript
+// Use Chrome DevTools Lighthouse or axe DevTools
+// Or check at the following site:
+// https://webaim.org/resources/contrastchecker/
+```
diff --git a/skills/web-design-reviewer/references/visual-checklist.md b/skills/web-design-reviewer/references/visual-checklist.md
new file mode 100644
index 00000000..24346c54
--- /dev/null
+++ b/skills/web-design-reviewer/references/visual-checklist.md
@@ -0,0 +1,236 @@
+# Visual Inspection Checklist
+
+This document is a comprehensive checklist of items to verify during web design visual inspection.
+
+---
+
+## 1. Layout Verification
+
+### Structural Integrity
+
+- [ ] Header is correctly fixed/positioned at the top of the screen
+- [ ] Footer is positioned at the bottom of the screen or end of content
+- [ ] Main content area is center-aligned with appropriate width
+- [ ] Sidebar (if present) is positioned correctly
+- [ ] Navigation is displayed in the intended position
+
+### Overflow
+
+- [ ] Horizontal scrollbar is not unintentionally displayed
+- [ ] Content does not overflow from parent elements
+- [ ] Images fit within parent containers
+- [ ] Tables do not exceed container width
+- [ ] Code blocks wrap or scroll appropriately
+
+### Alignment
+
+- [ ] Grid items are evenly distributed
+- [ ] Flex item alignment is correct
+- [ ] Text alignment (left/center/right) is consistent
+- [ ] Icons and text are vertically aligned
+- [ ] Form labels and input fields are correctly positioned
+
+---
+
+## 2. Typography Verification
+
+### Readability
+
+- [ ] Body text font size is sufficient (minimum 16px recommended)
+- [ ] Line height is appropriate (1.5-1.8 recommended)
+- [ ] Characters per line is appropriate (40-80 characters recommended)
+- [ ] Spacing between paragraphs is sufficient
+- [ ] Heading size hierarchy is clear
+
+### Text Handling
+
+- [ ] Long words wrap appropriately
+- [ ] URLs and code are handled properly
+- [ ] No text clipping occurs
+- [ ] Ellipsis (...) displays correctly
+- [ ] Language-specific line breaking rules work correctly
+
+### Fonts
+
+- [ ] Web fonts load correctly
+- [ ] Fallback fonts are appropriate
+- [ ] Font weights are as intended
+- [ ] Special characters and emoji display correctly
+
+---
+
+## 3. Color & Contrast Verification
+
+### Accessibility (WCAG Standards)
+
+- [ ] Body text: Contrast ratio 4.5:1 or higher (AA)
+- [ ] Large text (18px+ bold or 24px+): 3:1 or higher
+- [ ] Interactive element borders: 3:1 or higher
+- [ ] Focus indicators: Sufficient contrast with background
+
+### Color Consistency
+
+- [ ] Brand colors are unified
+- [ ] Link colors are consistent
+- [ ] Error state red is unified
+- [ ] Success state green is unified
+- [ ] Hover/active state colors are appropriate
+
+### Color Vision Diversity
+
+- [ ] Information conveyed by shape and text, not just color
+- [ ] Charts and diagrams consider color vision diversity
+- [ ] Error messages don't rely solely on color
+
+---
+
+## 4. Responsive Verification
+
+### Mobile (~640px)
+
+- [ ] Content fits within screen width
+- [ ] Touch targets are 44x44px or larger
+- [ ] Text is readable size
+- [ ] No horizontal scrolling occurs
+- [ ] Navigation is mobile-friendly (hamburger menu, etc.)
+- [ ] Form inputs are easy to use
+
+### Tablet (641px~1024px)
+
+- [ ] Layout is optimized for tablet
+- [ ] Two-column layouts display appropriately
+- [ ] Image sizes are appropriate
+- [ ] Sidebar show/hide is appropriate
+
+### Desktop (1025px~)
+
+- [ ] Maximum width is set and doesn't break on extra-large screens
+- [ ] Spacing is sufficient
+- [ ] Multi-column layouts function correctly
+- [ ] Hover states are implemented
+
+### Breakpoint Transitions
+
+- [ ] Layout transitions smoothly when screen size changes
+- [ ] Layout doesn't break at intermediate sizes
+- [ ] No content disappears or duplicates
+
+---
+
+## 5. Interactive Element Verification
+
+### Buttons
+
+- [ ] Default state is clear
+- [ ] Hover state exists (desktop)
+- [ ] Focus state is visually clear
+- [ ] Active (pressed) state exists
+- [ ] Disabled state is distinguishable
+- [ ] Loading state (if applicable)
+
+### Links
+
+- [ ] Links are visually identifiable
+- [ ] Visited links are distinguishable (if needed)
+- [ ] Hover state exists
+- [ ] Focus state is clear
+
+### Form Elements
+
+- [ ] Input field boundaries are clear
+- [ ] Placeholder text contrast is appropriate
+- [ ] Visual feedback on focus
+- [ ] Error state display
+- [ ] Required field indication
+- [ ] Dropdowns function correctly
+
+---
+
+## 6. Images & Media Verification
+
+### Images
+
+- [ ] Images display at appropriate size
+- [ ] Aspect ratio is maintained
+- [ ] High resolution display support (@2x)
+- [ ] Display when image fails to load
+- [ ] Lazy loading behavior works
+
+### Video & Embeds
+
+- [ ] Videos fit within containers
+- [ ] Aspect ratio is maintained
+- [ ] Embedded content is responsive
+- [ ] iframes don't overflow
+
+---
+
+## 7. Accessibility Verification
+
+### Keyboard Navigation
+
+- [ ] All interactive elements accessible via Tab key
+- [ ] Focus order is logical
+- [ ] Focus traps are appropriate (modals, etc.)
+- [ ] Skip to content link exists
+
+### Screen Reader Support
+
+- [ ] Images have alt text
+- [ ] Forms have labels
+- [ ] ARIA labels are appropriately set
+- [ ] Heading hierarchy is correct (h1→h2→h3...)
+
+### Motion
+
+- [ ] Animations are not excessive
+- [ ] prefers-reduced-motion is supported (if possible)
+
+---
+
+## 8. Performance-related Visual Issues
+
+### Loading
+
+- [ ] Font FOUT/FOIT is minimal
+- [ ] No layout shift (CLS) occurs
+- [ ] No jumping when images load
+- [ ] Skeleton screens are appropriate (if applicable)
+
+### Animation
+
+- [ ] Animations are smooth (60fps)
+- [ ] No performance issues when scrolling
+- [ ] Transitions are natural
+
+---
+
+## Priority Matrix
+
+| Priority | Category | Examples |
+|----------|----------|----------|
+| P0 (Critical) | Functionality breaking | Complete element overlap, content disappearance |
+| P1 (High) | Serious UX issues | Unreadable text, inoperable buttons |
+| P2 (Medium) | Moderate issues | Alignment issues, spacing inconsistencies |
+| P3 (Low) | Minor issues | Slight positioning differences, minor color variations |
+
+---
+
+## Verification Tools
+
+### Browser DevTools
+
+- Elements panel: DOM and style inspection
+- Lighthouse: Performance and accessibility audits
+- Device toolbar: Responsive testing
+
+### Accessibility Tools
+
+- axe DevTools
+- WAVE
+- Color Contrast Analyzer
+
+### Automation Tools
+
+- Playwright (screenshot comparison)
+- Percy / Chromatic (Visual Regression Testing)
+
+
+
+
+```
+
+### Deep Selectors (Affecting Child Components)
+
+```vue
+
+```
+
+---
+
+## Next.js / App Router
+
+### Global Style Fixes
+
+```css
+/* app/globals.css */
+:root {
+ --foreground: #171717;
+ --background: #ffffff;
+}
+
+/* Prevent layout overflow */
+html, body {
+ max-width: 100vw;
+ overflow-x: hidden;
+}
+
+/* Prevent image overflow */
+img {
+ max-width: 100%;
+ height: auto;
+}
+```
+
+### Fixes in Layout Components
+
+```tsx
+// app/layout.tsx
+export default function RootLayout({ children }) {
+ return (
+
+
+ Content
+