Commit Smart
Analyze staged/unstaged changes and create semantic conventional commits with context about WHY, not just WHAT. Auto-detects commit type and scope from the diff. Supports optional type/scope arguments. Usage - /commit-smart, /commit-smart fix, /commit-smart refactor api
$ npx claude-code-templates@latest --skill="git/commit-smart" --yesRequires Claude Code. The command adds this skill to your project's .claudedirectory — nothing runs on ToolZip's servers.
What's inside this skill
Component source
Smart Commit
Create meaningful conventional commits by analyzing your actual changes.
Workflow
Step 1: Assess the working tree
Run these commands to understand the current state:
git status
git diff --stat
git diff --cached --stat
Step 2: Handle unstaged changes
If nothing is staged (git diff --cached is empty):
- Show the user what files have changed
- Suggest what to stage based on logical grouping (e.g., "these 3 files are all related to the auth refactor")
- Ask if they want to stage all, or select specific files
- Stage the approved files with
git add <files>
If changes are already staged, proceed to analysis.
Step 3: Analyze the diff
Read the full staged diff:
git diff --cached
Determine the commit type from the changes:
| Signal | Type |
|---|---|
| New files with new functionality | feat |
| New test files or test additions | test |
| Changes to existing logic fixing incorrect behavior | fix |
| Structural changes without behavior change | refactor |
| package.json, tsconfig, CI config changes | chore |
| Build/bundler config changes | build |
| README, docs, comments only | docs |
| Formatting, whitespace, semicolons only | style |
| Performance improvements | perf |
Determine the scope from the primary directory or module affected:
src/api/->apisrc/components/auth/->authtests/->tests- Root config files -> omit scope
- Multiple unrelated areas -> omit scope
Step 4: Check for user overrides
If the user provided arguments via $ARGUMENTS:
- Single word (e.g.,
fix) -> use as commit type - Two words (e.g.,
refactor api) -> use as type and scope - Otherwise -> use auto-detected values
Step 5: Compose the commit message
Format: type(scope): imperative short description
Rules:
- Subject line max 72 characters
- Use imperative mood ("add", "fix", "refactor", not "added", "fixes")
- Don't end with a period
- Body explains WHY this change was made, not what changed (the diff shows what)
- If changes are trivial (typo fix, formatting), skip the body
Example:
feat(auth): add JWT refresh token rotation
Tokens were expiring mid-session for users with slow connections.
Rotating refresh tokens extends the session without compromising
security, since each refresh token can only be used once.
Step 6: Confirm and commit
Show the user the proposed commit message and ask for confirmation.
If confirmed, run:
git commit -m "<message>"
Then verify with:
git log --oneline -1
Show the committed hash and message.
Tips
- Run after completing a logical unit of work, not after every file change
- If the diff is too large for one commit, suggest splitting into multiple commits
- For breaking changes, add
!after the scope:feat(api)!: change response format - The body should answer "if someone reads this commit in 6 months, will they understand WHY?"
Related Claude Code Skills
Git Context Controller
"Git Context Controller (GCC) - Manages agent memory as a versioned file system under .GCC/. This skill should be used when working on multi-step projects that benefit from structured memory persistence, milestone tracking, branching for alternative approaches, and cross-session context recovery. Triggers on /gcc commands or natural language like 'commit this progress', 'branch to try an alternative', 'merge results', 'recover context'."
Star History Chart
Add a self-hosted "Stargazers over time" chart to any GitHub repo's README. GitHub now restricts the stargazers endpoint to a repo's own admins/collaborators, so third-party live services (star-history free tier, starchart.cc) return "Requires authentication" for everyone. This generates a static, theme-aware SVG in-repo and auto-refreshes it weekly with a GitHub Action using the repo's own GITHUB_TOKEN. Use when the star chart in a README is broken, shows "Requires authentication", or you want a star history that never breaks.
Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Code Reviewer
Comprehensive code review skill for TypeScript, JavaScript, Python, Swift, Kotlin, Go. Includes automated code analysis, best practice checking, security scanning, and review checklist generation. Use when reviewing pull requests, providing code feedback, identifying issues, or ensuring code quality standards.
Senior Frontend
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Ui Ux Pro Max
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.