web-ui-design-guide
Web UI Design Guide
Overview
Ensure every web UI component built looks modern and professional by applying systematic design principles. This skill provides comprehensive guidelines for color, spacing, typography, and component-specific patterns to achieve clean, minimal, and consistent user interfaces.
When to Use This Skill
Activate this skill when:
- Building any web UI component (buttons, forms, cards, navigation, modals, etc.)
- Creating layouts or page designs
- Implementing design systems or component libraries
- Working with UI frameworks (React, Vue, Next.js, shadcn/ui, etc.)
- Receiving requests like:
- "Create a login form"
- "Design a dashboard card"
- "Build a navigation header"
- "Make this UI look modern"
- "Style this component"
More from muheun/claude-code-marketplace
android-ui-design-guide
Apply Android/Jetpack Compose design principles following Material Design 3 when building any Android UI component. Only execute this when the current project is an Android project and involves UI-related work. Use this skill for Compose layouts, Material components, or Android app development. Ensures Material You compliance with Dynamic Color, expressive theming, 4dp grid spacing, Roboto typography with Type Scale, and native Android patterns. Prevents common anti-patterns like hardcoded colors, Dark Mode neglect, and touch target violations.
20flutter-ui-design-guide
Apply Flutter design principles with Material Design and Cupertino (iOS-style) support when building cross-platform UI. Only execute this when the current project is a Flutter project and involves UI-related work. Use this skill for Flutter widgets, Dart layouts, or cross-platform app development. Ensures Material Design compliance (Android) and Cupertino guidelines (iOS), 8dp grid spacing, Material TextTheme, Theme-based colors with dark mode, and adaptive widgets. Prevents common anti-patterns like hardcoded colors, fixed text sizes, and excessive widget nesting.
5ios-ui-design-guide
Apply iOS/SwiftUI design principles following Apple Human Interface Guidelines when building any iOS UI component. Only execute this when the current project is an iOS project and involves UI-related work. Use this skill for SwiftUI views, UIKit components, or iOS app development. Ensures HIG compliance with Clarity, Deference, and Depth principles, system colors with Dark Mode support, 8pt grid spacing, SF Pro typography with Dynamic Type, and native iOS interaction patterns. Prevents common anti-patterns like fixed text sizes, Dark Mode neglect, and Safe Area violations.
5smart-git-commit
Execute git commit operations when user requests to commit or push code changes. Use this skill to generate recommended commit messages, perform local commits, or push to remote repositories. Auto-activates for Korean keywords ("커밋", "푸시") and English keywords ("commit", "push"). Always uses Bash tool for git operations and Claude's natural language processing for message generation.
3smart-linear-issue
Linear 이슈 생성/수정/코멘트 기능을 제공하는 스킬. 한글 키워드 ("이슈 생성", "이슈 수정", "코멘트 추가") 및 영문 키워드 ("create issue", "update issue", "add comment")로 자동 활성화. Gitmoji 기반 한글 제목과 사용자 승인 필수 워크플로우로 일관된 이슈 관리를 지원합니다.
3