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 - 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 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 →

Installation

From Marketplace (Recommended)

In Claude Code, run the command:
```
/plugin
```
Navigate to Marketplaces
Click Add Marketplace

Enter the repository URL:

[email protected]:NakanoSanku/OhMySkills.git

Or use Github:

NakanoSanku/OhMySkills

Or more...

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

Manual Installation

If you prefer to install manually:

Clone this repository:

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

Link the plugin directory to Claude Code:

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

Using Specific Skills in Settings

To configure skills in your .claude/settings.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:

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

Skill Development Guidelines

Follow the official Claude Code plugin development guide
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 file for details.

Acknowledgments

Built with Claude Code - Anthropic's official CLI for Claude
Design system prompts powered by designprompts.dev - Production-ready design system templates

Made with ❤️ by OhMySkills

design-style