claude-code-skills

🥈Silver

Greate Claude Code skills collection. Production-ready skills that cover the full delivery workflow . from research and discovery to epic planning, task breakdown, implementation, testing, code review, and quality gates.

334130Updated 1mo ago

Intermediate30min to implementautomation

Saves ~120 min per use

Quick InstallView Source

git clone https://github.com/levnikolaevich/claude-code-skills.git

Works with:

Claude

Overview

About This Skill

How to Use

1. **Initialize the Project**: Clone your repository and ensure it has a working test suite. Run `npm install` or equivalent to set up dependencies. 2. **Use the Prompt Template**: Copy the prompt template and replace placeholders like [FEATURE_NAME], [PROJECT_NAME], and [PROGRAMMING_LANGUAGE] with your specific details. For example: 'Research the codebase for implementing user authentication in my e-commerce platform.' 3. **Execute Step-by-Step**: Paste the customized prompt into Claude Code and execute each step sequentially. Use `claude` commands to run tests, check code quality, and generate documentation. 4. **Validate with Example Output**: Compare the AI's output against the example to ensure completeness. Run `npm test` or your project's test command to verify all tests pass. 5. **Iterate with Feedback**: If the AI misses any files or edge cases, provide feedback like 'Also check the database migration files' and regenerate the relevant section. Use `claude` to make targeted code changes based on the feedback.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/levnikolaevich/claude-code-skills

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as a senior software engineer using Claude Code to deliver a production-ready feature. Follow this workflow: [1] Research the codebase and identify relevant files for [FEATURE_NAME]. [2] Break down [FEATURE_NAME] into 5-7 implementation tasks with clear acceptance criteria. [3] Implement the feature in [PROGRAMMING_LANGUAGE] with unit tests, following [CODE_STYLE_GUIDE]. [4] Generate a pull request description with [REVIEW_CHECKLIST]. [5] Create a test plan for QA with [ENVIRONMENT_REQUIREMENTS]. Start with: 'Research the codebase for implementing [FEATURE_NAME] in [PROJECT_NAME].'

Example Output

### Research & Discovery
I analyzed the codebase in `project-name` (v2.3.1) and identified these key files for implementing dark mode: `src/theme.js`, `src/components/Button.jsx`, `src/styles/globals.css`. The project uses React 18, Tailwind CSS for styling, and Jest for testing. No existing dark mode implementation exists, but the theme system supports dynamic color changes.

### Task Breakdown
1. **Update Theme System** - Modify `src/theme.js` to include dark mode palette (primary, secondary, background colors)
2. **Create Theme Toggle Component** - Build a reusable `ThemeToggle.jsx` with localStorage persistence
3. **Update Global Styles** - Add dark mode variants in `globals.css` using Tailwind's dark: prefix
4. **Unit Tests** - Write Jest tests for theme switching and localStorage integration
5. **Integration Tests** - Verify dark mode works across all components in Storybook
6. **Documentation** - Update README with dark mode usage examples
7. **PR Review** - Prepare checklist for code review focusing on accessibility (WCAG contrast ratios)

### Implementation
I've implemented the dark mode feature in a new branch `feature/dark-mode`. The theme system now supports:
- Light/Dark toggle with smooth transitions (200ms)
- Persistent user preference in localStorage
- WCAG-compliant color palettes (4.5:1 contrast ratio for text)
- Automatic detection of system preference on first visit

Unit tests cover 95% of the new functionality, with integration tests verifying all components render correctly in both modes. The implementation follows the project's existing patterns and uses the same testing framework (Jest + React Testing Library).

### Pull Request Description
```
## Dark Mode Implementation

### Changes
- Added dark mode support to theme system
- Created ThemeToggle component with accessibility features
- Updated global styles for dark variants

### Testing
- Unit tests: 12 new tests covering theme switching
- Integration tests: Verified across 15 components
- Manual testing: Chrome, Firefox, Safari on macOS/Windows

### Checklist
- [ ] Accessibility audit passed (axe-core)
- [ ] Performance impact < 2% (measured via Lighthouse)
- [ ] Dark mode toggle keyboard navigable
- [ ] System preference detection works
- [ ] All existing tests pass
```

### Test Plan for QA
**Environment:** Chrome 120, Firefox 115, Safari 16
**Steps:**
1. Visit the app in light mode
2. Click theme toggle (should switch to dark)
3. Refresh page (preference should persist)
4. Test system preference detection (OS-level dark mode)
5. Verify all components maintain contrast ratios > 4.5:1