When should I use frontend-design?

frontend-design is useful in the following scenarios: • Developing responsive Angular components using a unified SCSS design system to ensure consistent branding across multiple platforms. • Implementing advanced UI effects such as glassmorphism, neon glows, and backdrop filters for premium, high-end web applications. • Creating mobile-first layouts with optimized touch targets and adaptive grid systems for seamless cross-device user experiences. • Maintaining visual and functional parity between different frontend environments, such as admin dashboards and customer-facing interfaces, using shared design tokens.

frontend-design

from psh-inc

Angular UI components with Material Design, SCSS design system, and responsive layouts.Use when: Creating new UI components, styling pages, implementing responsive layouts, adding animations, or maintaining visual consistency across admin/customer frontends.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026⬇️3downloads

When & Why to Use This Skill

This Claude skill facilitates the rapid development of high-quality Angular UI components by integrating Material Design principles with a custom SCSS design system. It specializes in creating responsive, mobile-first layouts and sophisticated visual styles like glassmorphism, ensuring brand consistency and technical excellence across complex frontend architectures.

Use Cases

Developing responsive Angular components using a unified SCSS design system to ensure consistent branding across multiple platforms.
Implementing advanced UI effects such as glassmorphism, neon glows, and backdrop filters for premium, high-end web applications.
Creating mobile-first layouts with optimized touch targets and adaptive grid systems for seamless cross-device user experiences.
Maintaining visual and functional parity between different frontend environments, such as admin dashboards and customer-facing interfaces, using shared design tokens.

name	frontend-design
description	\|
Use when	Creating new UI components, styling pages, implementing responsive layouts, adding animations, or maintaining visual consistency across admin/customer frontends.
allowed-tools	Read, Edit, Write, Glob, Grep, Bash

name

frontend-design

description

Use when

Creating new UI components, styling pages, implementing responsive layouts, adding animations, or maintaining visual consistency across admin/customer frontends.

allowed-tools

Read, Edit, Write, Glob, Grep, Bash

Frontend-design Skill

This casino platform uses a dual-styling approach: Tailwind CSS for the admin frontend (casino-f/) and a custom SCSS design system for the customer frontend (casino-customer-f/). The customer frontend features a dark, premium casino aesthetic with glassmorphism effects, neon accents, and mobile-first responsive patterns.

Quick Start

Import Design System (Customer Frontend)

// Always import at the top of component styles
@import '../../../styles/design-system.scss';

.my-component {
  @include glassmorphism;
  background: $gradient-card;
  border-radius: $radius-lg;
  padding: $space-6;
  color: $color-text-primary;
}

Glass Button Pattern

.glass-button {
  @include button-base;
  background: $glass-background;
  backdrop-filter: blur(10px);
  border: 1px solid $glass-border;
  color: $color-text-primary;
  
  &:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
  }
}

Key Concepts

Concept	Usage	Example
Design tokens	SCSS variables for colors, spacing, typography	`$color-green`, `$space-4`
Glassmorphism	Semi-transparent backgrounds with blur	`@include glassmorphism`
Neon glow	Text shadow effects for emphasis	`@include neon-glow($color-neon-teal)`
Mobile-first	48px minimum touch targets, 16px font for iOS	`min-height: 44px`

Common Patterns

Card Component

When: Creating any content container (games, promotions, user info)

.feature-card {
  @include card-base;
  padding: $space-6;
  
  .card-title {
    @include heading-style;
    font-size: $text-xl;
    margin-bottom: $space-4;
  }
  
  .card-content {
    @include body-text;
  }
}

Responsive Grid

When: Displaying game lists, promotion grids

.game-grid {
  display: grid;
  gap: $space-4;
  grid-template-columns: repeat(2, 1fr);
  
  @media (min-width: $screen-md) {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @media (min-width: $screen-lg) {
    grid-template-columns: repeat(4, 1fr);
  }
}