frontend-ui-dark-ts
다크 테마 React UI 구축
대시보드 및 관리자 패널을 위한 다크 테마, 글래스모피즘 효과, 부드러운 Framer Motion 애니메이션을 갖춘 현대적인 React 애플리케이션을 제작합니다.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-ui-dark-ts". 브랜드 퍼플 배경을 가진 다크 테마 버튼 컴포넌트 제작
النتيجة المتوقعة:
bg-brand 와 hover:bg-brand-hover, 적절한 포커스 링 스타일, 터치 친화적 크기를 사용한 버튼 컴포넌트
استخدام "frontend-ui-dark-ts". 글래스모피즘 패널 효과를 가진 사이드바 구축
النتيجة المتوقعة:
backdrop-blur-lg, 다크 배경, 미묘한 보더 스타일링을 갖춘 glass-panel 클래스를 사용한 사이드바
استخدام "frontend-ui-dark-ts". 모달 컴포넌트에 fade-in 애니메이션 추가
النتيجة المتوقعة:
초기 opacity 0, opacity 1 로 애니메이션, Framer Motion 을 사용한 0.3s easeOut 전환을 갖춘 모달
التدقيق الأمني
آمنStatic analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
عوامل الخطر
⚡ يحتوي على سكربتات (1)
⚙️ الأوامر الخارجية (53)
🌐 الوصول إلى الشبكة (3)
📁 الوصول إلى نظام الملفات (4)
درجة الجودة
ماذا يمكنك بناءه
다크 모드 관리자 대시보드 구축
사이드바 내비게이션, 데이터 테이블, 상태 표시기를 갖춘 전문 관리자 패널을 다크 테마 패턴으로 제작합니다.
데이터 시각화 인터페이스 설계
글래스모피즘 카드, 부드러운 전환, 데이터 시각화를 위한 커스텀 컬러 토큰을 포함한 데이터 중심 대시보드를 구축합니다.
현대적인 랜딩 페이지 구현
애니메이션 섹션, 글래스 오버레이 모달, 정제된 마이크로 인터랙션을 갖춘 세련된 랜딩 페이지를 제작합니다.
جرّب هذه الموجهات
frontend-ui-dark-ts 스킬을 사용하여 Tailwind CSS 다크 테마 설정을 갖춘 새 React 프로젝트를 설정합니다. 커스텀 브랜드 색상, 중립적 배경, 텍스트 색상 토큰을 포함합니다.
frontend-ui-dark-ts 패턴을 사용하여 글래스모피즘 카드 컴포넌트를 제작합니다. 배경 블러, 미묘한 보더, 적절한 다크 테마 색상을 포함합니다.
Framer Motion 을 사용하여 부드러운 페이지 전환을 구현합니다. 라우트 변경을 위해 frontend-ui-dark-ts 스킬의 fade-in 및 slide-up variants 를 사용합니다.
앱 셸, 사이드바 네비게이션, 페이지 헤더, 반응형 글래스 카드를 갖춘 완전한 대시보드 레이아웃을 구축합니다. 상태 배지와 데이터 시각화 색상 토큰을 포함합니다.
أفضل الممارسات
- 유지보수를 위해 하드코딩된 색상 대신 시맨틱 컬러 토큰 (text-primary, text-secondary) 사용
- 글래스 효과는 신중하게 적용 - 과도한 사용은 가독성과 성능을 저하시킬 수 있음
- 실제 기기에서 애니메이션 테스트 - 모션 축소 환경설정이 존중되어야 함
تجنب
- 순수 검정 배경 사용 금지 - 적절한 대비 비율을 가진 neutral-bg 색상 사용
- 모든 요소에 글래스 효과 적용 금지 - 상향 조정된 표면 및 오버레이용으로 제한
- 페이지 로딩이나 인터랙션 응답성에 영향을 주는 과도한 애니메이션 복잡성 금지