What is the Pupun Korvat styling skill?

It is a specialized design system extension for Claude Code tailored for an artisan jewelry brand, featuring specific CSS configurations, UI components, and brand guidelines.

Does it include localization support?

Yes, it includes specific Finnish language UI patterns and common translations for essential e-commerce elements like 'Tutustu' (Explore) and 'Käsintehty' (Handmade).

Can I use this for non-jewelry websites?

While designed for a specific jewelry brand, the elegant patterns and Framer Motion guidelines are highly applicable to any high-end artisan, boutique, or luxury e-commerce project.

Does this skill support Tailwind CSS?

Yes, it provides specific Tailwind classes and configuration variables for a luxury color palette including Rose Gold, Champagne, and Charcoal.

Pupun Korvat Design & Styling

Name: Pupun Korvat Design & Styling
Author: Nikojuu

byNikojuu

•

Design Tools

Implements a sophisticated artisan jewelry design system with specialized CSS patterns, Finnish localization, and luxury brand elements.

This skill serves as the comprehensive visual identity and styling guide for Pupun Korvat, a Finnish handmade jewelry brand. It provides Claude with specific CSS variables, Tailwind configurations, and React component patterns designed to evoke an elegant, artisan feel. By codifying brand-specific elements like rose-gold gradients, diamond-shaped motifs, and signature corner accents, the skill ensures visual consistency across the entire e-commerce platform while integrating smooth Framer Motion animations and localized Finnish UI text patterns.

Key Features

01Standardized component patterns for high-end e-commerce product cards and buttons

02Signature decorative elements including diamond-shape clip-paths and corner framing

03Localized Finnish language UI patterns for common e-commerce calls to action

04Comprehensive color palette with custom Tailwind CSS variables for luxury branding

051 GitHub stars

06Pre-configured Framer Motion animation guidelines for scroll-triggered and floating effects

Use Cases

01Standardizing responsive layout patterns and typography across a Finnish web shop

02Developing a consistent frontend for an artisan jewelry or luxury e-commerce site

03Implementing complex CSS gradients and shimmer effects for premium brand feel

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nikojuu/testi-kauppa pupun-korvat-styling

For use in Claude.ai and ChatGPT

Key Features

01Standardized component patterns for high-end e-commerce product cards and buttons

02Signature decorative elements including diamond-shape clip-paths and corner framing

03Localized Finnish language UI patterns for common e-commerce calls to action

04Comprehensive color palette with custom Tailwind CSS variables for luxury branding

051 GitHub stars

06Pre-configured Framer Motion animation guidelines for scroll-triggered and floating effects

Use Cases

01Standardizing responsive layout patterns and typography across a Finnish web shop

02Developing a consistent frontend for an artisan jewelry or luxury e-commerce site

03Implementing complex CSS gradients and shimmer effects for premium brand feel