feat: homepage UI components + fix body hydration mismatch#2
Open
gwho wants to merge 4 commits into
Open
Conversation
…pment/setup-tailwind-skills-20260612-pr # Conflicts: # README.md
- Add Hero, Features, HowItWorks, Testimonial, and BottomCTA homepage sections - Add Navbar and Footer layout components - Wire homepage sections into app/page.tsx - Add suppressHydrationWarning to <body> in layout.tsx to suppress browser-extension attribute injection (Grammarly et al.) causing SSR/client mismatch - Update progress-tracker.md and ui-registry.md with homepage component patterns - Add docs/plan/01-homepage/ and docs/fixes/01-body-hydration-extension-attributes/ documentation Co-authored-by: Cursor <cursoragent@cursor.com>
📝 WalkthroughWalkthroughInitial commit of the JobPilot Next.js 16/React 19 project. Adds the complete project scaffold (package.json, tsconfig, PostCSS, ESLint), a Tailwind v4 ChangesJobPilot App Foundation & Homepage
AI Agent Skills Library
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
🟡 Minor comments (20)
docs/plan/01-homepage/explanation.md-105-110 (1)
105-110:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRephrase the inline-style rule.
The doc currently states a blanket “no inline styles” rule, but the repo guidance only bans hardcoded hex values and raw Tailwind colors. Keep this gradient example as a special case, but don’t present inline styles as generally forbidden.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/plan/01-homepage/explanation.md` around lines 105 - 110, Rephrase the inline-style rule in the explanation section to clarify that the actual prohibition is against hardcoded hex values and raw Tailwind colors, not inline styles themselves. Acknowledge that inline styles using CSS variable references from the design token system (such as the gradient background example with var(--color-accent) and var(--color-overlay)) are compliant and acceptable. Update the rule statement to reflect the true intent: maintaining design token compliance rather than banning all inline styling.Source: Coding guidelines
docs/plan/01-homepage/plan.md-71-72 (1)
71-72:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winClarify the
/loginacceptance check.This checklist item says the CTA targets can both “not 404” and “can 404 for now,” which is contradictory. Pick one expected state so the verification step is unambiguous.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/plan/01-homepage/plan.md` around lines 71 - 72, The checklist item for CTAs contains contradictory requirements stating they both "do not 404" and "can 404 for now." Clarify this acceptance criteria by selecting one unambiguous expected state: either remove the "do not 404" requirement and keep the allowance that they "can 404 for now since auth isn't built yet," or remove the caveat and require that CTAs must not result in 404 errors. Ensure the final item contains only one clear, testable requirement.docs/plan/01-globals-css-setup/README.md-271-276 (1)
271-276:⚠️ Potential issue | 🟡 MinorUpdate the Inter font verification instruction.
In the Verification Checklist at line 275, the documentation incorrectly states to expect Inter requests from
fonts.gstatic.com. Sincenext/fontself-hosts fonts, DevTools will show them loading from/_next/static/media/...instead. Update the checklist to reflect this: "Network tab → Fonts → should see Inter requests from/_next/static/media/(not from external CDNs)."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/plan/01-globals-css-setup/README.md` around lines 271 - 276, Update the Inter font verification instruction in the Verification Checklist (item 3 that starts with "Inter font loads") to correct the expected font loading path. Replace the reference to `fonts.gstatic.com` with `/_next/static/media/` to accurately reflect that next/font self-hosts fonts instead of loading them from external CDNs. Update the instruction to read "Network tab → Fonts → should see Inter requests from `/_next/static/media/` (not from external CDNs)" or similar wording that makes this distinction clear.components/layout/Footer.tsx-15-17 (1)
15-17:⚠️ Potential issue | 🟡 MinorAvoid computing the copyright year at build time.
new Date().getFullYear()will be frozen into the statically rendered homepage, so the footer can drift out of date until the next deploy. Please confirm that's acceptable, or source the year from a dynamic runtime/build value instead.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/layout/Footer.tsx` around lines 15 - 17, The copyright year in the Footer component's paragraph element is computed at build time using new Date().getFullYear(), which freezes the year into the statically rendered output and prevents it from updating until the next deployment. Either confirm that this static behavior is acceptable for your use case, or refactor the copyright year calculation to use a dynamic runtime value (such as computing it client-side or sourcing it from a runtime/build-time variable) to ensure the footer year stays current without requiring redeployment.components/homepage/Hero.tsx-24-37 (1)
24-37:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winBoth CTA buttons link to the same destination.
The "Get Started" and "Find Your First Match" buttons both navigate to
/login. The different button copy suggests they should lead to different flows or entry points, but currently they perform identical actions.Consider either:
- Differentiating the destinations (e.g., second button could link to
/searchor/login?flow=match)- Using identical copy if they truly serve the same purpose
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/homepage/Hero.tsx` around lines 24 - 37, The "Get Started" and "Find Your First Match" buttons in the Hero component both have href="/login", which creates confusing UX since their different labels suggest different actions. Modify the href prop of the "Find Your First Match" Link to navigate to a different, more appropriate destination such as "/search" or "/login?flow=match" that aligns with the button's purpose of helping users find matches, rather than keeping both buttons pointing to the same login page.tsconfig.json-14-14 (1)
14-14:⚠️ Potential issue | 🟡 MinorChange
jsxto"preserve"for Next.js compatibility.Next.js requires the
jsxoption to be"preserve"to handle JSX transformation internally via its build pipeline. Setting it to"react-jsx"will be automatically reverted by Next.js and is not the recommended configuration.Suggested fix
- "jsx": "react-jsx", + "jsx": "preserve",🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tsconfig.json` at line 14, The jsx compiler option in tsconfig.json is currently set to "react-jsx", but Next.js requires it to be set to "preserve" to allow Next.js to handle JSX transformation internally through its build pipeline. Change the value of the jsx property from "react-jsx" to "preserve" in the TypeScript configuration.components/homepage/Testimonial.tsx-14-20 (1)
14-20:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winMake the avatar decorative.
The adjacent name/title already identify the speaker, so
alt="Alex Rivera"duplicates the same information for screen readers. Use an empty alt here instead.Suggested fix
- <Image - src="/images/user-icon.png" - alt="Alex Rivera" + <Image + src="/images/user-icon.png" + alt="" width={48} height={48} className="rounded-full"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/homepage/Testimonial.tsx` around lines 14 - 20, The Image component for the user avatar has an alt attribute that duplicates information already provided by adjacent name and title elements, which creates redundant context for screen readers. Change the alt attribute from "Alex Rivera" to an empty string (alt="") to mark the image as decorative, since the speaker is already identified by other text elements on the page.context/ui-tokens.md-232-238 (1)
232-238:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse the defined border token here.
app/globals.cssdefines--color-border;var(--border)is undefined and will break if anyone copies this table into CSS. Change it tovar(--color-border).Suggested fix
- border: 1px solid var(--border) + border: 1px solid var(--color-border)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@context/ui-tokens.md` around lines 232 - 238, The UI tokens documentation in the border style specification references an undefined CSS variable var(--border). Replace this reference with the correct defined token var(--color-border) that exists in app/globals.css to ensure the documented styles are accurate and functional for anyone copying them into their CSS code.components/layout/Navbar.tsx-38-38 (1)
38-38:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReplace
text-whitewith a token class.As per coding guidelines, use only project token classes for styling and never raw Tailwind color classes.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/layout/Navbar.tsx` at line 38, The className attribute in the Navbar component contains the raw Tailwind color class text-white, which violates the coding guideline to use only project token classes for styling. Replace the text-white class with the appropriate project token class for text color that matches your design system. Refer to your project's token definitions or design system documentation to identify the correct token class name that provides the same visual styling as text-white in this context.Source: Coding guidelines
context/build-plan.md-212-215 (1)
212-215:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse
MATCH_THRESHOLDhere instead of70.The code standards make this cutoff single-sourced, so hardcoding it here will drift as soon as the threshold changes. As per coding guidelines, import and use
MATCH_THRESHOLDeverywhere this value is needed.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@context/build-plan.md` around lines 212 - 215, Replace the hardcoded threshold value 70 with a reference to the MATCH_THRESHOLD constant in the High Match filter and Low Match filter descriptions. Update the bullet points to reference MATCH_THRESHOLD instead of hardcoding match_score >= 70 and match_score < 70, ensuring the documentation reflects the single-sourced threshold value and will automatically stay in sync if the constant is updated.Source: Coding guidelines
.agents/skills/tailwind-best-practices/SKILL.md-50-55 (1)
50-55:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReconcile the quick reference with the canonical rule file.
This summary forbids arbitrary values except for
heightandwidth, butreferences/rules/classname-no-arbitrary.mdalso allowsmin-*/max-*sizing utilities. Anyone skimming this file will enforce a stricter rule than the detailed policy. Based on the linked rule file, the quick reference should match the allowed exceptions.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-best-practices/SKILL.md around lines 50 - 55, The High-Impact Patterns section under ClassName Usage contains a rule description for classname-no-arbitrary that lists only height and width as allowed arbitrary value exceptions, but the canonical rule file classname-no-arbitrary.md permits additional exceptions including min-* and max-* sizing utilities. Update the quick reference in the ClassName Usage section to include min-* and max-* utilities alongside height and width to match the actual allowed exceptions defined in the canonical rule file..agents/skills/tailwind-best-practices/references/rules/classname-no-ds-override.md-10-10 (1)
10-10:⚠️ Potential issue | 🟡 MinorAlign "Popover" to "PopoverContent" in the rule statement.
Line 10 references
Popover, but the code examples (line 63) and the allowed-exceptions list (line 71) usePopoverContent. Update line 10 to match: "...except forheightandwidthonDialogContentandPopoverContentcomponents."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-best-practices/references/rules/classname-no-ds-override.md at line 10, The rule statement on line 10 references the `Popover` component, but the code examples and allowed-exceptions list later in the document use `PopoverContent` instead. Update line 10 to replace `Popover` with `PopoverContent` so that the rule statement is consistent with the rest of the documentation and accurately reflects which component allows height and width className overrides..agents/skills/tailwind-css-patterns/references/component-patterns.md-45-64 (1)
45-64:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd accessible labels to the icon-only controls.
The nav toggle and modal close button are icon-only, so screen readers have no usable name.
🔧 Suggested fix
- <button class="md:hidden"> + <button class="md:hidden" aria-label="Toggle navigation menu">- <button class="text-gray-500 hover:text-gray-700"> + <button class="text-gray-500 hover:text-gray-700" aria-label="Close modal">Also applies to: 109-117
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/component-patterns.md around lines 45 - 64, Add accessible labels to the icon-only controls to make them usable for screen readers. For the nav toggle button (the md:hidden button with the hamburger icon SVG) in the navigation component, add an aria-label attribute with a descriptive label such as "Toggle navigation menu". Similarly, for the modal close button located in the 109-117 range, add an appropriate aria-label attribute such as "Close modal". These aria-label attributes will provide screen readers with usable names for these controls so users relying on assistive technology can understand their purpose..agents/skills/tailwind-css-patterns/references/component-patterns.md-139-167 (1)
139-167:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDefault the reusable Button to
type="button".Without an explicit type, this component submits any enclosing form by default.
🔧 Suggested fix
return ( <button + type="button" className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/component-patterns.md around lines 139 - 167, The Button component is missing an explicit type attribute on its button element, which causes it to default to type="submit" and submit any enclosing form. Add a type="button" attribute to the button element in the Button function to prevent unwanted form submission behavior and make this reusable component safer to use by default..agents/skills/tailwind-css/SKILL.md-14-23 (1)
14-23:⚠️ Potential issue | 🟡 MinorSoften the claim about
tailwind.config.tsto match the corpus guidance.The phrase "eliminates
tailwind.config.ts" contradicts other docs in this corpus that document legacy JS configuration as a valid approach (see the "JavaScript Configuration (Legacy)" section in configuration.md). Rephrase as "CSS-first by default" to align with the broader guidance that still supports traditional setup options.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css/SKILL.md around lines 14 - 23, The statement "eliminates `tailwind.config.ts`" is too absolute and contradicts the corpus guidance that documents JavaScript configuration as a valid legacy approach. Soften this claim by rephrasing it to "CSS-first by default" to accurately convey that Tailwind v4 prioritizes CSS-only configuration while still supporting traditional setup options. This change maintains accuracy and consistency with the broader documentation about configuration approaches..agents/skills/tailwind-css-patterns/references/responsive-design.md-7-40 (1)
7-40:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd alt text to the image examples.
The hero and gallery snippets teach
<img>tags without any alternative text. Add meaningfulaltvalues, oralt=""when the image is purely decorative.🔧 Suggested fix
- <img src="hero.jpg" class="w-full rounded-lg shadow-lg" /> + <img src="hero.jpg" alt="Hero illustration" class="w-full rounded-lg shadow-lg" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/responsive-design.md around lines 7 - 40, The image examples in the responsive design reference lack accessibility attributes. Add meaningful alt text to all img tags in both the hero section and responsive grid gallery section. For the hero section img tag with src="hero.jpg", provide a descriptive alt text that explains the image content. For the gallery section img tags with src="image1.jpg" and src="image2.jpg", add appropriate alt values describing what each gallery image represents, or use alt="" if the images are purely decorative. Ensure every img element has an alt attribute to improve accessibility and SEO..agents/skills/tailwind-css-patterns/references/performance.md-30-42 (1)
30-42:⚠️ Potential issue | 🟡 MinorFix the undefined utility names in the CSS optimization example.
The snippet uses two utilities that don't match the configuration:
content-visibility-autoshould becontent-auto(defined in configuration.md)contain-layoutis not defined anywhereEither update the example to use
content-auto, or add matching@utilitydefinitions for both utilities.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/performance.md around lines 30 - 42, Update the Tailwind CSS optimization example in the performance.md file to use correct utility class names. Replace the `content-visibility-auto` class with `content-auto` to match the utility defined in the configuration. For the `contain-layout` class which has no defined utility, either replace it with an existing Tailwind utility that achieves a similar effect (such as `contain`) or add a matching custom `@utility` definition for `contain-layout` in the configuration to make the example consistent with the actual available utilities..agents/skills/tailwind-css-patterns/references/reference.md-67-70 (1)
67-70:⚠️ Potential issue | 🟡 MinorRemove quotes from the generic font fallback on line 69.
Quoting
"sans-serif"causes the browser to treat it as a literal font family name rather than a CSS generic keyword, breaking the fallback mechanism. CSS specification and Tailwind's@themeexamples require generic fallbacks to be unquoted.♻️ Proposed fix
- --font-display: "Satoshi", "sans-serif"; + --font-display: "Satoshi", sans-serif;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/reference.md around lines 67 - 70, In the `@theme` block, the `--font-display` custom property definition has the generic font fallback `"sans-serif"` wrapped in quotes. Remove the quotes around `sans-serif` to allow the browser to recognize it as a CSS generic keyword rather than a literal font family name, which will restore the proper fallback mechanism. The corrected value should match the pattern already used in the `--font-body` property where the generic fallback is unquoted..agents/skills/tailwind-css-patterns/references/reference.md-149-154 (1)
149-154:⚠️ Potential issue | 🟡 MinorFix dark mode compiled output to match the custom variant definition.
The example defines a class-based dark variant with
@custom-variant dark (&:where(.dark, .dark *));, but the compiled output at lines 357-360 shows the default media-query behavior (@media (prefers-color-scheme: dark)). When a custom dark variant is defined, using@variant darkshould produce class-based selectors. Update the compiled output to:Compiled Output Fix
- `@media` (prefers-color-scheme: dark) { - .my-element { - background: black; - } -} + .dark .my-element { + background: black; +}Also applies to: 352-360
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/reference.md around lines 149 - 154, The custom dark variant definition at lines 149-154 uses `@custom-variant dark (&:where(.dark, .dark *));` to create a class-based dark mode system, but the compiled output example at lines 352-360 incorrectly shows the default media-query behavior with `@media (prefers-color-scheme: dark)`. Update the compiled output section at lines 352-360 to reflect the actual output that would be generated by the class-based custom variant, using `.dark` class selectors instead of media queries, to ensure the documentation example accurately demonstrates what happens when the custom variant definition is applied..agents/skills/tailwind-css-patterns/references/reference.md-3-5 (1)
3-5:⚠️ Potential issue | 🟡 MinorCorrect the Tailwind version attribution for
@themeand@utilitydirectives.
@themeand@utilityshipped with Tailwind v4.0, not v4.1. These CSS-first configuration directives were introduced in the v4.0 release. Tailwind v4.1 (April 2025) added new utilities like text-shadow, mask, drop-shadow variants, and@sourcedirectives, but not the core@themeand@utilityfeatures.♻️ Proposed fix
- Tailwind CSS v4.1 introduces CSS-first configuration using the `@theme` directive, native support for custom utilities via `@utility`, seamless integration with modern build tools through Vite, PostCSS, and framework-specific plugins, and enhanced arbitrary value syntax for maximum flexibility. + Tailwind CSS v4.0 introduced CSS-first configuration using the `@theme` directive and functional custom utilities via `@utility`, with v4.1 adding new utilities, `@source` directives, and expanded variant coverage.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-css-patterns/references/reference.md around lines 3 - 5, The reference document incorrectly attributes the `@theme` and `@utility` directives to Tailwind v4.1. Correct this by updating the second paragraph to indicate that these CSS-first configuration directives were introduced in Tailwind v4.0, not v4.1. Update the version statement to accurately reflect that v4.1 (April 2025) added different features such as new utilities like text-shadow, mask, drop-shadow variants, and `@source` directives, while v4.0 introduced the `@theme` and `@utility` directives.
🧹 Nitpick comments (3)
app/globals.css (1)
3-3: 💤 Low valueExpected Stylelint error for Tailwind v4
@themedirective.The static analysis error
scss/at-rule-no-unknownfor@themeis a false positive. Tailwind v4 introduced the@themedirective for token definitions, but Stylelint doesn't recognize it yet. This is the correct syntax for Tailwind v4 theming.📋 Optional: Suppress this specific Stylelint warning
If desired, you can suppress this specific rule in your Stylelint configuration:
{ "rules": { "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["theme"] }] } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/globals.css` at line 3, The `@theme` directive from Tailwind v4 is being flagged as an unknown at-rule by Stylelint's `scss/at-rule-no-unknown` rule, which is a false positive. Update your Stylelint configuration file to suppress this specific warning by adding `theme` to the ignoreAtRules array in the `scss/at-rule-no-unknown` rule configuration. This will allow the valid Tailwind v4 `@theme` syntax to pass validation without errors.Source: Linters/SAST tools
.agents/skills/tailwind-utility-classes/SKILL.md (2)
24-40: ⚡ Quick winStandardize the docs on project tokens instead of raw palette classes and hex values. These examples will be copied into generated code, so the current
bg-blue-*,bg-gray-*,bg-red-*, andbg-[#...]patterns will keep leaking non-compliant styling into the app.
.agents/skills/tailwind-utility-classes/SKILL.md#L24-L40: replace the hex-based comparison example with project tokens..agents/skills/tailwind-css/references/coding-preferences.md#L109-L131: swap the color examples to project tokens..agents/skills/tailwind-css/references/tailwind-variants.md#L86-L105: rewrite the compound-variant examples to use project tokens.As per coding guidelines: use only project token classes for styling; never use raw Tailwind color classes or hex values.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-utility-classes/SKILL.md around lines 24 - 40, The documentation currently demonstrates raw Tailwind color classes and hex values instead of project tokens, which causes non-compliant styling when examples are copied into generated code. In `.agents/skills/tailwind-utility-classes/SKILL.md` lines 24-40, replace the hex-based color comparison example (the `bg-blue-500`, `text-white`, and `#3b82f6` patterns in the "Tailwind utility-first" section) with project token classes. In `.agents/skills/tailwind-css/references/coding-preferences.md` lines 109-131, update any color examples to use project tokens instead of raw Tailwind color classes. In `.agents/skills/tailwind-css/references/tailwind-variants.md` lines 86-105, rewrite the compound-variant examples to consistently use project tokens instead of raw Tailwind classes. Ensure all three locations follow the coding guideline that only project token classes should be used for styling, never raw Tailwind color classes or hex values.Source: Coding guidelines
44-84: 🏗️ Heavy liftVerify the intended Tailwind version for this skill.
These examples still model
space-x-*,leading-*,bg-gradient-*, andmin-h-screen, which conflicts with the v4 guidance elsewhere in this skill corpus. If this page is meant to be v4-only, the examples need to be rewritten; otherwise the docs should say it intentionally covers older syntax too.Also applies to: 296-393
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.agents/skills/tailwind-utility-classes/SKILL.md around lines 44 - 84, The Tailwind utility class examples in the skill documentation use v3 syntax like space-x-*, leading-*, bg-gradient-*, and min-h-screen, which conflicts with v4 guidance documented elsewhere in the skill corpus. Determine the intended Tailwind version for this skill: if it should be v4-only, rewrite all affected utility class examples to use v4-compatible syntax (removing or updating deprecated patterns); if it should cover both versions, add a clear note at the beginning of the documentation stating that the examples intentionally cover both Tailwind v3 and v4 syntax for backwards compatibility. Apply this resolution consistently across all affected sections in the SKILL.md file.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.agents/skills/imprint/SKILL.md:
- Around line 91-95: The SKILL.md file contains hardcoded references to a bare
ui-registry.md filename, but according to the PR context, the registry file is
actually located at context/ui-registry.md. Update all occurrences of the file
path reference from the bare ui-registry.md to context/ui-registry.md to ensure
the /imprint skill reads and writes to the correct registry location. This issue
affects multiple locations in the file: the initial reference around lines 91-95
where the file is opened or created, and also the subsequent references around
lines 152-159. Ensure consistent path usage across all occurrences so that
future sessions access the correct registry file.
In @.agents/skills/remember/SKILL.md:
- Around line 164-174: The restore mode's file allowlist in the remember skill
is incomplete. It currently only checks for root-level editor configuration
files (CLAUDE.md, .claude/context.md, .github/copilot-instructions.md,
.cursorrules, etc.) but excludes the context/*.md files (such as architecture,
build plan, UI rules/tokens, registry, and progress) that are essential for
session handoff state. Expand the allowlist to include the context directory
files so that when /remember restore runs, it captures and restores the complete
context needed by the next session, not just the editor-specific files.
In @.agents/skills/tailwind-configuration/SKILL.md:
- Around line 64-85: The Tailwind configuration examples in SKILL.md are using
v3 patterns that are no longer valid in v4. The safelist configuration with
pattern matching syntax and the purge property both need to be updated. Either
rewrite these examples to use Tailwind v4 syntax (where safelisting moved to CSS
via the `@source` inline() directive and purge was removed entirely), or clearly
mark these sections with a "Legacy (v3)" label at the beginning to prevent
maintainers from adopting outdated patterns. Apply this same approach to all
configuration examples in the file that use v3-specific features like safelist
patterns and the purge property.
In @.agents/skills/tailwind-css-patterns/references/performance.md:
- Around line 7-18: The configuration examples use outdated Tailwind v3 syntax
that is incompatible with the v4 setup confirmed in the project's package.json
and postcss.config.mjs. Remove the jit property from the tailwind.config.js
export object as JIT compilation is always enabled in v4. Replace any purge
configuration patterns with the content property. Update the PostCSS
configuration example to use ES module syntax and import `@tailwindcss/postcss`
plugin instead of using CommonJS require for tailwindcss. Ensure all code
snippets throughout the file reflect v4 patterns including proper ES module
import statements and the removal of deprecated v3 options like jit and purge.
In @.agents/skills/tailwind-css-patterns/SKILL.md:
- Around line 37-99: The Tailwind examples in SKILL.md (ProductCard, Dark Mode
Toggle, and Form Input components), accessibility.md (focus/contrast examples),
and animations.md (spinner/skeleton/badge examples) use palette-based Tailwind
classes like bg-white, bg-blue-500, and text-gray-600, which violates the repo's
policy requiring project token classes instead. Rewrite all recommended examples
in these three files to use project-defined token classes in place of direct
color utilities, or clearly label any generic Tailwind-only samples as such to
align the skill documentation with the enforced token policy.
In `@components/homepage/BottomCTA.tsx`:
- Around line 13-32: The BottomCTA component uses raw Tailwind color classes
like text-white, bg-white, and border-white instead of project token classes,
which violates coding guidelines. First, add the foreground color token by
including --color-foreground: `#ffffff`; in the `@theme` block in app/globals.css.
Then, in the BottomCTA.tsx component, replace all raw color classes: change
text-white on the h2 element to text-foreground, replace text-white/70 on the p
element with the foreground token and opacity modifier, change bg-white on the
first Link to bg-surface, and on the second Link replace border-white/30,
text-white, and hover:bg-white/10 with appropriate token-based classes
(text-foreground for the text and a token-based border and hover state instead
of raw white values).
In `@components/homepage/HowItWorks.tsx`:
- Line 57: The grid layout in the HowItWorks component uses a fixed
`grid-cols-2` class without responsive breakpoints, which causes cramped and
unreadable columns on mobile viewports. Add mobile-first responsive breakpoints
to the className of the grid container by replacing `grid-cols-2` with
`grid-cols-1 md:grid-cols-2` to stack content vertically on mobile devices and
display the 2-column layout only on medium screens and above.
In `@components/layout/Navbar.tsx`:
- Around line 36-41: The Link component in the Navbar component has a hardcoded
href="/login" for the "Start for free" CTA, but authenticated users should be
directed to "/dashboard" instead. Move the authentication check logic out of the
Navbar component and into its parent/layout component, then pass the resolved
href value as a prop to the Navbar component. Update the Link element to use
this prop instead of the hardcoded "/login" path.
In `@context/build-plan.md`:
- Around line 195-200: The build plan has the operations in the wrong order - it
attempts to save jobs with a run_id reference before the parent agent_run record
exists, which violates the foreign key constraint. Reorder the steps so that
"Create agent_run record in DB" occurs first to generate the run_id, and only
then execute the loop to save complete records to the jobs table with that
run_id reference. The final update to agent_run with total count should remain
last after all jobs are saved.
In `@context/library-docs.md`:
- Around line 390-413: The issue is that after closing the Stagehand session in
the early return condition (when both oneLiner and productSummary are empty),
the code continues to Step 2 which calls stagehand.extract() on the closed
session. Add an early return statement immediately after await stagehand.close()
in the empty check block, or wrap the entire Step 2 sub-page extraction
(starting with the subPageData variable assignment and the stagehand.extract()
call) in an else block so it only executes when the condition is false.
- Around line 223-243: In the jobRecord object creation, the source_url and
external_apply_url fields are both being set to job.redirect_url, which
conflates the original listing URL with the employer's direct apply URL. Fix
this by keeping source_url as job.redirect_url (the original Adzuna listing),
but set external_apply_url to a different value that represents the actual
employer's direct application URL. If the Adzuna job object does not provide a
direct employer apply URL, set external_apply_url to null or another appropriate
field that captures the distinction between the source listing and the direct
application path.
In `@context/project-overview.md`:
- Around line 46-51: The Homepage specification currently includes redirect
behaviors for logged-in and logged-out users, which contradicts the intent of
the page functioning as a landing page. Remove the redirect bullet points that
specify redirecting logged-in users to dashboard and logged-out users to login.
Instead, keep the Homepage as a rendered landing page with a Hero section that
displays for all users, and move the auth-specific navigation logic to the
call-to-action (CTA) buttons within the page itself so users see the homepage
first before being directed based on their authentication status.
In `@context/ui-tokens.md`:
- Around line 156-170: Standardize the match score band thresholds across
ui-rules.md and ui-tokens.md—the two files currently define conflicting ranges
(ui-rules.md has 80-100% green, 60-79% blue, below 60% orange; ui-tokens.md has
90-100% green, 70-89% green, 50-69% orange, below 50% gray). Decide which
mapping is correct and update both files to use the same thresholds
consistently. Additionally, in ui-tokens.md, replace all references to the
undefined CSS variable var(--border) with the correct variable name
var(--color-border) at the locations where these references appear (lines 234
and 350).
In `@package.json`:
- Around line 11-14: Update the React dependency versions to patch a
denial-of-service vulnerability in React Server Components. In the dependencies
section of package.json, upgrade the "react" package from version 19.2.4 to
version 19.2.7 or later, and upgrade the "react-dom" package from version 19.2.4
to version 19.2.7 or later. This addresses CVE-2026-23864, which can cause
server crashes, excessive CPU usage, or out-of-memory errors in applications
using React Server Components.
---
Minor comments:
In
@.agents/skills/tailwind-best-practices/references/rules/classname-no-ds-override.md:
- Line 10: The rule statement on line 10 references the `Popover` component, but
the code examples and allowed-exceptions list later in the document use
`PopoverContent` instead. Update line 10 to replace `Popover` with
`PopoverContent` so that the rule statement is consistent with the rest of the
documentation and accurately reflects which component allows height and width
className overrides.
In @.agents/skills/tailwind-best-practices/SKILL.md:
- Around line 50-55: The High-Impact Patterns section under ClassName Usage
contains a rule description for classname-no-arbitrary that lists only height
and width as allowed arbitrary value exceptions, but the canonical rule file
classname-no-arbitrary.md permits additional exceptions including min-* and
max-* sizing utilities. Update the quick reference in the ClassName Usage
section to include min-* and max-* utilities alongside height and width to match
the actual allowed exceptions defined in the canonical rule file.
In @.agents/skills/tailwind-css-patterns/references/component-patterns.md:
- Around line 45-64: Add accessible labels to the icon-only controls to make
them usable for screen readers. For the nav toggle button (the md:hidden button
with the hamburger icon SVG) in the navigation component, add an aria-label
attribute with a descriptive label such as "Toggle navigation menu". Similarly,
for the modal close button located in the 109-117 range, add an appropriate
aria-label attribute such as "Close modal". These aria-label attributes will
provide screen readers with usable names for these controls so users relying on
assistive technology can understand their purpose.
- Around line 139-167: The Button component is missing an explicit type
attribute on its button element, which causes it to default to type="submit" and
submit any enclosing form. Add a type="button" attribute to the button element
in the Button function to prevent unwanted form submission behavior and make
this reusable component safer to use by default.
In @.agents/skills/tailwind-css-patterns/references/performance.md:
- Around line 30-42: Update the Tailwind CSS optimization example in the
performance.md file to use correct utility class names. Replace the
`content-visibility-auto` class with `content-auto` to match the utility defined
in the configuration. For the `contain-layout` class which has no defined
utility, either replace it with an existing Tailwind utility that achieves a
similar effect (such as `contain`) or add a matching custom `@utility`
definition for `contain-layout` in the configuration to make the example
consistent with the actual available utilities.
In @.agents/skills/tailwind-css-patterns/references/reference.md:
- Around line 67-70: In the `@theme` block, the `--font-display` custom property
definition has the generic font fallback `"sans-serif"` wrapped in quotes.
Remove the quotes around `sans-serif` to allow the browser to recognize it as a
CSS generic keyword rather than a literal font family name, which will restore
the proper fallback mechanism. The corrected value should match the pattern
already used in the `--font-body` property where the generic fallback is
unquoted.
- Around line 149-154: The custom dark variant definition at lines 149-154 uses
`@custom-variant dark (&:where(.dark, .dark *));` to create a class-based dark
mode system, but the compiled output example at lines 352-360 incorrectly shows
the default media-query behavior with `@media (prefers-color-scheme: dark)`.
Update the compiled output section at lines 352-360 to reflect the actual output
that would be generated by the class-based custom variant, using `.dark` class
selectors instead of media queries, to ensure the documentation example
accurately demonstrates what happens when the custom variant definition is
applied.
- Around line 3-5: The reference document incorrectly attributes the `@theme`
and `@utility` directives to Tailwind v4.1. Correct this by updating the second
paragraph to indicate that these CSS-first configuration directives were
introduced in Tailwind v4.0, not v4.1. Update the version statement to
accurately reflect that v4.1 (April 2025) added different features such as new
utilities like text-shadow, mask, drop-shadow variants, and `@source` directives,
while v4.0 introduced the `@theme` and `@utility` directives.
In @.agents/skills/tailwind-css-patterns/references/responsive-design.md:
- Around line 7-40: The image examples in the responsive design reference lack
accessibility attributes. Add meaningful alt text to all img tags in both the
hero section and responsive grid gallery section. For the hero section img tag
with src="hero.jpg", provide a descriptive alt text that explains the image
content. For the gallery section img tags with src="image1.jpg" and
src="image2.jpg", add appropriate alt values describing what each gallery image
represents, or use alt="" if the images are purely decorative. Ensure every img
element has an alt attribute to improve accessibility and SEO.
In @.agents/skills/tailwind-css/SKILL.md:
- Around line 14-23: The statement "eliminates `tailwind.config.ts`" is too
absolute and contradicts the corpus guidance that documents JavaScript
configuration as a valid legacy approach. Soften this claim by rephrasing it to
"CSS-first by default" to accurately convey that Tailwind v4 prioritizes
CSS-only configuration while still supporting traditional setup options. This
change maintains accuracy and consistency with the broader documentation about
configuration approaches.
In `@components/homepage/Hero.tsx`:
- Around line 24-37: The "Get Started" and "Find Your First Match" buttons in
the Hero component both have href="/login", which creates confusing UX since
their different labels suggest different actions. Modify the href prop of the
"Find Your First Match" Link to navigate to a different, more appropriate
destination such as "/search" or "/login?flow=match" that aligns with the
button's purpose of helping users find matches, rather than keeping both buttons
pointing to the same login page.
In `@components/homepage/Testimonial.tsx`:
- Around line 14-20: The Image component for the user avatar has an alt
attribute that duplicates information already provided by adjacent name and
title elements, which creates redundant context for screen readers. Change the
alt attribute from "Alex Rivera" to an empty string (alt="") to mark the image
as decorative, since the speaker is already identified by other text elements on
the page.
In `@components/layout/Footer.tsx`:
- Around line 15-17: The copyright year in the Footer component's paragraph
element is computed at build time using new Date().getFullYear(), which freezes
the year into the statically rendered output and prevents it from updating until
the next deployment. Either confirm that this static behavior is acceptable for
your use case, or refactor the copyright year calculation to use a dynamic
runtime value (such as computing it client-side or sourcing it from a
runtime/build-time variable) to ensure the footer year stays current without
requiring redeployment.
In `@components/layout/Navbar.tsx`:
- Line 38: The className attribute in the Navbar component contains the raw
Tailwind color class text-white, which violates the coding guideline to use only
project token classes for styling. Replace the text-white class with the
appropriate project token class for text color that matches your design system.
Refer to your project's token definitions or design system documentation to
identify the correct token class name that provides the same visual styling as
text-white in this context.
In `@context/build-plan.md`:
- Around line 212-215: Replace the hardcoded threshold value 70 with a reference
to the MATCH_THRESHOLD constant in the High Match filter and Low Match filter
descriptions. Update the bullet points to reference MATCH_THRESHOLD instead of
hardcoding match_score >= 70 and match_score < 70, ensuring the documentation
reflects the single-sourced threshold value and will automatically stay in sync
if the constant is updated.
In `@context/ui-tokens.md`:
- Around line 232-238: The UI tokens documentation in the border style
specification references an undefined CSS variable var(--border). Replace this
reference with the correct defined token var(--color-border) that exists in
app/globals.css to ensure the documented styles are accurate and functional for
anyone copying them into their CSS code.
In `@docs/plan/01-globals-css-setup/README.md`:
- Around line 271-276: Update the Inter font verification instruction in the
Verification Checklist (item 3 that starts with "Inter font loads") to correct
the expected font loading path. Replace the reference to `fonts.gstatic.com`
with `/_next/static/media/` to accurately reflect that next/font self-hosts
fonts instead of loading them from external CDNs. Update the instruction to read
"Network tab → Fonts → should see Inter requests from `/_next/static/media/`
(not from external CDNs)" or similar wording that makes this distinction clear.
In `@docs/plan/01-homepage/explanation.md`:
- Around line 105-110: Rephrase the inline-style rule in the explanation section
to clarify that the actual prohibition is against hardcoded hex values and raw
Tailwind colors, not inline styles themselves. Acknowledge that inline styles
using CSS variable references from the design token system (such as the gradient
background example with var(--color-accent) and var(--color-overlay)) are
compliant and acceptable. Update the rule statement to reflect the true intent:
maintaining design token compliance rather than banning all inline styling.
In `@docs/plan/01-homepage/plan.md`:
- Around line 71-72: The checklist item for CTAs contains contradictory
requirements stating they both "do not 404" and "can 404 for now." Clarify this
acceptance criteria by selecting one unambiguous expected state: either remove
the "do not 404" requirement and keep the allowance that they "can 404 for now
since auth isn't built yet," or remove the caveat and require that CTAs must not
result in 404 errors. Ensure the final item contains only one clear, testable
requirement.
In `@tsconfig.json`:
- Line 14: The jsx compiler option in tsconfig.json is currently set to
"react-jsx", but Next.js requires it to be set to "preserve" to allow Next.js to
handle JSX transformation internally through its build pipeline. Change the
value of the jsx property from "react-jsx" to "preserve" in the TypeScript
configuration.
---
Nitpick comments:
In @.agents/skills/tailwind-utility-classes/SKILL.md:
- Around line 24-40: The documentation currently demonstrates raw Tailwind color
classes and hex values instead of project tokens, which causes non-compliant
styling when examples are copied into generated code. In
`.agents/skills/tailwind-utility-classes/SKILL.md` lines 24-40, replace the
hex-based color comparison example (the `bg-blue-500`, `text-white`, and
`#3b82f6` patterns in the "Tailwind utility-first" section) with project token
classes. In `.agents/skills/tailwind-css/references/coding-preferences.md` lines
109-131, update any color examples to use project tokens instead of raw Tailwind
color classes. In `.agents/skills/tailwind-css/references/tailwind-variants.md`
lines 86-105, rewrite the compound-variant examples to consistently use project
tokens instead of raw Tailwind classes. Ensure all three locations follow the
coding guideline that only project token classes should be used for styling,
never raw Tailwind color classes or hex values.
- Around line 44-84: The Tailwind utility class examples in the skill
documentation use v3 syntax like space-x-*, leading-*, bg-gradient-*, and
min-h-screen, which conflicts with v4 guidance documented elsewhere in the skill
corpus. Determine the intended Tailwind version for this skill: if it should be
v4-only, rewrite all affected utility class examples to use v4-compatible syntax
(removing or updating deprecated patterns); if it should cover both versions,
add a clear note at the beginning of the documentation stating that the examples
intentionally cover both Tailwind v3 and v4 syntax for backwards compatibility.
Apply this resolution consistently across all affected sections in the SKILL.md
file.
In `@app/globals.css`:
- Line 3: The `@theme` directive from Tailwind v4 is being flagged as an unknown
at-rule by Stylelint's `scss/at-rule-no-unknown` rule, which is a false
positive. Update your Stylelint configuration file to suppress this specific
warning by adding `theme` to the ignoreAtRules array in the
`scss/at-rule-no-unknown` rule configuration. This will allow the valid Tailwind
v4 `@theme` syntax to pass validation without errors.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ec379457-640e-41c1-8bc4-276530f8ec32
⛔ Files ignored due to path filters (12)
app/favicon.icois excluded by!**/*.icocontext/designs/dashboard.pngis excluded by!**/*.pngcontext/designs/find-jobs.pngis excluded by!**/*.pngcontext/designs/job-details.pngis excluded by!**/*.pngcontext/designs/landing-page.pngis excluded by!**/*.pngcontext/designs/profile.pngis excluded by!**/*.pngpackage-lock.jsonis excluded by!**/package-lock.jsonpublic/images/agnet-log.pngis excluded by!**/*.pngpublic/images/dashboard-demo.pngis excluded by!**/*.pngpublic/images/jobs-lists.pngis excluded by!**/*.pngpublic/images/user-icon.pngis excluded by!**/*.pngpublic/logo.pngis excluded by!**/*.png
📒 Files selected for processing (67)
.agents/skills/architect/SKILL.md.agents/skills/imprint/SKILL.md.agents/skills/recover/SKILL.md.agents/skills/remember/SKILL.md.agents/skills/review/SKILL.md.agents/skills/tailwind-best-practices/SKILL.md.agents/skills/tailwind-best-practices/references/rules/classname-no-arbitrary.md.agents/skills/tailwind-best-practices/references/rules/classname-no-ds-override.md.agents/skills/tailwind-best-practices/references/rules/component-use-existing.md.agents/skills/tailwind-best-practices/references/rules/tokens-no-modification.md.agents/skills/tailwind-best-practices/references/rules/tokens-use-existing.md.agents/skills/tailwind-best-practices/references/tailwind-best-practices-reference.md.agents/skills/tailwind-configuration/SKILL.md.agents/skills/tailwind-css-patterns/SKILL.md.agents/skills/tailwind-css-patterns/references/accessibility.md.agents/skills/tailwind-css-patterns/references/animations.md.agents/skills/tailwind-css-patterns/references/component-patterns.md.agents/skills/tailwind-css-patterns/references/configuration.md.agents/skills/tailwind-css-patterns/references/layout-patterns.md.agents/skills/tailwind-css-patterns/references/performance.md.agents/skills/tailwind-css-patterns/references/reference.md.agents/skills/tailwind-css-patterns/references/responsive-design.md.agents/skills/tailwind-css/SKILL.md.agents/skills/tailwind-css/agents/openai.yaml.agents/skills/tailwind-css/references/coding-preferences.md.agents/skills/tailwind-css/references/tailwind-v4-rules.md.agents/skills/tailwind-css/references/tailwind-variants.md.agents/skills/tailwind-css/references/tw-animate-css.md.agents/skills/tailwind-utility-classes/SKILL.md.agents/skills/tailwind/SKILL.md.gitignoreAGENTS.mdCLAUDE.mdREADME.mdapp/globals.cssapp/layout.tsxapp/page.tsxcomponents/homepage/BottomCTA.tsxcomponents/homepage/Features.tsxcomponents/homepage/Hero.tsxcomponents/homepage/HowItWorks.tsxcomponents/homepage/Testimonial.tsxcomponents/layout/Footer.tsxcomponents/layout/Navbar.tsxcontext/architecture.mdcontext/build-plan.mdcontext/code-standards.mdcontext/library-docs.mdcontext/progress-tracker.mdcontext/project-overview.mdcontext/ui-registry.mdcontext/ui-rules.mdcontext/ui-tokens.mddocs/fixes/01-body-hydration-extension-attributes/ai-discussion-topics.mddocs/fixes/01-body-hydration-extension-attributes/explanation.mddocs/fixes/01-body-hydration-extension-attributes/plan.mddocs/plan/01-globals-css-setup/README.mddocs/plan/01-homepage/ai-discussion-topics.mddocs/plan/01-homepage/explanation.mddocs/plan/01-homepage/plan.mdeslint.config.mjsmemory.mdnext.config.tspackage.jsonpostcss.config.mjsskills-lock.jsontsconfig.json
Comment on lines
+91
to
+95
| Open `ui-registry.md`. If it does not exist, create it. | ||
|
|
||
| Add a new entry for the component that was captured. Do not overwrite existing entries — append to the registry. | ||
|
|
||
| If an entry for this component type already exists — update it rather than duplicating. |
There was a problem hiding this comment.
Point /imprint at the actual registry file.
This hard-codes a bare ui-registry.md, but the PR context tracks the registry under context/ui-registry.md. If that path is wrong here, /imprint will write to a different file and future sessions will read stale patterns. Based on the PR context, the registry lives in context/ui-registry.md.
Also applies to: 152-159
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/imprint/SKILL.md around lines 91 - 95, The SKILL.md file
contains hardcoded references to a bare ui-registry.md filename, but according
to the PR context, the registry file is actually located at
context/ui-registry.md. Update all occurrences of the file path reference from
the bare ui-registry.md to context/ui-registry.md to ensure the /imprint skill
reads and writes to the correct registry location. This issue affects multiple
locations in the file: the initial reference around lines 91-95 where the file
is opened or created, and also the subsequent references around lines 152-159.
Ensure consistent path usage across all occurrences so that future sessions
access the correct registry file.
Comment on lines
+164
to
+174
| Read `memory.md` first. Then check for these specific context files if they exist and read only those: | ||
|
|
||
| - `CLAUDE.md`, `.claude/context.md` — Claude Code | ||
| - `.github/copilot-instructions.md` — GitHub Copilot | ||
| - `.cursorrules`, `.cursor/rules/` — Cursor | ||
| - `.windsurfrules` — Windsurf | ||
| - `AGENTS.md` — Codex | ||
| - `.clinerules` — Cline | ||
| - `context.md` — generic fallback | ||
|
|
||
| Do not scan or read other files beyond this list. Build the most complete picture possible from what is available. |
There was a problem hiding this comment.
Expand restore mode to the repo's real context files.
The allowlist only covers a few root-level editor files, but this PR's session state lives under context/*.md (architecture, build plan, UI rules/tokens, registry, progress). As written, /remember restore will skip the files the next session actually needs. Based on learnings, those context docs are part of the handoff state.
🧰 Tools
🪛 SkillSpector (2.1.1)
[error] 16: [PE3] Credential Access: Code accesses credential files (SSH keys, AWS credentials, etc.). This could indicate credential theft attempts.
Remediation: Remove references to credential paths. Use environment variables or secrets managers. For docs, use placeholder paths (e.g., /path/to/config). Never load .env or token files in production code paths.
(Privilege Escalation (PE3))
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/remember/SKILL.md around lines 164 - 174, The restore mode's
file allowlist in the remember skill is incomplete. It currently only checks for
root-level editor configuration files (CLAUDE.md, .claude/context.md,
.github/copilot-instructions.md, .cursorrules, etc.) but excludes the
context/*.md files (such as architecture, build plan, UI rules/tokens, registry,
and progress) that are essential for session handoff state. Expand the allowlist
to include the context directory files so that when /remember restore runs, it
captures and restores the complete context needed by the next session, not just
the editor-specific files.
Source: Learnings
Comment on lines
+64
to
+85
| For dynamic class names, use safelist or content transform: | ||
|
|
||
| ```javascript | ||
| module.exports = { | ||
| content: { | ||
| files: ['./src/**/*.{html,js}'], | ||
| transform: { | ||
| md: (content) => { | ||
| // Extract classes from markdown | ||
| return content | ||
| } | ||
| } | ||
| }, | ||
| safelist: [ | ||
| 'bg-red-500', | ||
| 'bg-green-500', | ||
| { | ||
| pattern: /bg-(red|green|blue)-(100|200|300)/, | ||
| }, | ||
| ], | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Locate and check the Tailwind configuration skill file
find . -name "SKILL.md" -path "*tailwind-configuration*" | head -20Repository: gwho/job-pilot
Length of output: 107
🏁 Script executed:
# Check package.json or similar to verify Tailwind version used in the repo
fd -e "package.json" -e "package-lock.json" -e "yarn.lock" | head -5 | xargs grep -l "tailwind" 2>/dev/null || echo "No tailwind dependency found in package files"Repository: gwho/job-pilot
Length of output: 104
🌐 Web query:
Tailwind CSS v4 configuration safelisting @source inline() documentation
💡 Result:
In Tailwind CSS v4.1 and later, you can safelist utility classes using the @source inline directive within your CSS files [1][2]. This replaces the safelist property previously found in the JavaScript-based configuration file [1][3]. The @source inline directive instructs Tailwind to generate specific class names even if they are not detected in your source files [4][1]. Key features and syntax: - Basic Usage: Provide the class name directly within the parentheses [4][5]. @source inline("underline"); - Multiple Utilities: You can include multiple classes separated by spaces, or use multiple @source inline statements [5][6]. @source inline("bg-red-500 bg-green-500"); - Brace Expansion: The input supports brace expansion, allowing you to generate multiple classes, variants, and ranges efficiently [4][1]. @source inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}"); - Excluding Classes: You can also use the @source not inline directive to explicitly prevent specific classes from being generated, effectively acting as a blacklist [4][1]. @source not inline("container"); This directive is particularly useful for handling dynamic class names that cannot be statically detected by Tailwind's automatic content scanner [2][6]. Ensure that you are using Tailwind CSS v4.1 or higher to access this functionality [1][7].
Citations:
- 1: https://tailwindcss.com/blog/tailwindcss-v4-1
- 2: https://tailkits.com/blog/tailwind-at-source-directive/
- 3: https://tailwindcss.com/docs/functions-and-directives
- 4: https://tailwindcss.com/docs/detecting-classes-in-source-files
- 5: https://blakejones.dev/blog/how-to-make-a-safelist-in-tailwind-v4.1+/
- 6: https://learn.bemorex.com/en/cursos/tailwind-css-v4/advanced-customization-v4
- 7: Add
@source inline(…)tailwindlabs/tailwindcss#17147
🏁 Script executed:
# Read the Tailwind configuration skill file to verify the content at lines 64-85 and 284-297
wc -l ./.agents/skills/tailwind-configuration/SKILL.mdRepository: gwho/job-pilot
Length of output: 111
🏁 Script executed:
# Read lines around 64-85
sed -n '60,90p' ./.agents/skills/tailwind-configuration/SKILL.mdRepository: gwho/job-pilot
Length of output: 549
🏁 Script executed:
# Read lines around 284-297
sed -n '280,310p' ./.agents/skills/tailwind-configuration/SKILL.mdRepository: gwho/job-pilot
Length of output: 622
Update Tailwind configuration examples to v4 standards or clearly mark as legacy.
Lines 64-85 show JavaScript safelist with pattern matching, and lines 284-297 show the purge property—both v3 patterns. Tailwind v4 moved safelisting to CSS via @source inline() directive and removed the purge option entirely. Rewrite these examples to use v4 syntax or add explicit "Legacy (v3)" labels to prevent maintainers from adopting outdated configuration patterns.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/tailwind-configuration/SKILL.md around lines 64 - 85, The
Tailwind configuration examples in SKILL.md are using v3 patterns that are no
longer valid in v4. The safelist configuration with pattern matching syntax and
the purge property both need to be updated. Either rewrite these examples to use
Tailwind v4 syntax (where safelisting moved to CSS via the `@source` inline()
directive and purge was removed entirely), or clearly mark these sections with a
"Legacy (v3)" label at the beginning to prevent maintainers from adopting
outdated patterns. Apply this same approach to all configuration examples in the
file that use v3-specific features like safelist patterns and the purge
property.
Comment on lines
+7
to
+18
| ```javascript | ||
| // tailwind.config.js | ||
| export default { | ||
| content: [ | ||
| "./index.html", | ||
| "./src/**/*.{js,ts,jsx,tsx,vue,svelte}", | ||
| "./node_modules/@mycompany/ui-lib/**/*.{js,ts,jsx,tsx}", | ||
| ], | ||
| // Enable JIT for faster builds | ||
| jit: true, | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n "jit:|purge:|require\\('tailwindcss'\\)|`@tailwindcss/postcss`" \
.agents/skills/tailwind-css-patterns/references/performance.md \
package.json postcss.config.* tailwind.config.*Repository: gwho/job-pilot
Length of output: 488
🏁 Script executed:
#!/bin/bash
# View lines around the flagged sections
echo "=== Lines 1-25 (first snippet with jit) ==="
sed -n '1,25p' .agents/skills/tailwind-css-patterns/references/performance.md
echo ""
echo "=== Lines 70-115 (second section with purge and require) ==="
sed -n '70,115p' .agents/skills/tailwind-css-patterns/references/performance.mdRepository: gwho/job-pilot
Length of output: 1605
Rewrite all config examples for Tailwind v4 syntax and API.
The file contains multiple outdated v3 patterns that contradict the repo's v4 setup (confirmed in package.json and postcss.config.mjs):
jit: true(lines 7–18): Removed in v4; JIT compilation is always enabled.purge: {}(lines 73–90): Replaced withcontent: []in v4.require('tailwindcss')(line 103): CommonJS syntax; v4 uses ES modules with@tailwindcss/postcss.- PostCSS config: Use ES module syntax and the
@tailwindcss/postcssplugin instead of the oldrequire('tailwindcss').
Update all code snippets to reflect v4 patterns, including the PostCSS configuration example.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/tailwind-css-patterns/references/performance.md around lines
7 - 18, The configuration examples use outdated Tailwind v3 syntax that is
incompatible with the v4 setup confirmed in the project's package.json and
postcss.config.mjs. Remove the jit property from the tailwind.config.js export
object as JIT compilation is always enabled in v4. Replace any purge
configuration patterns with the content property. Update the PostCSS
configuration example to use ES module syntax and import `@tailwindcss/postcss`
plugin instead of using CommonJS require for tailwindcss. Ensure all code
snippets throughout the file reflect v4 patterns including proper ES module
import statements and the removal of deprecated v3 options like jit and purge.
Comment on lines
+37
to
+99
| ```html | ||
| <!-- Center content --> | ||
| <div class="flex items-center justify-center min-h-screen"> | ||
| Content | ||
| </div> | ||
|
|
||
| <!-- Responsive grid --> | ||
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | ||
| <!-- Items --> | ||
| </div> | ||
|
|
||
| <!-- Card component --> | ||
| <div class="bg-white rounded-lg shadow-lg p-6"> | ||
| <h3 class="text-xl font-bold">Title</h3> | ||
| <p class="text-gray-600">Description</p> | ||
| </div> | ||
| ``` | ||
|
|
||
| ## Instructions | ||
|
|
||
| 1. **Start Mobile-First**: Write base styles for mobile, add responsive prefixes (`sm:`, `md:`, `lg:`) for larger screens | ||
| 2. **Use Design Tokens**: Leverage Tailwind's spacing, color, and typography scales | ||
| 3. **Compose Utilities**: Combine multiple utilities for complex styles | ||
| 4. **Extract Components**: Create reusable component classes for repeated patterns | ||
| 5. **Configure Theme**: Customize design tokens in `tailwind.config.js` or using `@theme` | ||
| 6. **Verify Changes**: Test at each breakpoint using DevTools responsive mode. Check for visual regressions and accessibility issues before committing. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Responsive Card Component | ||
|
|
||
| ```tsx | ||
| function ProductCard({ product }: { product: Product }) { | ||
| return ( | ||
| <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex"> | ||
| <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} /> | ||
| <div className="p-6"> | ||
| <h3 className="text-lg font-semibold">{product.name}</h3> | ||
| <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | ||
| Add to Cart | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### Dark Mode Toggle | ||
|
|
||
| ```html | ||
| <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> | ||
| <h1 class="dark:text-white">Title</h1> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Form Input | ||
|
|
||
| ```html | ||
| <input | ||
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" | ||
| placeholder="you@example.com" | ||
| /> | ||
| ``` |
There was a problem hiding this comment.
Align the Tailwind examples with the repo token policy.
The intentionally incorrect snippets are fine; the problem is that the recommended examples still teach palette-based classes (bg-white, bg-blue-500, text-gray-600, etc.) even though the repo policy requires project token classes for styling. That makes the skill corpus contradict the enforced guidance.
tailwind-css-patterns/SKILL.md#L37-L99: rewrite the card / dark-mode / form examples with project tokens..agents/skills/tailwind-css-patterns/references/accessibility.md#L5-L154: swap the focus / contrast examples to token-compliant classes or label them as generic Tailwind-only samples..agents/skills/tailwind-css-patterns/references/animations.md#L5-L127: do the same for the spinner / skeleton / badge examples.
📍 Affects 3 files
.agents/skills/tailwind-css-patterns/SKILL.md#L37-L99(this comment).agents/skills/tailwind-css-patterns/references/accessibility.md#L5-L154.agents/skills/tailwind-css-patterns/references/animations.md#L5-L127
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.agents/skills/tailwind-css-patterns/SKILL.md around lines 37 - 99, The
Tailwind examples in SKILL.md (ProductCard, Dark Mode Toggle, and Form Input
components), accessibility.md (focus/contrast examples), and animations.md
(spinner/skeleton/badge examples) use palette-based Tailwind classes like
bg-white, bg-blue-500, and text-gray-600, which violates the repo's policy
requiring project token classes instead. Rewrite all recommended examples in
these three files to use project-defined token classes in place of direct color
utilities, or clearly label any generic Tailwind-only samples as such to align
the skill documentation with the enforced token policy.
Source: Coding guidelines
Comment on lines
+223
to
+243
| const jobRecord = { | ||
| user_id: userId, | ||
| run_id: runId, | ||
| source: "search", // always 'search' for Adzuna jobs | ||
| source_url: job.redirect_url, | ||
| external_apply_url: job.redirect_url, | ||
| title: job.title, | ||
| company: job.company.display_name, | ||
| location: job.location.display_name, | ||
| salary: job.salary_min | ||
| ? `$${Math.round(job.salary_min / 1000)}k - $${Math.round(job.salary_max! / 1000)}k` | ||
| : null, | ||
| job_type: job.contract_type || "fulltime", | ||
| about_role: job.description, // Adzuna returns snippet — used as description | ||
| match_score: scoredJob.matchScore, | ||
| match_reason: scoredJob.matchReason, | ||
| matched_skills: scoredJob.matchedSkills, | ||
| missing_skills: scoredJob.missingSkills, | ||
| found_at: new Date().toISOString(), | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
Don't store the Adzuna redirect in both URL fields.
source_url should capture the original listing URL, while external_apply_url is supposed to be the employer's direct apply URL. Mapping both to job.redirect_url will send the "Apply Now" button back through Adzuna tracking and loses the source/apply distinction.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@context/library-docs.md` around lines 223 - 243, In the jobRecord object
creation, the source_url and external_apply_url fields are both being set to
job.redirect_url, which conflates the original listing URL with the employer's
direct apply URL. Fix this by keeping source_url as job.redirect_url (the
original Adzuna listing), but set external_apply_url to a different value that
represents the actual employer's direct application URL. If the Adzuna job
object does not provide a direct employer apply URL, set external_apply_url to
null or another appropriate field that captures the distinction between the
source listing and the direct application path.
Comment on lines
+390
to
+413
| // If oneLiner and productSummary are empty — wrong site or parked domain | ||
| // Skip to synthesis with job description and profile only | ||
| if (!homepageData.oneLiner && !homepageData.productSummary) { | ||
| await stagehand.close(); | ||
| // proceed to synthesis with empty companyResearch | ||
| } | ||
|
|
||
| // Step 2 — Sub-page extraction (max 3, prefer about/blog/engineering/product over careers) | ||
| const subPageData = await stagehand.extract({ | ||
| instruction: | ||
| "Extract substance that helps a candidate understand this company before applying: what they do, their values and how they work, the specific technologies and tools they use, notable projects or customers, and how the team operates. Ignore nav, footers, cookie banners, and generic marketing copy.", | ||
| schema: z.object({ | ||
| keyPoints: z.array(z.string()), | ||
| technologies: z | ||
| .array(z.string()) | ||
| .describe("Specific languages, frameworks, tools, platforms"), | ||
| valuesOrCulture: z | ||
| .array(z.string()) | ||
| .describe("Stated values, working style, team norms"), | ||
| notable: z | ||
| .array(z.string()) | ||
| .describe("Customers, funding, scale, projects, awards"), | ||
| }), | ||
| }); |
There was a problem hiding this comment.
Short-circuit after closing Stagehand.
This branch closes the session, but Step 2 still runs afterward, so stagehand.extract() will execute on a closed session. Add an early return or explicit else path for the fallback synthesis route.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@context/library-docs.md` around lines 390 - 413, The issue is that after
closing the Stagehand session in the early return condition (when both oneLiner
and productSummary are empty), the code continues to Step 2 which calls
stagehand.extract() on the closed session. Add an early return statement
immediately after await stagehand.close() in the empty check block, or wrap the
entire Step 2 sub-page extraction (starting with the subPageData variable
assignment and the stagehand.extract() call) in an else block so it only
executes when the condition is false.
Comment on lines
+46
to
+51
| ### Homepage | ||
|
|
||
| - Hero section | ||
| - Logged in users → redirect to dashboard | ||
| - Logged out users → redirect to login | ||
|
|
There was a problem hiding this comment.
Keep the homepage as a landing page, not a redirect.
These bullets contradict the rest of the homepage spec: the page should render for everyone, and auth-specific destinations belong on the CTAs. Moving the redirect behavior here would bypass the actual homepage entirely for logged-in users.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@context/project-overview.md` around lines 46 - 51, The Homepage specification
currently includes redirect behaviors for logged-in and logged-out users, which
contradicts the intent of the page functioning as a landing page. Remove the
redirect bullet points that specify redirecting logged-in users to dashboard and
logged-out users to login. Instead, keep the Homepage as a rendered landing page
with a Hero section that displays for all users, and move the auth-specific
navigation logic to the call-to-action (CTA) buttons within the page itself so
users see the homepage first before being directed based on their authentication
status.
Comment on lines
+156
to
+170
| ### Match Score Colors | ||
|
|
||
| Match score bars and indicators use gradient stops based on score range: | ||
|
|
||
| | Score Range | Color | Token | | ||
| | ----------- | ------ | -------------------------------------- | | ||
| | 90-100% | Green | `text-success` / `bg-success-lightest` | | ||
| | 70-89% | Green | `text-success` / `bg-success-light` | | ||
| | 50-69% | Orange | `text-warning` | | ||
| | Below 50% | Gray | `text-text-muted` | | ||
|
|
||
| ### Skills Badges | ||
|
|
||
| | Type | Background | Text | | ||
| | ------------- | --------------------- | ------------------------- | |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find the documentation files and CSS
find . -type f -name "ui-rules.md" -o -name "ui-tokens.md" -o -name "globals.css" | head -20Repository: gwho/job-pilot
Length of output: 121
🏁 Script executed:
# Check the size of these files to determine how to read them
wc -l context/ui-tokens.md context/ui-rules.md app/globals.css 2>/dev/null || echo "Files not found in expected locations"Repository: gwho/job-pilot
Length of output: 145
🏁 Script executed:
# Search for match score or score-related content in both documentation files
rg "Match Score|score range|Score Range" -A 5 context/ 2>/dev/null || echo "Pattern not found"Repository: gwho/job-pilot
Length of output: 4698
🏁 Script executed:
# Read the full ui-rules.md to see the complete Match Score Bar section
cat -n context/ui-rules.mdRepository: gwho/job-pilot
Length of output: 5766
🏁 Script executed:
# Read the full ui-tokens.md to ensure we have the complete picture
cat -n context/ui-tokens.mdRepository: gwho/job-pilot
Length of output: 13361
🏁 Script executed:
# Read the full globals.css to check for token definitions
cat -n app/globals.cssRepository: gwho/job-pilot
Length of output: 2530
Match score band thresholds conflict between ui-rules.md and ui-tokens.md—standardize before merging.
These docs define incompatible score ranges:
ui-rules.md(lines 166-170): 80-100% green, 60-79% blue, below 60% orangeui-tokens.md(lines 160-165): 90-100% green, 70-89% green, 50-69% orange, below 50% gray
Decide the canonical mapping and update both docs together. Additionally, ui-tokens.md lines 234 and 350 reference var(--border), which is not defined in globals.css—the variable is --color-border.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@context/ui-tokens.md` around lines 156 - 170, Standardize the match score
band thresholds across ui-rules.md and ui-tokens.md—the two files currently
define conflicting ranges (ui-rules.md has 80-100% green, 60-79% blue, below 60%
orange; ui-tokens.md has 90-100% green, 70-89% green, 50-69% orange, below 50%
gray). Decide which mapping is correct and update both files to use the same
thresholds consistently. Additionally, in ui-tokens.md, replace all references
to the undefined CSS variable var(--border) with the correct variable name
var(--color-border) at the locations where these references appear (lines 234
and 350).
Comment on lines
+11
to
+14
| "dependencies": { | ||
| "next": "16.2.9", | ||
| "react": "19.2.4", | ||
| "react-dom": "19.2.4" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
What is the latest stable version of Next.js as of June 2026? Are there any known security vulnerabilities in Next.js 16.2.9?
💡 Result:
As of June 15, 2026, the latest stable version of Next.js is 16.2.9 [1][2]. Regarding security vulnerabilities in Next.js 16.2.9: There are no known security vulnerabilities associated with this specific version. Previous versions of the 16.2.x branch (specifically versions prior to 16.2.6) were subject to several security advisories related to authorization bypasses and cross-site scripting (XSS) in the App Router [3][4][5][6]. These were addressed in version 16.2.6 and subsequent updates [3][4][5][6]. Version 16.2.9 is currently the latest stable release and includes these security patches [1][2].
Citations:
- 1: https://www.npmjs.com/package/next
- 2: https://en.wikipedia.org/wiki/Next.js
- 3: GHSA-267c-6grr-h53f
- 4: GHSA-492v-c6pp-mqqv
- 5: GHSA-ffhc-5mcf-pf4q
- 6: https://nvd.nist.gov/vuln/detail/CVE-2026-45109
🌐 Web query:
What is the latest stable version of React as of June 2026? Are there any known security vulnerabilities in React 19.2.4 or react-dom 19.2.4?
💡 Result:
As of June 15, 2026, the latest stable version of React is 19.2.7, which was released on June 1, 2026 [1][2][3][4]. Regarding React 19.2.4 and react-dom 19.2.4, these versions are vulnerable to denial-of-service (DoS) attacks related to React Server Components [5]. Specifically, this issue is tracked under CVE-2026-23864 [5]. The vulnerability allows specially crafted HTTP requests to be sent to Server Function endpoints, which can result in server crashes, excessive CPU usage, or out-of-memory exceptions [5]. It is recommended to upgrade to a patched version (such as 19.2.7) to mitigate these risks [5]. Please note that if your application does not use React Server Components or does not use a server/framework/bundler that supports them, your application is not affected by this vulnerability [5].
Citations:
- 1: https://github.com/facebook/React/releases
- 2: react/react@6117d7c
- 3: https://en.wikipedia.org/wiki/React_(software)
- 4: https://verssion.one/p/React_(software)/
- 5: GHSA-83fc-fqcc-2hmg
Upgrade React and react-dom to version 19.2.7 or later to patch a DoS vulnerability.
Next.js 16.2.9 is current and secure as of June 2026. However, React 19.2.4 and react-dom 19.2.4 are vulnerable to CVE-2026-23864, a denial-of-service attack in React Server Components that can cause server crashes, excessive CPU usage, or out-of-memory errors. The latest stable version is 19.2.7 (released June 1, 2026). Upgrade both packages unless your application does not use React Server Components.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` around lines 11 - 14, Update the React dependency versions to
patch a denial-of-service vulnerability in React Server Components. In the
dependencies section of package.json, upgrade the "react" package from version
19.2.4 to version 19.2.7 or later, and upgrade the "react-dom" package from
version 19.2.4 to version 19.2.7 or later. This addresses CVE-2026-23864, which
can cause server crashes, excessive CPU usage, or out-of-memory errors in
applications using React Server Components.
4 tasks
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
Hero,Features,HowItWorks,Testimonial,BottomCTANavbarandFooterlayout components, wired intoapp/page.tsx<body>caused by browser extensions (e.g. Grammarly) injecting attributes before React hydrates — resolved by addingsuppressHydrationWarningto<body>inapp/layout.tsxprogress-tracker.mdandui-registry.mdwith captured component patternsdocs/plan/01-homepage/anddocs/fixes/01-body-hydration-extension-attributes/Hydration Fix Detail
Browser extensions like Grammarly inject attributes (
data-new-gr-c-s-check-loaded,data-gr-ext-installed) on<body>after SSR but before React hydrates, causing a React attribute mismatch.suppressHydrationWarningon the element is the standard Next.js/React escape hatch for this — it only suppresses the warning for that single element, not its children.Test plan
http://localhost:3000— homepage sections render correctlyMade with Cursor
Summary by CodeRabbit
New Features
Configuration