styling

Stars0

Forks0

UpdatedDecember 21, 2025 at 12:03

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

jhlee0409

jhlee0409/sidedish

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

2 files

SKILL.md

readonly

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

Use Tailwind CSS classes (no inline styles)
Follow SideDish design system colors
Use large border radius (rounded-xl, rounded-2xl)
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.

More from this repository

same repository

custom-hook

jhlee0409/sidedish

Creates custom React hooks for SideDish. Use when the user asks to create a new hook, extract shared logic into a hook, or refactor component logic into reusable hooks. Includes TypeScript interfaces, memoization patterns, and index.ts export.

2025-12-250

api-architecture

jhlee0409/sidedish

API 아키텍처 설계 원칙과 패턴을 적용합니다. RESTful API 설계, 버저닝, 응답 표준화, 미들웨어 패턴 구현 시 사용하세요. Next.js App Router 기반 서버리스 아키텍처에 최적화되어 있습니다.

2025-12-210

api-endpoint

jhlee0409/sidedish

Creates Next.js API routes with Firebase. Use when adding GET/POST/PATCH/DELETE endpoints, implementing pagination, adding auth checks, or handling file uploads. Includes route templates and error handling.

2025-12-210

create-component

jhlee0409/sidedish

Creates React components for SideDish. Use when adding new UI components, modals, forms, or interactive elements. Includes TypeScript interfaces, styling patterns, and security considerations.

2025-12-210

data-modeling

jhlee0409/sidedish

Firestore 데이터 모델링과 스키마 설계 패턴을 적용합니다. 새 컬렉션 추가, 관계 설계, 인덱스 최적화, 데이터 마이그레이션 시 사용하세요. NoSQL 특성에 맞는 비정규화 전략을 포함합니다.

2025-12-210

debugging

jhlee0409/sidedish

Debugs common issues in SideDish. Use when fixing errors, investigating bugs, troubleshooting API failures, or resolving build issues. Includes common error patterns, logging strategies, and debugging tools.

2025-12-210

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

Use Tailwind CSS classes (no inline styles)
Follow SideDish design system colors
Use large border radius (rounded-xl, rounded-2xl)
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.