Skip to main content الرئيسية المنشئون beko2210 firstbrain frontend-ui-dark-ts
frontend-ui-dark-ts A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill frontend-ui-dark-tsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... name frontend-ui-dark-ts description A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations. type skill created 2026-02-27T00:00:00.000Z domain software-development category frontend risk unknown source community tags ["skill","software-development","frontend","dark"]
Frontend UI Dark Theme (TypeScript)
A modern dark-themed React UI system using Tailwind CSS and Framer Motion . Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.
Stack
Package Version Purpose react^18.x UI framework react-dom^18.x DOM rendering react-router-dom^6.x Routing framer-motion^11.x Animations clsx^2.x Class merging tailwindcss^3.x Styling vite^5.x Build tool typescript^5.x Type safety
Quick Start
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install framer-motion clsx react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Project Structure
public/
├── favicon.ico # Classic favicon (32x32)
├── favicon.svg # Modern SVG favicon
├── apple-touch-icon.png # iOS home screen (180x180)
├── og-image.png # Social sharing image (1200x630)
└── site.webmanifest # PWA manifest
src/
├── assets/
│ └── fonts/
│ ├── Segoe UI.ttf
│ ├── Segoe UI Bold.ttf
│ ├── Segoe UI Italic.ttf
│ └── Segoe UI Bold Italic.ttf
├── components/
│ ├── ui/
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── Input.tsx
│ │ ├── Badge.tsx
│ │ ├── Dialog.tsx
│ │ ├── Tabs.tsx
│ │ └── index.ts
│ └── layout/
│ ├── AppShell.tsx
│ ├── Sidebar.tsx
│ └── PageHeader.tsx
├── styles/
│ └── globals.css
├── App.tsx
└── main.tsx
Configuration
index.html
The HTML entry point with mobile viewport, favicons, and social meta tags:
<!DOCTYPE html >
<
html
lang
"en"
<head >
<meta charset ="UTF-8" />
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<link rel ="icon" href ="/favicon.ico" sizes ="32x32" />
<link rel ="icon" href ="/favicon.svg" type ="image/svg+xml" />
<link rel ="apple-touch-icon" href ="/apple-touch-icon.png" />
<link rel ="manifest" href ="/site.webmanifest" />
<meta name ="theme-color" content ="#18181B" />
<meta property ="og:type" content ="website" />
<meta property ="og:title" content ="App Name" />
<meta property ="og:description" content ="App description" />
<meta property ="og:image" content ="https://example.com/og-image.png" />
<meta property ="og:url" content ="https://example.com" />
<meta name ="twitter:card" content ="summary_large_image" />
<meta name ="twitter:title" content ="App Name" />
<meta name ="twitter:description" content ="App description" />
<meta name ="twitter:image" content ="https://example.com/og-image.png" />
<title >
</title >
</head >
<body >
<div id ="root" >
</div >
<script type ="module" src ="/src/main.tsx" >
</script >
</body >
</html >
public/site.webmanifest PWA manifest for installable web apps:
{
"name" : "App Name" ,
"short_name" : "App" ,
"icons" : [
{ "src" : "/favicon.ico" , "sizes" : "32x32" , "type" : "image/x-icon" } ,
{ "src" : "/apple-touch-icon.png" , "sizes" : "180x180" , "type" : "image/png" }
] ,
"theme_color" : "#18181B" ,
"background_color" : "#18181B" ,
"display" : "standalone"
}
tailwind.config.js
export default {
content : ['./index.html' , './src/**/*.{js,ts,jsx,tsx}' ],
theme : {
extend : {
fontFamily : {
sans : ['Segoe UI' , 'system-ui' , 'sans-serif' ],
},
colors : {
brand : {
DEFAULT : '#8251EE' ,
hover : '#9366F5' ,
light : '#A37EF5' ,
subtle : 'rgba(130, 81, 238, 0.15)' ,
},
neutral : {
bg1 : 'hsl(240, 6%, 10%)' ,
bg2 : 'hsl(240, 5%, 12%)' ,
bg3 : 'hsl(240, 5%, 14%)' ,
bg4 : 'hsl(240, 4%, 18%)' ,
bg5 : 'hsl(240, 4%, 22%)' ,
bg6 : 'hsl(240, 4%, 26%)' ,
},
text : {
primary : '#FFFFFF' ,
secondary : '#A1A1AA' ,
muted : '#71717A' ,
},
border : {
subtle : 'hsla(0, 0%, 100%, 0.08)' ,
DEFAULT : 'hsla(0, 0%, 100%, 0.12)' ,
strong : 'hsla(0, 0%, 100%, 0.20)' ,
},
status : {
success : '#10B981' ,
warning : '#F59E0B' ,
error : '#EF4444' ,
info : '#3B82F6' ,
},
dataviz : {
purple : '#8251EE' ,
blue : '#3B82F6' ,
green : '#10B981' ,
yellow : '#F59E0B' ,
red : '#EF4444' ,
pink : '#EC4899' ,
cyan : '#06B6D4' ,
},
},
borderRadius : {
DEFAULT : '0.5rem' ,
lg : '0.75rem' ,
xl : '1rem' ,
},
boxShadow : {
glow : '0 0 20px rgba(130, 81, 238, 0.3)' ,
'glow-lg' : '0 0 40px rgba(130, 81, 238, 0.4)' ,
},
backdropBlur : {
xs : '2px' ,
},
animation : {
'fade-in' : 'fadeIn 0.3s ease-out' ,
'slide-up' : 'slideUp 0.3s ease-out' ,
'slide-down' : 'slideDown 0.3s ease-out' ,
},
keyframes : {
fadeIn : {
'0%' : { opacity : '0' },
'100%' : { opacity : '1' },
},
slideUp : {
'0%' : { opacity : '0' , transform : 'translateY(10px)' },
'100%' : { opacity : '1' , transform : 'translateY(0)' },
},
slideDown : {
'0%' : { opacity : '0' , transform : 'translateY(-10px)' },
'100%' : { opacity : '1' , transform : 'translateY(0)' },
},
},
spacing : {
'safe-top' : 'env(safe-area-inset-top)' ,
'safe-bottom' : 'env(safe-area-inset-bottom)' ,
'safe-left' : 'env(safe-area-inset-left)' ,
'safe-right' : 'env(safe-area-inset-right)' ,
},
minHeight : {
'touch' : '44px' ,
},
minWidth : {
'touch' : '44px' ,
},
},
},
plugins : [],
};
postcss.config.js export default {
plugins : {
tailwindcss : {},
autoprefixer : {},
},
};
src/styles/globals.css @tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family : 'Segoe UI' ;
src : url ('../assets/fonts/Segoe UI.ttf' ) format ('truetype' );
font-weight : 400 ;
font-style : normal;
font-display : swap;
}
@font-face {
font-family : 'Segoe UI' ;
src : url ('../assets/fonts/Segoe UI Bold.ttf' ) format ('truetype' );
font-weight : 700 ;
font-style : normal;
font-display : swap;
}
@font-face {
font-family : 'Segoe UI' ;
src : url ('../assets/fonts/Segoe UI Italic.ttf' ) format ('truetype' );
font-weight : 400 ;
font-style : italic;
font-display : swap;
}
@font-face {
font-family : 'Segoe UI' ;
src : url ('../assets/fonts/Segoe UI Bold Italic.ttf' ) format ('truetype' );
font-weight : 700 ;
font-style : italic;
font-display : swap;
}
:root {
--color-brand : #8251EE ;
--color-brand-hover : #9366F5 ;
--color-brand-light : #A37EF5 ;
--color-brand-subtle : rgba (130 , 81 , 238 , 0.15 );
--color-bg-1 : hsl (240 , 6% , 10% );
--color-bg-2 : hsl (240 , 5% , 12% );
--color-bg-3 : hsl (240 , 5% , 14% );
--color-bg-4 : hsl (240 , 4% , 18% );
--color-bg-5 : hsl (240 , 4% , 22% );
--color-bg-6 : hsl (240 , 4% , 26% );
--color-text-primary : #FFFFFF ;
--color-text-secondary : #A1A1AA ;
--color-text-muted : #71717A ;
--color-border-subtle : hsla (0 , 0% , 100% , 0.08 );
--color-border-default : hsla (0 , 0% , 100% , 0.12 );
--color-border-strong : hsla (0 , 0% , 100% , 0.20 );
--color-success : #10B981 ;
--color-warning : #F59E0B ;
--color-error : #EF4444 ;
--color-info : #3B82F6 ;
--spacing-xs : 0.25rem ;
--spacing-sm : 0.5rem ;
--spacing-md : 1rem ;
--spacing-lg : 1.5rem ;
--spacing-xl : 2rem ;
--spacing-2xl : 3rem ;
--radius-sm : 0.375rem ;
--radius-md : 0.5rem ;
--radius-lg : 0.75rem ;
--radius-xl : 1rem ;
--transition-fast : 150ms ease;
--transition-normal : 200ms ease;
--transition-slow : 300ms ease;
}
html {
color-scheme : dark;
}
body {
@apply bg-neutral-bg1 text-text-primary font-sans antialiased;
min-height : 100vh ;
}
*:focus-visible {
@apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-neutral-bg1;
}
::-webkit-scrollbar {
width : 8px ;
height : 8px ;
}
::-webkit-scrollbar-track {
@apply bg-neutral-bg2;
}
::-webkit-scrollbar-thumb {
@apply bg-neutral-bg5 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-neutral-bg6;
}
@layer components {
.glass {
@apply backdrop-blur-md bg-white/5 border border-white/10 ;
}
.glass-card {
@apply backdrop-blur-md bg-white/5 border border-white/10 rounded-xl;
}
.glass-panel {
@apply backdrop-blur-lg bg-black/40 border border-white/5 ;
}
.glass-overlay {
@apply backdrop-blur-sm bg-black/60 ;
}
.glass-input {
@apply backdrop-blur-sm bg-white/5 border border-white/10 focus :border-brand focus :bg-white/10 ;
}
}
@layer utilities {
.animate-in {
animation : fadeIn 0.3s ease-out, slideUp 0.3s ease-out;
}
}
src/main.tsx import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import { BrowserRouter } from 'react-router-dom' ;
import App from './App' ;
import './styles/globals.css' ;
ReactDOM .createRoot (document .getElementById ('root' )!).render (
<React.StrictMode >
<BrowserRouter >
<App />
</BrowserRouter >
</React.StrictMode >
src/App.tsx import { Routes , Route } from 'react-router-dom' ;
import { AnimatePresence } from 'framer-motion' ;
import { AppShell } from './components/layout/AppShell' ;
import { Dashboard } from './pages/Dashboard' ;
import { Settings } from './pages/Settings' ;
export default function App (return (
<AppShell >
<AnimatePresence mode ="wait" >
<Routes >
<Route path ="/" element ={ <Dashboard /> } />
<Route path ="/settings" element ={ <Settings /> } />
</Routes >
</AnimatePresence >
</AppShell >
Animation Patterns
Framer Motion Variants
export const fadeIn = {
initial : { opacity : 0 },
animate : { opacity : 1 },
exit : { opacity : 0 },
transition : { duration : 0.2 },
};
export const slideUp = {
initial : { opacity : 0 , y : 20 },
animate : { opacity : 1 , y : 0 },
exit : { opacity : 0 , y : 20 },
transition : { duration : 0.3 , ease : 'easeOut' },
};
export const scaleOnHover = {
whileHover : { scale : 1.02 },
whileTap : { scale : 0.98 },
transition : { type : 'spring' , stiffness : 400 , damping : 17 },
};
export const staggerContainer = {
hidden : { opacity : 0 },
visible : {
opacity : 1 ,
transition : {
staggerChildren : 0.05 ,
delayChildren : 0.1 ,
},
},
};
export const staggerItem = {
hidden : { opacity : 0 , y : 10 },
visible : {
opacity : 1 ,
y : 0 ,
transition : { duration : 0.2 , ease : 'easeOut' },
},
};
Page Transition Wrapper import { motion } from 'framer-motion' ;
import { ReactNode } from 'react' ;
interface PageTransitionProps {
children : ReactNode ;
}
export function PageTransition ({ children }: PageTransitionProps ) {
return (
<motion.div
initial ={{ opacity: 0 , y: 20 }}
animate ={{ opacity: 1 , y: 0 }}
exit ={{ opacity: 0 , y: -20 }}
transition ={{ duration: 0.3 , ease: 'easeOut ' }}
>
{children}
</motion.div >
Glass Effect Patterns
Glass Card <div className="glass-card p-6" >
<h2 className ="text-lg font-semibold text-text-primary" > Card Title</h2 > <p className ="text-text-secondary mt-2" > Card content goes here.</p >
Glass Panel (Sidebar) <aside className="glass-panel w-64 h-screen p-4" >
<nav className ="space-y-2" >
{/* Navigation items */}
</nav >
Glass Modal Overlay <motion.div
className="fixed inset-0 glass-overlay flex items-center justify-center z-50"
initial={{ opacity : 0 }}
animate={{ opacity : 1 }}
exit={{ opacity : 0 }}
>
<motion.div
className ="glass-card p-6 max-w-md w-full mx-4"
initial ={{ scale: 0.95 , opacity: 0 }}
animate ={{ scale: 1 , opacity: 1 }}
exit ={{ scale: 0.95 , opacity: 0 }}
>
{/* Modal content */}
</motion.div > div >
Typography Element Classes Page title text-2xl font-semibold text-text-primarySection title text-lg font-semibold text-text-primaryCard title text-base font-medium text-text-primaryBody text text-sm text-text-secondaryCaption text-xs text-text-mutedLabel text-sm font-medium text-text-secondary
Color Usage Use Case Color Class Primary action Brand purple bg-brand text-whitePrimary hover Brand hover hover:bg-brand-hoverPage background Neutral bg1 bg-neutral-bg1Card background Neutral bg2 bg-neutral-bg2Elevated surface Neutral bg3 bg-neutral-bg3Input background Neutral bg2 bg-neutral-bg2Input focus Neutral bg3 focus:bg-neutral-bg3Border default Border default border-borderBorder subtle Border subtle border-border-subtleSuccess Status success text-status-successWarning Status warning text-status-warningError Status error text-status-error
Related Files
Design Tokens — Complete color system, spacing, typography scales
Components — Button, Card, Input, Dialog, Tabs, and more
Patterns — Page layouts, navigation, lists, forms
When to Use This skill is applicable to execute the workflow or actions described in the overview.
Connections
Domain: [[Software Entwicklung]]Kategorie: [[Frontend Entwicklung]]Navigation: [[Skills Uebersicht]], [[Home]] 