OhMySkills

KO | EN

gitlite — search

#react #ai #typescript #go #android #rust #deep-learning #docker #cli #kubernetes #vue #awesome-list #ios #open-source

(★ 164)

useful anthropic skills

File Explorer

Download Latest Version (.zip)

- marketplace.json
- - Academia.md
  - ArtDeco.md
  - Bauhaus.md
  - BoldTypography.md
  - Botanical.md
  - Claymorphism.md
  - Cyberpunk.md
  - Enterprise.md
  - FlatDesign.md
  - Fluent2.md
  - HumanistLiterary.md
  - Industrial.md
  - Kinetic.md
  - Luxury.md
  - Material.md
  - Maximalism.md
  - MinimalDrak.md
  - ModernDark.md
  - Monochrome.md
  - Neo-brutalism.md
  - Neumorphism.md
  - Newsprint.md
  - Organic.md
  - PlayfulGeometric.md
  - Professional.md
  - Retro.md
  - Saas.md
  - Sketch.md
  - Swiss.md
  - TerminalCLI.md
  - Vaporwave.md
  - Web3.md
- - list-styles.sh
  - verify-skill.sh
- reference.md
- SKILL.md
- styles-mapping.json
- - analysis-guide.md
  - design-system-template.md
  - setup-guide.md
- README.md
- SKILL.md
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# OhMySkills

A curated collection of Claude Code skills for enhanced development workflows.

## Overview

OhMySkills provides powerful, production-ready skills for Claude Code that extend its capabilities across various development tasks. Each skill is carefully crafted to integrate seamlessly with your development workflow.

## Available Skills

### 🎨 Design Style Skill

Automatically retrieves design system prompts to create visually distinctive, production-grade frontend code with 30+ specific design styles.

> **Note**: Design system prompts are sourced from [designprompts.dev](https://designprompts.dev) - a curated collection of high-quality design system templates.

### 🔍 Design System Analyzer Skill

Analyze any website's UI style using ChromeDevTools to extract precise CSS tokens, animations, and interaction states. Generates comprehensive Design System Prompts from live websites.

**Key Features:**

- Deep CSS extraction (keyframes, transitions, tokens)
- Interaction state analysis (:hover, :focus, etc.)
- Design token extraction (CSS variables, colors, spacing)
- Tech stack fingerprinting (React, Vue, Tailwind detection)
- Anti-bot/Cloudflare handling with user guidance
- Generates complete Design System Prompts

**Example Usage:**

```
"Analyze this site: https://example.com"
"Extract UI style from https://dribbble.com"
"Create design system from this URL"
"Learn visual style from https://stripe.com"
```

**Requirements:**

- Chrome DevTools MCP server
- Recommended: Run Chrome with `--remote-debugging-port=9222` for best experience

[View Full Documentation →](./design-system-analyzer/SKILL.md)

**Design Systems Include:**

- **Modern**: Modern Dark, SaaS, Material, Claymorphism, Neumorphism
- **Minimal**: Swiss, Bauhaus, Flat Design, Monochrome, Minimal Dark
- **Creative**: Neo-brutalism, Bold Typography, Maximalism, Sketch, Playful Geometric
- **Professional**: Enterprise, Professional
- **Elegant**: Luxury, Art Deco, Academia
- **Tech**: Terminal CLI, Web3, Cyberpunk
- **Organic**: Botanical, Organic
- **Nostalgic**: Retro, Vaporwave
- **Editorial**: Newsprint
- **Dynamic**: Kinetic
- **Raw**: Industrial

**Key Features:**

- 30+ production-ready design systems
- Automatic style detection from user intent
- Framework-agnostic (React, Vue, Next.js, etc.)
- Detailed design tokens (colors, typography, spacing)
- Component patterns and implementation examples
- Anti-pattern guidelines to maintain authenticity

**Example Usage:**

```
"Create a landing page with neo-brutalist design"
"Build a SaaS dashboard with modern dark theme"
"Add a contact form with cyberpunk aesthetic"
"Design a portfolio with Swiss minimalism"
```

[View Full Documentation →](./design-style/SKILL.md)

## Installation

### From Marketplace (Recommended)

1. In Claude Code, run the command:

```
   /plugin
   ```

2. Navigate to **Marketplaces**
3. Click **Add Marketplace**
4. Enter the repository URL:

```
   git@github.com:NakanoSanku/OhMySkills.git
   ```

Or use Github:

```
   NakanoSanku/OhMySkills
   ```

Or more...

5. Browse and select the skills you want to install
6. Install selected skills - they will be immediately available in your Claude Code sessions

### Manual Installation

If you prefer to install manually:

1. Clone this repository:

```bash
git clone https://github.com/NakanoSanku/OhMySkills.git
cd OhMySkills
```

2. Link the plugin directory to Claude Code:

```bash
cc --plugin-dir /path/to/OhMySkills/.claude-plugin
```

### Using Specific Skills in Settings

To configure skills in your `.claude/settings.json`:

```json
{
  "plugins": ["/path/to/OhMySkills/.claude-plugin"]
}
```

## Usage

Once installed, skills are automatically available in your Claude Code sessions. Simply describe what you want to build, and Claude will invoke the appropriate skill:

**Frontend Development:**

```
User: "Build a landing page with modern dark aesthetic"
Claude: [Automatically invokes design-style skill with ModernDark design system]
```

**Component Creation:**

```
User: "Create a contact form with neo-brutalist style"
Claude: [Applies Neo-brutalism design patterns and tokens]
```

## Project Structure

```
OhMySkills/
├── .claude-plugin/
│   └── marketplace.json     # Marketplace configuration
├── design-style/            # Design Style Skill
│   ├── SKILL.md            # Skill definition
│   ├── prompts/            # 30+ design system prompts (from designprompts.dev)
│   ├── styles-mapping.json # Style metadata
│   ├── reference.md        # Design reference
│   └── scripts/            # Utility scripts
├── design-system-analyzer/  # Design System Analyzer Skill
│   ├── SKILL.md            # Skill definition
│   └── references/         # Analysis guides and templates
│       ├── analysis-guide.md
│       ├── design-system-template.md
│       └── setup-guide.md
└── README.md               # This file
```

## Contributing

We welcome contributions! To add a new skill or improve existing ones:

1. Fork this repository
2. Create a feature branch (`git checkout -b feature/new-skill`)
3. Follow the Claude Code skill development standards
4. Submit a pull request

### Skill Development Guidelines

- Follow the official [Claude Code plugin development guide](https://github.com/anthropics/claude-code/tree/main/plugins/plugin-dev)
- Use YAML frontmatter in `SKILL.md` files
- Include clear trigger phrases in skill descriptions
- Provide comprehensive documentation
- Test skills in clean environments

## License

MIT License - See [LICENSE](./LICENSE) file for details.

## Links

- **Repository**: https://github.com/NakanoSanku/OhMySkills
- **Issues**: https://github.com/NakanoSanku/OhMySkills/issues
- **Claude Code**: https://claude.com/claude-code

## Acknowledgments

- Built with [Claude Code](https://claude.com/claude-code) - Anthropic's official CLI for Claude
- Design system prompts powered by [designprompts.dev](https://designprompts.dev) - Production-ready design system templates

---

**Made with ❤️ by OhMySkills**

OhMySkills

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

OhMySkills

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README