What are Claude Code Skills?

Claude Code Skills are reusable prompt templates stored as markdown files in your project's .claude/skills/ directory. They let you codify best practices and common workflows into slash commands that Claude follows consistently.

How do I create a Claude Code Skill?

Create a markdown file in .claude/skills/ with instructions for Claude. The filename becomes the command name — for example, .claude/skills/code-review.md can be invoked with /code-review during a Claude Code session.

Can I share skills with my team?

Yes. Skills stored in .claude/skills/ can be committed to version control so every team member has access to the same standardized workflows. You can also organize skills into subdirectories by category.

What is the difference between project and global skills?

Project skills (.claude/skills/) are specific to the current project and are committed to git. Global skills (~/.claude/skills/) are personal skills available across all your projects.

frontend-design-pro

New

184Community RegistryGeneralby ClaudeKit

Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.

Community PluginView Source

Overview

A comprehensive showcase of 11 modern frontend design aesthetics with master prompts, signature effects, and production-ready code.

Live Demo

[View Demo](https://claudekit.github.io/frontend-design-pro-demo/)

11 Aesthetic Directions

#	Style	Key Characteristics
01	Minimalism & Swiss Style	Rigorous grid systems, massive typography, asymmetric magazine layout
02	Neumorphism	Extruded elements, multiple drop shadows, "pressed in" buttons
03	Glassmorphism	Animated mesh gradients, frosted glass cards, backdrop-filter blur
04	Brutalism	Thick 3-4px borders, hard drop shadows, masonry/broken grid
05	Claymorphism	Inflated 3D clay, marshmallow shapes, candy pastels
06	Aurora / Mesh Gradient	Slow-moving breathing blobs, floating glass overlays
07	Retro-Futurism / Cyberpunk	Aggressive neon, CRT scanlines, HUD elements, glitch effects
08	3D Hyperrealism	Realistic textures, cinematic lighting, physics-based motion
09	Vibrant Block / Maximalist	Solid clashing RGB blocks, thick borders, snap hover effects
10	Dark OLED Luxury	Absolute black + Gold accents, spotlight cursor, gold foil gradients
11	Organic / Biomorphic	"Living Earth" palette, morphing blobs, wavy dividers

Installation (Claude Code Plugin)

Install as a Claude Code plugin to get the frontend-design-pro skill:

bash

# Add marketplace from GitHub
/plugin marketplace add claudekit/frontend-design-pro-demo

# Install the plugin
/plugin install frontend-design-pro

# Or from local directory
/plugin install /path/to/frontend-design-pro-demo

Once installed, Claude will automatically use the skill when building frontend interfaces.

Plugin Structure

code

frontend-design-pro-demo/
├── .claude-plugin/
│   └── plugin.json     # Plugin metadata
└── skills/
    └── frontend-design-pro/
        └── SKILL.md    # Skill definition

Usage

Example prompt:

markdown

use frontend-design-pro to create a frontend interface for <project-name> with <aesthetic-direction> style.

That's it!

Project Structure

code

frontend-design-pro-demo/
├── .claude-plugin/     # Claude Code plugin config
├── skills/             # Plugin skills
├── demos-v01/          # Version 1 demos
├── demos-v02/          # Version 2 demos (latest)
│   ├── index.html      # Main showcase page
│   ├── 01-minimalism-swiss.html
│   ├── 02-neumorphism.html
│   ├── 03-glassmorphism.html
│   ├── 04-brutalism.html
│   ├── 05-claymorphism.html
│   ├── 06-aurora-mesh-gradient.html
│   ├── 07-retro-futurism-cyberpunk.html
│   ├── 08-3d-hyperrealism.html
│   ├── 09-vibrant-block-maximalist.html
│   ├── 10-dark-oled-luxury.html
│   ├── 11-organic-biomorphic.html
│   └── screenshots/    # Preview images
└── README.md

Features

•Pure HTML/CSS implementations (no frameworks required)
•Master prompts for each aesthetic direction
•Color palettes and signature effects
•Responsive design
•Production-ready code

Usage

Each demo includes a "Master Prompt" section that describes the key characteristics and techniques used. Use these prompts as a reference when creating your own designs in that aesthetic style.

License

MIT

Credit

Powered by [ClaudeKit](https://claudekit.cc)

I've been spending 7+ months to dig into every aspect of Claude Code so you don't have to.

![ClaudeKit Agent Skills](https://claudekit.cc)

I've basically been sharing everything I learned about Claude Code on this Substack: https://faafospecialist.substack.com/

So if you find this collection useful, please consider supporting my product at ClaudeKit.cc.

Thanks so much! 🥰 [Duy /zuey/](https://x.com/goon_nguyen)

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/frontend-design-pro.md https://raw.githubusercontent.com/claudekit/frontend-design-pro-demo/main/SKILL.md

Invoke in Claude Code

/frontend-design-pro

View source on GitHub

frontenddesign

Frequently Asked Questions

What is frontend-design-pro?

How to install frontend-design-pro?

To install frontend-design-pro, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /frontend-design-pro.

What is frontend-design-pro best for?

frontend-design-pro is a community categorized under General. It is designed for: frontend, design. Created by ClaudeKit.