Claude Code: Add Claude Code rules, commands, and authoring skill#201
Open
vprashrex wants to merge 5 commits into
Open
Claude Code: Add Claude Code rules, commands, and authoring skill#201vprashrex wants to merge 5 commits into
vprashrex wants to merge 5 commits into
Conversation
Encodes repo conventions for AI-assisted development: seven rules files covering components, hooks, API/data-fetching, styling, types, utils, and code-quality; a 7-step new-feature authoring skill; and /check, /create-issue, /create-pr commands plus allowed-tools for /pr-review. Closes #200
📝 WalkthroughWalkthroughThis PR adds a suite of Claude AI configuration files to the kaapi-frontend repo: six new rule documents covering components, hooks, data-fetching, utils, code quality, and styling; a new ChangesClaude AI Workflow & Code Conventions
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
vprashrex
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
.claude/rules/code-quality.md (1)
94-94: ⚡ Quick winTypeScript strict mode disabled but guidance expects "fully-typed code."
Setting
"strict": falseintsconfig.jsonwhile instructing developers to "write fully-typed code" creates ambiguity. Developers may skip types, relying on the relaxed compiler, which defeats the purpose of the guidance.Consider enabling
strict: trueto mechanically enforce the typed-code expectation, or clarify that the lax compiler is intentional and developers must self-enforce typing discipline.🤖 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 @.claude/rules/code-quality.md at line 94, The guidance says to "write fully-typed code (explicit prop/return interfaces)" while tsconfig.json currently has "strict": false, which invites inconsistency; either enable TypeScript strict mode by setting "strict": true in tsconfig.json to enforce the rule mechanically, or update the rule text in the code-quality guidance to explicitly state that strict mode is intentionally disabled and that developers must self-enforce full typing (e.g., require explicit prop/return interfaces on PRs), referencing the tsconfig.json "strict" flag and the phrase "fully-typed code (explicit prop/return interfaces)" so reviewers and CI rules remain aligned.
🤖 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 @.claude/rules/code-quality.md:
- Line 31: Disabling the react-hooks/exhaustive-deps rule risks stale closures
and missing dependencies; re-enable react-hooks/exhaustive-deps at "warn" in
your ESLint config (set "react-hooks/exhaustive-deps": "warn") and ensure
react-hooks/set-state-in-effect remains enabled or set to "warn" as well, then
update the documentation line that currently states they are "intentionally off"
to reflect the new warning-level configuration so developers see signals without
failing the build.
- Around line 48-67: The CopyIcon component is missing accessibility attributes
for screen readers; update the IconProps and CopyIcon to accept an optional
title (string) and/or ariaLabel prop and spread remaining SVG props, then render
a <title> element inside the SVG when title is provided and set role="img" plus
aria-label (or aria-labelledby referencing the title id) on the <svg> element so
assistive tech can describe the icon; update function signature (CopyIcon) to
handle these props and ensure existing className/style handling remains
unchanged.
In @.claude/rules/styling.md:
- Line 41: Reword the "Component-scoped animations" guidance in
.claude/rules/styling.md to clarify that Next.js provides styled-jsx out of the
box and that using <style jsx global> (as in app/components/ComingSoon.tsx) is
acceptable for declaring keyframes or animation CSS the component needs, but
make clear that “global” here is scoped by convention—advise naming keyframes
uniquely (e.g., prefix with component name) and limiting usage to that component
to avoid collisions; update the sentence to remove the implication that package
config is required and to explain the recommended naming/usage practice.
- Line 11: Referenced files exist but Sidebar.tsx and Button.tsx use Tailwind
neutral colors and Sidebar.tsx contains nested inline ternaries in className
that conflict with the styling rules; update both components to use semantic
token classes from app/globals.css (replace bg-neutral-*, bg-white with semantic
tokens like bg-primary, bg-surface, text-primary-token) and refactor
Sidebar.tsx’s dense className logic by extracting the nested ternary expressions
into named boolean variables or a small helper function (e.g.,
computeSidebarItemClass or isActive/isDisabled flags) and then compose the
className with template literals and the existing typed Record-based class maps
(preserve the typed Record maps, avoid cn()/clsx(), and keep next/font CSS
variables usage from layout.tsx).
---
Nitpick comments:
In @.claude/rules/code-quality.md:
- Line 94: The guidance says to "write fully-typed code (explicit prop/return
interfaces)" while tsconfig.json currently has "strict": false, which invites
inconsistency; either enable TypeScript strict mode by setting "strict": true in
tsconfig.json to enforce the rule mechanically, or update the rule text in the
code-quality guidance to explicitly state that strict mode is intentionally
disabled and that developers must self-enforce full typing (e.g., require
explicit prop/return interfaces on PRs), referencing the tsconfig.json "strict"
flag and the phrase "fully-typed code (explicit prop/return interfaces)" so
reviewers and CI rules remain aligned.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 8c6bcaa1-3265-4cc7-bebc-8135d9e52b3f
📒 Files selected for processing (12)
.claude/commands/check.md.claude/commands/create-issue.md.claude/commands/create-pr.md.claude/commands/pr-review.md.claude/rules/api-and-data-fetching.md.claude/rules/code-quality.md.claude/rules/components.md.claude/rules/hooks.md.claude/rules/styling.md.claude/rules/types-and-constants.md.claude/rules/utils.md.claude/skills/new-feature/SKILL.md
| | Only `console.warn` / `console.error` | `no-console` `{ allow: ["warn","error"] }` | warn | | ||
| | Hooks at top level, unconditional, stable order | `react-hooks/rules-of-hooks` (via next preset) | **error** | | ||
|
|
||
| Note: `react-hooks/exhaustive-deps` and `react-hooks/set-state-in-effect` are intentionally **off** — don't add deps comments to satisfy a rule that isn't running. |
There was a problem hiding this comment.
Disabling react-hooks/exhaustive-deps risks stale closures and missing dependencies.
Turning off exhaustive-deps removes the safety net that catches stale closures, infinite loops, and missing effect dependencies. These bugs are subtle, hard to debug, and commonly slip through code review. The rule exists specifically to prevent a class of runtime bugs that break user experience.
Consider re-enabling exhaustive-deps at warn level so developers see the signals without blocking the build.
🤖 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 @.claude/rules/code-quality.md at line 31, Disabling the
react-hooks/exhaustive-deps rule risks stale closures and missing dependencies;
re-enable react-hooks/exhaustive-deps at "warn" in your ESLint config (set
"react-hooks/exhaustive-deps": "warn") and ensure
react-hooks/set-state-in-effect remains enabled or set to "warn" as well, then
update the documentation line that currently states they are "intentionally off"
to reflect the new warning-level configuration so developers see signals without
failing the build.
Comment on lines
+48
to
+67
| interface IconProps { | ||
| className?: string; | ||
| style?: React.CSSProperties; | ||
| } | ||
|
|
||
| export default function CopyIcon({ className, style }: IconProps) { | ||
| return ( | ||
| <svg | ||
| className={className} | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke="currentColor" | ||
| strokeWidth={2} | ||
| style={style} | ||
| > | ||
| {/* paths */} | ||
| </svg> | ||
| ); | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Icon component pattern is missing accessibility attributes.
The example CopyIcon component lacks aria-label, role, or <title> child for screen readers. Icons without accessible text are invisible to assistive technology, blocking users who rely on screen readers.
♿ Proposed fix to add accessibility support
interface IconProps {
className?: string;
style?: React.CSSProperties;
+ "aria-label"?: string;
}
-export default function CopyIcon({ className, style }: IconProps) {
+export default function CopyIcon({ className, style, "aria-label": ariaLabel }: IconProps) {
return (
<svg
className={className}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
style={style}
+ aria-label={ariaLabel}
+ role="img"
>
+ {ariaLabel && <title>{ariaLabel}</title>}
{/* paths */}
</svg>
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| interface IconProps { | |
| className?: string; | |
| style?: React.CSSProperties; | |
| } | |
| export default function CopyIcon({ className, style }: IconProps) { | |
| return ( | |
| <svg | |
| className={className} | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| stroke="currentColor" | |
| strokeWidth={2} | |
| style={style} | |
| > | |
| {/* paths */} | |
| </svg> | |
| ); | |
| } | |
| ``` | |
| interface IconProps { | |
| className?: string; | |
| style?: React.CSSProperties; | |
| "aria-label"?: string; | |
| } | |
| export default function CopyIcon({ className, style, "aria-label": ariaLabel }: IconProps) { | |
| return ( | |
| <svg | |
| className={className} | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| stroke="currentColor" | |
| strokeWidth={2} | |
| style={style} | |
| aria-label={ariaLabel} | |
| role="img" | |
| > | |
| {ariaLabel && <title>{ariaLabel}</title>} | |
| {/* paths */} | |
| </svg> | |
| ); | |
| } |
🤖 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 @.claude/rules/code-quality.md around lines 48 - 67, The CopyIcon component
is missing accessibility attributes for screen readers; update the IconProps and
CopyIcon to accept an optional title (string) and/or ariaLabel prop and spread
remaining SVG props, then render a <title> element inside the SVG when title is
provided and set role="img" plus aria-label (or aria-labelledby referencing the
title id) on the <svg> element so assistive tech can describe the icon; update
function signature (CopyIcon) to handle these props and ensure existing
className/style handling remains unchanged.
|
|
||
| Tailwind CSS 4 is the styling system. A custom color/theme layer is defined in `app/globals.css`; components compose Tailwind utility classes directly. | ||
|
|
||
| Reference: `app/globals.css`, `app/components/ui/Button.tsx`, `app/components/Sidebar.tsx`, `app/layout.tsx`. |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify referenced example files exist
echo "Checking for referenced example files..."
for file in app/globals.css app/components/ui/Button.tsx app/components/Sidebar.tsx app/layout.tsx; do
if [ -f "$file" ]; then
echo "✓ $file exists"
else
echo "✗ $file NOT FOUND"
fi
doneRepository: ProjectTech4DevAI/kaapi-frontend
Length of output: 240
🏁 Script executed:
#!/bin/bash
# Inspect guideline snippet + referenced files for pattern alignment
set -euo pipefail
echo "== styling.md (lines 1-60) =="
nl -ba .claude/rules/styling.md | sed -n '1,60p'
echo
echo "== app/globals.css (first 120 lines) =="
nl -ba app/globals.css | sed -n '1,120p'
echo
echo "== app/components/ui/Button.tsx (first 160 lines) =="
nl -ba app/components/ui/Button.tsx | sed -n '1,160p'
echo
echo "== app/components/Sidebar.tsx (first 200 lines) =="
nl -ba app/components/Sidebar.tsx | sed -n '1,200p'
echo
echo "== app/layout.tsx (first 160 lines) =="
nl -ba app/layout.tsx | sed -n '1,160p'Repository: ProjectTech4DevAI/kaapi-frontend
Length of output: 167
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== .claude/rules/styling.md =="
echo "-- lines 1-120 --"
sed -n '1,120p' .claude/rules/styling.md
echo
echo "== app/globals.css =="
echo "-- head 80 --"
sed -n '1,80p' app/globals.css
echo
echo "== app/components/ui/Button.tsx =="
echo "-- head 120 --"
sed -n '1,120p' app/components/ui/Button.tsx
echo
echo "== app/components/Sidebar.tsx =="
echo "-- head 140 --"
sed -n '1,140p' app/components/Sidebar.tsx
echo
echo "== app/layout.tsx =="
echo "-- head 160 --"
sed -n '1,160p' app/layout.tsxRepository: ProjectTech4DevAI/kaapi-frontend
Length of output: 11921
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Search for cn/clsx usage in referenced files =="
rg -n --no-heading "(\bcn\s*\(|\bclsx\s*\()|from 'clsx'|from \"clsx\"" app/globals.css app/components/ui/Button.tsx app/components/Sidebar.tsx app/layout.tsx || true
echo
echo "== Check Sidebar.tsx: className template literals + ternaries depth signals =="
rg -n --no-heading "className=\{\`" app/components/Sidebar.tsx || true
echo
rg -n --no-heading "\?[^:]*:" app/components/Sidebar.tsx || true
echo
echo "== Show the most relevant Sidebar className blocks around matches (first few hits) =="
# Print a small window around the first few className template literal occurrences
rg -n "className=\{\`" app/components/Sidebar.tsx | head -n 5 | cut -d: -f1 | while read -r line; do
echo "--- Sidebar.tsx around line $line ---"
sed -n "$((line-15)),$((line+40))p" app/components/Sidebar.tsx
doneRepository: ProjectTech4DevAI/kaapi-frontend
Length of output: 15896
Confirm referenced styling example files and alignment with the rules
All referenced example files exist: app/globals.css, app/components/ui/Button.tsx, app/components/Sidebar.tsx, and app/layout.tsx. Button.tsx/app/layout.tsx match the stated patterns (typed Record-based class maps, template-literal className composition, no cn()/clsx(), and next/font CSS variables), but Sidebar.tsx/Button.tsx also use Tailwind neutral colors (bg-neutral-*, bg-white) and Sidebar.tsx has nested inline ternaries in className, which may conflict with the “semantic token classes only” and “split dense className logic” guidance.
🤖 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 @.claude/rules/styling.md at line 11, Referenced files exist but Sidebar.tsx
and Button.tsx use Tailwind neutral colors and Sidebar.tsx contains nested
inline ternaries in className that conflict with the styling rules; update both
components to use semantic token classes from app/globals.css (replace
bg-neutral-*, bg-white with semantic tokens like bg-primary, bg-surface,
text-primary-token) and refactor Sidebar.tsx’s dense className logic by
extracting the nested ternary expressions into named boolean variables or a
small helper function (e.g., computeSidebarItemClass or isActive/isDisabled
flags) and then compose the className with template literals and the existing
typed Record-based class maps (preserve the typed Record maps, avoid
cn()/clsx(), and keep next/font CSS variables usage from layout.tsx).
| } | ||
| ``` | ||
| - **`globals.css` is for what Tailwind can't express**: CSS variables/theme, base resets, and reusable keyframes/animations. | ||
| - **Component-scoped animations** use `<style jsx global>` blocks inside the component (e.g. `ComingSoon.tsx` steam keyframes) — only when the animation is local to that component. |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check for styled-jsx in package.json and Next.js config
echo "Checking for styled-jsx in package.json..."
if [ -f package.json ]; then
if grep -q "styled-jsx" package.json; then
echo "✓ styled-jsx found in package.json"
else
echo "✗ styled-jsx NOT found in package.json (may be built into Next.js)"
fi
fi
echo ""
echo "Checking for ComingSoon.tsx example..."
fd -t f 'ComingSoon.tsx' -x rg -l '<style jsx global>'Repository: ProjectTech4DevAI/kaapi-frontend
Length of output: 258
Clarify the “component-scoped animations” guidance for styled-jsx
- Next.js includes
styled-jsxautomatically (not listed inpackage.json), and the project’s exampleapp/components/ComingSoon.tsxalready uses<style jsx global>, so config verification isn’t the blocker. - The rule text is potentially misleading:
<style jsx global>makes the styles global, so reword to explain it’s appropriate for keyframes/styles the component needs, while ensuring naming/usage stays component-local to avoid collisions.
🤖 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 @.claude/rules/styling.md at line 41, Reword the "Component-scoped
animations" guidance in .claude/rules/styling.md to clarify that Next.js
provides styled-jsx out of the box and that using <style jsx global> (as in
app/components/ComingSoon.tsx) is acceptable for declaring keyframes or
animation CSS the component needs, but make clear that “global” here is scoped
by convention—advise naming keyframes uniquely (e.g., prefix with component
name) and limiting usage to that component to avoid collisions; update the
sentence to remove the implication that package config is required and to
explain the recommended naming/usage practice.
Ayush8923
requested changes
Jun 11, 2026
Ayush8923
left a comment
Ayush8923
left a comment
Collaborator
There was a problem hiding this comment.
This is a good start. However, rather than creating individual commands, I think we should create agents that can take ownership of implementing the solution and handling the workflow end-to-end, these types of agents we can create:
- business-analyst
- implementation-planner
- implementation-executor
- refactor
I mentioned this below as well.
Collaborator
There was a problem hiding this comment.
I don't think we need this file, we can create the issue manually.
Collaborator
There was a problem hiding this comment.
Same for this, will incorporate this with other implementation-executor file.
Collaborator
There was a problem hiding this comment.
Instead of creating multiple rules files, I think we need to crate the agents like:
- business-analyst
- implementation-planner
- implementation-executor
then we don't need these types of rules, will provide all these rules to agents.
…arketplace plugin
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.claude/commands/pr-review.md (1)
77-89:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd a language tag to the example fence.
The bare fenced block starting on Line 77 will trip markdownlint (
MD040). Mark it astextormdso this command doc stays lint-clean.🤖 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 @.claude/commands/pr-review.md around lines 77 - 89, The fenced code block starting on line 77 in the pr-review.md file is missing a language tag identifier after the opening triple backticks, which violates the markdownlint MD040 rule. Add either `text` or `md` as the language tag immediately after the opening triple backticks (on the same line) to specify the code fence language and keep the documentation lint-clean.Source: Linters/SAST tools
🤖 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.
Outside diff comments:
In @.claude/commands/pr-review.md:
- Around line 77-89: The fenced code block starting on line 77 in the
pr-review.md file is missing a language tag identifier after the opening triple
backticks, which violates the markdownlint MD040 rule. Add either `text` or `md`
as the language tag immediately after the opening triple backticks (on the same
line) to specify the code fence language and keep the documentation lint-clean.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 60841593-6784-4901-94df-30ef4939bc7b
📒 Files selected for processing (8)
.claude/commands/pr-review.md.claude/rules/components.md.claude/rules/data-fetching.md.claude/rules/hooks.md.claude/rules/utils.md.claude/settings.json.claude/skills/new-feature/SKILL.mdCLAUDE.md
✅ Files skipped from review due to trivial changes (7)
- .claude/settings.json
- CLAUDE.md
- .claude/rules/components.md
- .claude/rules/data-fetching.md
- .claude/rules/hooks.md
- .claude/rules/utils.md
- .claude/skills/new-feature/SKILL.md
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
2 participants
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.
Issue: #200
Summary
Rules (.claude/rules/)- 6 auto-loaded convention files:code-quality,components,hooks,styling,utils, anddata-fetching. These encode repo patterns (500 LOC limit, SRP/DRY, reuse-first, file-splitting seams) so they don't have to be re-derived each session.new-feature skill (.claude/skills/new-feature/SKILL.md)- a step-by-step authoring contract for non-trivial coding tasks: branch → orient via rules → reuse-first scan → correct placement → in-style writing → respect limits → lint + build verification..claude/settings.json- enables the Superpowers plugin (superpowers@claude-plugins-official) for the project.pr-reviewcommand cleanup (.claude/commands/pr-review.md) — trimmed and refactored (+43 / −137).CLAUDE.md- Few improvements.