Claude Code Plugins

Community-maintained marketplace

Feedback

styling

@jhlee0409/sidedish
0
0

Styles components using Tailwind CSS 4 and SideDish design system. Use when adding styles, buttons, forms, cards, animations, or responsive layouts. Includes color palette, spacing, and glassmorphism patterns.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name styling
description Styles components using Tailwind CSS 4 and SideDish design system. Use when adding styles, buttons, forms, cards, animations, or responsive layouts. Includes color palette, spacing, and glassmorphism patterns.

Styling Skill

Instructions

  1. Use Tailwind CSS classes (no inline styles)
  2. Follow SideDish design system colors
  3. Use large border radius (rounded-xl, rounded-2xl)
  4. Apply glassmorphism for cards (bg-white/70 backdrop-blur-xl)

Design System

Colors

  • Primary: indigo-600, indigo-700
  • Accent: orange-500, orange-600
  • Text: slate-900 (heading), slate-600 (body)
  • Background: slate-50

Button Variants

// Primary
className="bg-indigo-600 text-white hover:bg-indigo-700 px-5 py-2.5 rounded-xl"

// Accent (CTA)
className="bg-orange-500 text-white hover:bg-orange-600 px-5 py-2.5 rounded-xl"

// Outline
className="border border-slate-200 text-slate-700 hover:bg-slate-50 px-5 py-2.5 rounded-xl"

Glassmorphism Card

<div className="bg-white/70 backdrop-blur-xl border border-white/50 rounded-2xl p-6 shadow-xl">

For complete component styles, animations, and responsive patterns, see reference.md.