Add accessibility, performance, SEO, dark mode & code examples#3
Open
aiagentwithdhruv wants to merge 7 commits intoLeonxlnx:mainfrom
Open
Add accessibility, performance, SEO, dark mode & code examples#3aiagentwithdhruv wants to merge 7 commits intoLeonxlnx:mainfrom
aiagentwithdhruv wants to merge 7 commits intoLeonxlnx:mainfrom
Conversation
…oss all skills 7 improvements applied to all 4 skills: 1. Accessibility (WCAG 2.2 AA): prefers-reduced-motion, contrast ratios, focus indicators, ARIA labels, skip navigation, keyboard traps, semantic HTML 2. Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms targets with specific implementation guidance 3. Responsive images: srcset, picture element, WebP/AVIF, lazy loading, explicit dimensions, Next.js Image component 4. Dark/light mode system: CSS custom properties, system detection, flash prevention, elevated surfaces pattern 5. SEO meta architecture: OG tags, JSON-LD, canonical URLs, sitemap, semantic headings, server-rendered content 6. Code examples: 4 before/after snippets (card, button, scroll animation, theme toggle) in taste-skill 7. Skill relationship clarity: soft-skill now has "when to use" guide, README has comparison table taste-skill: 10 → 14 sections (+426 lines) soft-skill: 8 → 11 sections redesign-skill: +3 audit categories, 7 → 10 fix priority steps output-skill: +multi-file and iterative request handling Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Reviewer's GuideExtends all four skills and the README to cover accessibility (WCAG 2.2 AA), Core Web Vitals/performance, responsive images, dark/light mode, SEO/meta architecture, concrete code examples, clearer skill selection guidance, and stricter multi-file/iterative-output rules without introducing breaking behavior. Sequence diagram for theme toggle with system detectionsequenceDiagram
actor User
participant ThemeToggle
participant LocalStorage
participant SystemPreferenceDetector
participant DocumentElement
User->>ThemeToggle: Load page
ThemeToggle->>LocalStorage: getItem(theme)
alt stored theme exists
LocalStorage-->>ThemeToggle: storedTheme
ThemeToggle->>DocumentElement: toggle dark class based on storedTheme
else no stored theme
ThemeToggle->>SystemPreferenceDetector: isDarkPreferred()
SystemPreferenceDetector-->>ThemeToggle: boolean isDark
ThemeToggle->>DocumentElement: toggle dark class based on isDark
end
User->>ThemeToggle: Click theme option
ThemeToggle->>ThemeToggle: setTheme(selectedTheme)
alt theme is system
ThemeToggle->>SystemPreferenceDetector: isDarkPreferred()
SystemPreferenceDetector-->>ThemeToggle: boolean isDark
ThemeToggle->>DocumentElement: toggle dark class based on isDark
ThemeToggle->>LocalStorage: removeItem(theme)
else theme is light or dark
ThemeToggle->>DocumentElement: toggle dark class based on theme
ThemeToggle->>LocalStorage: setItem(theme, themeValue)
end
Sequence diagram for reduced motion aware scroll animationsequenceDiagram
actor User
participant FeaturesSection
participant ReducedMotionController
participant MotionEngine
User->>FeaturesSection: Scroll page
FeaturesSection->>ReducedMotionController: shouldReduceMotion()
ReducedMotionController-->>FeaturesSection: boolean shouldReduce
alt shouldReduce is true
FeaturesSection->>MotionEngine: render static items without animation
else shouldReduce is false
FeaturesSection->>MotionEngine: apply container and item variants
MotionEngine->>MotionEngine: staggerChildren with spring transitions
end
Flow diagram for multi-file and iterative output handlingflowchart LR
A[Start_new_task] --> B{Needs_multiple_files}
B -- Yes --> C[Declare_file_manifest_with_paths]
C --> D[Check_for_new_dependencies]
D --> E[List_npm_install_commands_at_top]
E --> F[Output_each_file_in_full_with_path_label]
B -- No --> F
F --> G[Verify_all_imports_resolve_between_files]
G --> H[Check_every_requested_item_is_complete]
H --> I{User_requests_iterative_change}
I -- No --> J[Finalize_response]
I -- Yes --> K[Show_complete_modified_file]
K --> L{User_explicitly_requests_just_diff}
L -- Yes --> M[Provide_only_changed_section]
L -- No --> K
M --> J
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughDocumentation expanded across multiple skill modules: README updated with section counts and "Now includes" summaries; skill docs (taste, redesign, soft, output) gained new or expanded sections on accessibility (WCAG 2.2 AA), Core Web Vitals performance, SEO/meta architecture, dark/light theming, responsive images, multi-file outputs, and iterative-request handling. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The new accessibility/SEO/performance guidance is duplicated across taste-skill, soft-skill, and redesign-skill; consider extracting a shared canonical section or partial and referencing it from each skill to reduce future drift and keep the rules in sync.
- In the ThemeToggle example, the direct use of localStorage and matchMedia in useEffect can cause issues in SSR/Next.js environments and doesn’t respond to system theme changes after initial load—consider guarding for window availability and adding a listener for prefers-color-scheme changes or documenting these caveats alongside the snippet.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The new accessibility/SEO/performance guidance is duplicated across taste-skill, soft-skill, and redesign-skill; consider extracting a shared canonical section or partial and referencing it from each skill to reduce future drift and keep the rules in sync.
- In the ThemeToggle example, the direct use of localStorage and matchMedia in useEffect can cause issues in SSR/Next.js environments and doesn’t respond to system theme changes after initial load—consider guarding for window availability and adding a listener for prefers-color-scheme changes or documenting these caveats alongside the snippet.
## Individual Comments
### Comment 1
<location path="redesign-skill/SKILL.md" line_range="204" />
<code_context>
+4. **Hover and active states** — makes the interface feel alive
+5. **Layout and spacing** — proper grid, max-width, consistent padding
+6. **Image optimization & performance** — responsive images, preloads, lazy loading
+7. **Replace generic components** — swap cliche patterns for modern alternatives
+8. **Add loading, empty, and error states** — makes it feel finished
+9. **SEO meta tags & structured data** — discoverability and social sharing
</code_context>
<issue_to_address>
**nitpick (typo):** Consider using the standard spelling "cliché" instead of "cliche".
```suggestion
7. **Replace generic components** — swap cliché patterns for modern alternatives
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| 4. **Hover and active states** — makes the interface feel alive | ||
| 5. **Layout and spacing** — proper grid, max-width, consistent padding | ||
| 6. **Image optimization & performance** — responsive images, preloads, lazy loading | ||
| 7. **Replace generic components** — swap cliche patterns for modern alternatives |
There was a problem hiding this comment.
nitpick (typo): Consider using the standard spelling "cliché" instead of "cliche".
Suggested change
| 7. **Replace generic components** — swap cliche patterns for modern alternatives | |
| 7. **Replace generic components** — swap cliché patterns for modern alternatives |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@redesign-skill/SKILL.md`:
- Line 142: Update the Framer Motion bundle size claim in the SKILL.md list item
that currently reads about "~30KB gz" (the line mentioning "Animations using
layout-triggering properties." / the Framer Motion comparison) to the current
gzipped size of approximately 57.6KB (e.g., change "~30KB gz" to "~57.6KB gz")
so the document reflects Framer Motion v12.37.0; leave the GSAP size as-is.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: eb9d3ab2-a702-47ed-aaee-7ace26814e2b
📒 Files selected for processing (5)
README.mdoutput-skill/SKILL.mdredesign-skill/SKILL.mdsoft-skill/SKILL.mdtaste-skill/SKILL.md
Addresses coderabbitai review — actual gzipped size is 57.6KB, not 30KB as previously stated. Updated across all 3 skills. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
7 issues found across 5 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="redesign-skill/SKILL.md">
<violation number="1" location="redesign-skill/SKILL.md:132">
P2: Accessibility guidance incorrectly says menus must trap focus; focus traps are for modal dialogs, while menus should allow users to tab away/escape to close.</violation>
<violation number="2" location="redesign-skill/SKILL.md:152">
P2: SEO instructions are overly framework/router-specific and can conflict with the skill’s existing-stack/no-migration rules.</violation>
</file>
<file name="output-skill/SKILL.md">
<violation number="1" location="output-skill/SKILL.md:50">
P2: Import-resolution rule is overbroad for iterative repo edits and can force duplicating untouched files.</violation>
<violation number="2" location="output-skill/SKILL.md:58">
P2: The instruction to mark changed regions with an inline comment can make returned files invalid for formats that do not support comments (e.g., JSON, CSV), contradicting the “runnable code” requirement. Consider restricting this to comment-supporting formats or using surrounding prose instead.</violation>
</file>
<file name="taste-skill/SKILL.md">
<violation number="1" location="taste-skill/SKILL.md:482">
P2: The ThemeToggle “system” mode only reads prefers-color-scheme once and never listens for changes, so it won’t track OS theme changes after initial render.</violation>
<violation number="2" location="taste-skill/SKILL.md:508">
P2: The ThemeToggle example doesn’t expose which theme is currently selected to assistive technology; the active state is only conveyed via styling. Add an ARIA state (e.g., `aria-pressed` or radio semantics) so screen readers can identify the active option.</violation>
</file>
<file name="soft-skill/SKILL.md">
<violation number="1" location="soft-skill/SKILL.md:92">
P2: Reduced-motion guidance incorrectly hard-codes Framer Motion hook for GSAP/CSS/generic outputs, causing stack mismatch and unnecessary dependency pressure.</violation>
</file>
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
1. redesign-skill: Focus traps for modals only, menus allow tab-away + Escape 2. redesign-skill: SEO sitemap guidance now framework-agnostic 3. output-skill: Import rule scoped to created/modified files only 4. output-skill: Inline comment marking restricted to comment-supporting formats 5. taste-skill: ThemeToggle now listens for OS theme changes via matchMedia listener 6. taste-skill: ThemeToggle buttons have aria-pressed for screen readers 7. soft-skill: Reduced motion uses stack-appropriate detection, not Framer-only Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@soft-skill/SKILL.md`:
- Line 94: Update the "Keyboard Navigation" guidance in SKILL.md so it matches
the redesign-skill fix: remove the instruction that hamburger menus must trap
focus and instead state that hamburger/utility menus should allow tab-away and
close on Escape, reserving focus traps for true modals; specifically modify the
bullet under "Keyboard Navigation" that currently reads "Hamburger menus must
trap focus when open and release on close" to the new behavior, and ensure the
document consistently references focus traps only for modal components.
In `@taste-skill/SKILL.md`:
- Around line 241-247: The file uses motion.div inside the AnimatedSection
component but only imports useReducedMotion; update the import from
'framer-motion' to include motion (e.g., import { motion, useReducedMotion }
...) so the motion symbol is available for the AnimatedSection JSX; ensure the
import line that currently references useReducedMotion is changed to also export
motion.
- Around line 390-406: Add the missing import for ArrowUpRight in Example 2
using the same icon import pattern shown in Example 4 (i.e., import ArrowUpRight
from the same icon library used by Example 4 and ensure motion.button import is
present), and declare/export the Feature type used by Example 3 by adding a
Feature type/interface that includes the properties referenced in the example
(e.g., title, description and any icon/component field) so both examples become
copy-paste usable and follow the same import/type conventions as Example 4.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c07276ae-9e04-4b2d-a257-5cae20a6acaa
📒 Files selected for processing (4)
output-skill/SKILL.mdredesign-skill/SKILL.mdsoft-skill/SKILL.mdtaste-skill/SKILL.md
🚧 Files skipped from review as they are similar to previous changes (1)
- output-skill/SKILL.md
1. soft-skill: Focus traps limited to modals, hamburger menus allow tab-away + Escape (consistent with redesign-skill fix) 2. taste-skill: Add missing `motion` import in AnimatedSection example 3. taste-skill: Add missing imports (ArrowUpRight, motion) in Example 2 and Feature type declaration in Example 3 for copy-paste usability Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
soft-skill/SKILL.md (1)
92-92: Consider adding a reduced-motion code example for consistency.The guidance correctly mentions stack-appropriate detection methods (CSS media query,
window.matchMedia,useReducedMotion()), but unlike taste-skill which provides a concreteReducedMotionWrapper.tsxcode example (lines 232-248), soft-skill provides no implementation reference. This creates an inconsistency in documentation depth between the two skills.📚 Suggested enhancement for consistency
Either add a similar code example here, or add a cross-reference:
* **Reduced Motion:** Wrap ALL Framer Motion, GSAP, and CSS animations in `prefers-reduced-motion` checks. Spring physics, parallax, scroll hijacks — all must degrade to instant transitions when reduced motion is active. Use stack-appropriate detection: CSS `@media (prefers-reduced-motion: reduce)`, `window.matchMedia` in JS/GSAP, or `useReducedMotion()` only when Framer Motion is already in use. + For a complete Framer Motion implementation example, see taste-skill Section 10 (ReducedMotionWrapper.tsx).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@soft-skill/SKILL.md` at line 92, Add a concrete reduced-motion example or cross-reference to the existing ReducedMotionWrapper.tsx to match taste-skill's level of detail: either paste a brief implementation named ReducedMotionWrapper.tsx that demonstrates CSS `@media` (prefers-reduced-motion: reduce), window.matchMedia usage, and Framer Motion's useReducedMotion() patterns, or add a clear cross-reference in soft-skill/SKILL.md pointing readers to the existing ReducedMotionWrapper.tsx example and where to find it; reference the symbols ReducedMotionWrapper.tsx, useReducedMotion(), window.matchMedia, and the `@media` query so reviewers can quickly locate and reuse the implementation.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@taste-skill/SKILL.md`:
- Around line 362-388: Example 1 uses motion.div but omits the required import,
breaking the copy-paste pattern; add the missing import statement for motion
(import { motion } from 'framer-motion') at the top of the Example 1 snippet so
motion.div resolves, matching Examples 2–4 and restoring usability.
---
Nitpick comments:
In `@soft-skill/SKILL.md`:
- Line 92: Add a concrete reduced-motion example or cross-reference to the
existing ReducedMotionWrapper.tsx to match taste-skill's level of detail: either
paste a brief implementation named ReducedMotionWrapper.tsx that demonstrates
CSS `@media` (prefers-reduced-motion: reduce), window.matchMedia usage, and Framer
Motion's useReducedMotion() patterns, or add a clear cross-reference in
soft-skill/SKILL.md pointing readers to the existing ReducedMotionWrapper.tsx
example and where to find it; reference the symbols ReducedMotionWrapper.tsx,
useReducedMotion(), window.matchMedia, and the `@media` query so reviewers can
quickly locate and reuse the implementation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 49cfc232-bcd0-461b-9e58-03ace915af84
📒 Files selected for processing (2)
soft-skill/SKILL.mdtaste-skill/SKILL.md
1. taste-skill: Add missing `import { motion }` in Example 1 for
copy-paste consistency with Examples 2-4
2. soft-skill: Add cross-reference to taste-skill Section 10 for
ReducedMotionWrapper.tsx implementation example
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@soft-skill/SKILL.md`:
- Line 91: Update the "Contrast" bullet (the line beginning "* **Contrast:**"
that references "Ethereal Glass" and "text-shadow") to remove the misleading
claim that a solid text-shadow satisfies WCAG contrast; instead state that WCAG
contrast is determined solely by foreground/background color contrast (WCAG 2.2
AA: 4.5:1 normal, 3:1 large) and provide only actionable fixes such as
increasing text opacity, changing text or surface/background color, increasing
font weight or size (to meet large-text ratios), or altering the surface color;
make sure the revised text explicitly forbids relying on shadows as a contrast
solution and keeps the existing ratio numbers and "Ethereal Glass" note as
context.
In `@taste-skill/SKILL.md`:
- Around line 444-447: The example animates CSS filter via the hidden and show
variants (hidden: { opacity: 0, y: 24, filter: 'blur(4px)' } and show: {
opacity: 1, y: 0, filter: 'blur(0px)' }), which conflicts with the performance
rules; remove the filter property from both the hidden and show variant objects
so the animation relies on opacity and transform only (keep transition as-is)
and ensure no other code references filter for this motion example.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 918438d1-bfbd-4a36-9dfe-f72e46f71bd3
📒 Files selected for processing (2)
soft-skill/SKILL.mdtaste-skill/SKILL.md
1. soft-skill: WCAG contrast is foreground/background only — text-shadow does not satisfy contrast requirements. Replaced with actionable fixes. 2. taste-skill: Example 3 animated CSS filter (blur) which contradicts the performance rules (transform + opacity only). Removed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
1 issue found across 2 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="soft-skill/SKILL.md">
<violation number="1" location="soft-skill/SKILL.md:91">
P2: The guidance claims font weight/size “increase foreground/background contrast,” but WCAG contrast ratios are based on color luminance; size/weight only changes whether text qualifies as “large text” (3:1). This wording can lead to noncompliant outputs that keep failing colors while just bolding/enlarging text.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Font weight/size doesn't increase color contrast — it only changes whether text qualifies as "large text" (3:1 instead of 4.5:1). Reworded to prevent noncompliant implementations. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
What's Added
1. Accessibility (WCAG 2.2 AA) — all skills
prefers-reduced-motionenforcement, contrast ratios (4.5:1/3:1), focus indicators, ARIA labels, skip navigation, keyboard trap handling, semantic HTML, color independence.2. Core Web Vitals — taste-skill + redesign-skill
LCP < 2.5s, CLS < 0.1, INP < 200ms with specific implementation guidance. Bundle size awareness (Framer Motion ~30KB, GSAP ~25KB).
3. Responsive Images — taste-skill + redesign-skill
srcset,<picture>, WebP/AVIF, lazy loading, explicit dimensions, Next.js<Image>component,fetchpriority="high"for hero images.4. Dark/Light Mode System — taste-skill + soft-skill
CSS custom properties, system preference detection, theme flash prevention, elevated surfaces pattern (not inverted shadows), image brightness adjustment.
5. SEO Meta Architecture — taste-skill + soft-skill + redesign-skill
OG/Twitter meta tags, JSON-LD structured data, canonical URLs, sitemap/robots.txt, semantic headings, server-rendered critical content.
6. Code Examples — taste-skill
4 complete before/after code snippets:
7. Skill Relationship Clarity — soft-skill + README
Pre-flight Checklists Updated
Both taste-skill and soft-skill checklists now include accessibility, performance, SEO, and dark mode verification items.
Test Plan
Generated with Claude Code
Summary by Sourcery
Extend all skills with guidance for accessibility, performance, SEO, dark mode, and multi-file output workflows, plus clarify when to use each skill.
New Features:
Enhancements:
Summary by cubic
Adds WCAG 2.2 AA accessibility, Core Web Vitals, responsive images, dark/light mode, and SEO guidance across all skills, plus new code examples and clearer skill selection. Also refines focus behavior, framework‑agnostic sitemap rules, multi‑file output handling, and clarifies WCAG contrast (size/weight only qualifies large text for 3:1).
New Features
Bug Fixes
framer-motionbundle size guidance to ~57KB gz.Featuretype); theme toggle listens to OS changes viamatchMediaand usesaria-pressed; removes blur from an animation example to follow transform/opacity-only guidance.Written for commit 728f16e. Summary will update on new commits.
Summary by CodeRabbit