Frontend Skills Plugin

Note: This project is for demonstrating Claude Skills with Claude Code.

A Claude Code plugin for creating distinctive, production-grade frontend UIs that avoid generic "AI slop" aesthetics. This Skill and Subagent is generated with referring Anthropic blog: Improving frontend design through Skills

Features

• Distinctive typography - Effective serif × sans-serif pairings
• Custom color palettes - Beyond default Tailwind colors
• Asymmetric layouts - 35/65 ratios, overlapping elements
• Purposeful animations - Focused on high-impact moments

Demo

• Left: With Skills
• Right: Without Skills

Prompt:

Result:

Installation

Execute following /plugin slash commands in Claude Code.

# Add marketplace
/plugin marketplace add oikon48/cc-frontend-skills

# Install plugin
/plugin install frontend-skills@cc-frontend-skills

Usage

Simply make frontend-related requests and the design skill will be applied automatically:

Build me a flight lookup nextjs web app where the user can put in a flight number and the app gives you the start time, end time, time zones, start location, and end location of the flight. For now, use a mock API that returns a list of matching flights. Display the search results under the form input. use @frontend-design-system-implementor , ultrathink

This prompt is taken from the demo of Google Antigravity (Youtube Link)

Theme Examples

1. Nordic Minimal - Scandinavian warmth and serenity
2. Neon Brutalism - Cyberpunk × brutalist fusion
3. Organic Growth - Natural, organic shapes
4. Tech Noir - Dark-mode first tech aesthetic
5. Editorial Elegance - Magazine-inspired editorial design

Resources

• SKILL.md - Design guidelines
• themes.md - Theme implementations
• components.md - Component patterns

Contributing

Issues and pull requests are welcome! Feel free to contribute to this project.

Author

@oikon48

License

MIT

{
  "name": "cc-frontend-skills",
  "owner": {
    "name": "oikon48",
    "url": "https://github.com/oikon48"
  },
  "plugins": [
    {
      "name": "frontend-skills",
      "source": "./",
      "description": "Distinctive frontend design skills and agents for professional UI implementation",
      "version": "1.0.0",
      "license": "MIT",
      "keywords": [
        "frontend",
        "ui",
        "design-system",
        "tailwind",
        "react"
      ]
    }
  ]
}