App Name

{"id":"0148d70a-e670-45cb-aae7-566a31a05fde","shortId":"346DGA","kind":"skill","title":"frontend-ui-dark-ts","tagline":"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.","description":"# Frontend UI Dark Theme (TypeScript)\n\nA 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.\n\n## Stack\n\n| Package | Version | Purpose |\n|---------|---------|---------|\n| `react` | ^18.x | UI framework |\n| `react-dom` | ^18.x | DOM rendering |\n| `react-router-dom` | ^6.x | Routing |\n| `framer-motion` | ^11.x | Animations |\n| `clsx` | ^2.x | Class merging |\n| `tailwindcss` | ^3.x | Styling |\n| `vite` | ^5.x | Build tool |\n| `typescript` | ^5.x | Type safety |\n\n## Quick Start\n\n```bash\nnpm create vite@latest my-app -- --template react-ts\ncd my-app\nnpm install framer-motion clsx react-router-dom\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n## Project Structure\n\n```\npublic/\n├── favicon.ico # Classic favicon (32x32)\n├── favicon.svg # Modern SVG favicon\n├── apple-touch-icon.png # iOS home screen (180x180)\n├── og-image.png # Social sharing image (1200x630)\n└── site.webmanifest # PWA manifest\nsrc/\n├── assets/\n│ └── fonts/\n│ ├── Segoe UI.ttf\n│ ├── Segoe UI Bold.ttf\n│ ├── Segoe UI Italic.ttf\n│ └── Segoe UI Bold Italic.ttf\n├── components/\n│ ├── ui/\n│ │ ├── Button.tsx\n│ │ ├── Card.tsx\n│ │ ├── Input.tsx\n│ │ ├── Badge.tsx\n│ │ ├── Dialog.tsx\n│ │ ├── Tabs.tsx\n│ │ └── index.ts\n│ └── layout/\n│ ├── AppShell.tsx\n│ ├── Sidebar.tsx\n│ └── PageHeader.tsx\n├── styles/\n│ └── globals.css\n├── App.tsx\n└── main.tsx\n```\n\n## Configuration\n\n### index.html\n\nThe HTML entry point with mobile viewport, favicons, and social meta tags:\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n App Name\n \n \n

\n \n \n\n```\n\n### public/site.webmanifest\n\nPWA manifest for installable web apps:\n\n```json\n{\n \"name\": \"App Name\",\n \"short_name\": \"App\",\n \"icons\": [\n { \"src\": \"/favicon.ico\", \"sizes\": \"32x32\", \"type\": \"image/x-icon\" },\n { \"src\": \"/apple-touch-icon.png\", \"sizes\": \"180x180\", \"type\": \"image/png\" }\n ],\n \"theme_color\": \"#18181B\",\n \"background_color\": \"#18181B\",\n \"display\": \"standalone\"\n}\n```\n\n### tailwind.config.js\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n fontFamily: {\n sans: ['Segoe UI', 'system-ui', 'sans-serif'],\n },\n colors: {\n brand: {\n DEFAULT: '#8251EE',\n hover: '#9366F5',\n light: '#A37EF5',\n subtle: 'rgba(130, 81, 238, 0.15)',\n },\n neutral: {\n bg1: 'hsl(240, 6%, 10%)',\n bg2: 'hsl(240, 5%, 12%)',\n bg3: 'hsl(240, 5%, 14%)',\n bg4: 'hsl(240, 4%, 18%)',\n bg5: 'hsl(240, 4%, 22%)',\n bg6: 'hsl(240, 4%, 26%)',\n },\n text: {\n primary: '#FFFFFF',\n secondary: '#A1A1AA',\n muted: '#71717A',\n },\n border: {\n subtle: 'hsla(0, 0%, 100%, 0.08)',\n DEFAULT: 'hsla(0, 0%, 100%, 0.12)',\n strong: 'hsla(0, 0%, 100%, 0.20)',\n },\n status: {\n success: '#10B981',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#3B82F6',\n },\n dataviz: {\n purple: '#8251EE',\n blue: '#3B82F6',\n green: '#10B981',\n yellow: '#F59E0B',\n red: '#EF4444',\n pink: '#EC4899',\n cyan: '#06B6D4',\n },\n },\n borderRadius: {\n DEFAULT: '0.5rem',\n lg: '0.75rem',\n xl: '1rem',\n },\n boxShadow: {\n glow: '0 0 20px rgba(130, 81, 238, 0.3)',\n 'glow-lg': '0 0 40px rgba(130, 81, 238, 0.4)',\n },\n backdropBlur: {\n xs: '2px',\n },\n animation: {\n 'fade-in': 'fadeIn 0.3s ease-out',\n 'slide-up': 'slideUp 0.3s ease-out',\n 'slide-down': 'slideDown 0.3s ease-out',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n slideUp: {\n '0%': { opacity: '0', transform: 'translateY(10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n slideDown: {\n '0%': { opacity: '0', transform: 'translateY(-10px)' },\n '100%': { opacity: '1', transform: 'translateY(0)' },\n },\n },\n // Mobile: safe area insets for notched devices\n spacing: {\n 'safe-top': 'env(safe-area-inset-top)',\n 'safe-bottom': 'env(safe-area-inset-bottom)',\n 'safe-left': 'env(safe-area-inset-left)',\n 'safe-right': 'env(safe-area-inset-right)',\n },\n // Mobile: minimum touch target sizes (44px per Apple/Google guidelines)\n minHeight: {\n 'touch': '44px',\n },\n minWidth: {\n 'touch': '44px',\n },\n },\n },\n plugins: [],\n};\n```\n\n### postcss.config.js\n\n```js\nexport default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n```\n\n### src/styles/globals.css\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* Font faces */\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI.ttf') format('truetype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI Bold.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI Italic.ttf') format('truetype');\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Segoe UI';\n src: url('../assets/fonts/Segoe UI Bold Italic.ttf') format('truetype');\n font-weight: 700;\n font-style: italic;\n font-display: swap;\n}\n\n/* CSS Custom Properties */\n:root {\n /* Brand colors */\n --color-brand: #8251EE;\n --color-brand-hover: #9366F5;\n --color-brand-light: #A37EF5;\n --color-brand-subtle: rgba(130, 81, 238, 0.15);\n\n /* Neutral backgrounds */\n --color-bg-1: hsl(240, 6%, 10%);\n --color-bg-2: hsl(240, 5%, 12%);\n --color-bg-3: hsl(240, 5%, 14%);\n --color-bg-4: hsl(240, 4%, 18%);\n --color-bg-5: hsl(240, 4%, 22%);\n --color-bg-6: hsl(240, 4%, 26%);\n\n /* Text colors */\n --color-text-primary: #FFFFFF;\n --color-text-secondary: #A1A1AA;\n --color-text-muted: #71717A;\n\n /* Border colors */\n --color-border-subtle: hsla(0, 0%, 100%, 0.08);\n --color-border-default: hsla(0, 0%, 100%, 0.12);\n --color-border-strong: hsla(0, 0%, 100%, 0.20);\n\n /* Status colors */\n --color-success: #10B981;\n --color-warning: #F59E0B;\n --color-error: #EF4444;\n --color-info: #3B82F6;\n\n /* Spacing */\n --spacing-xs: 0.25rem;\n --spacing-sm: 0.5rem;\n --spacing-md: 1rem;\n --spacing-lg: 1.5rem;\n --spacing-xl: 2rem;\n --spacing-2xl: 3rem;\n\n /* Border radius */\n --radius-sm: 0.375rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n\n /* Transitions */\n --transition-fast: 150ms ease;\n --transition-normal: 200ms ease;\n --transition-slow: 300ms ease;\n}\n\n/* Base styles */\nhtml {\n color-scheme: dark;\n}\n\nbody {\n @apply bg-neutral-bg1 text-text-primary font-sans antialiased;\n min-height: 100vh;\n}\n\n/* Focus styles */\n*:focus-visible {\n @apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-neutral-bg1;\n}\n\n/* Scrollbar styling */\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n::-webkit-scrollbar-track {\n @apply bg-neutral-bg2;\n}\n\n::-webkit-scrollbar-thumb {\n @apply bg-neutral-bg5 rounded-full;\n}\n\n::-webkit-scrollbar-thumb:hover {\n @apply bg-neutral-bg6;\n}\n\n/* Glass utility classes */\n@layer components {\n .glass {\n @apply backdrop-blur-md bg-white/5 border border-white/10;\n }\n\n .glass-card {\n @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-xl;\n }\n\n .glass-panel {\n @apply backdrop-blur-lg bg-black/40 border border-white/5;\n }\n\n .glass-overlay {\n @apply backdrop-blur-sm bg-black/60;\n }\n\n .glass-input {\n @apply backdrop-blur-sm bg-white/5 border border-white/10 focus:border-brand focus:bg-white/10;\n }\n}\n\n/* Animation utilities */\n@layer utilities {\n .animate-in {\n animation: fadeIn 0.3s ease-out, slideUp 0.3s ease-out;\n }\n}\n```\n\n### src/main.tsx\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\nimport './styles/globals.css';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n \n \n);\n```\n\n### src/App.tsx\n\n```tsx\nimport { Routes, Route } from 'react-router-dom';\nimport { AnimatePresence } from 'framer-motion';\nimport { AppShell } from './components/layout/AppShell';\nimport { Dashboard } from './pages/Dashboard';\nimport { Settings } from './pages/Settings';\n\nexport default function App() {\n return (\n \n \n \n } />\n } />\n \n \n \n );\n}\n```\n\n## Animation Patterns\n\n### Framer Motion Variants\n\n```tsx\n// Fade in on mount\nexport const fadeIn = {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.2 },\n};\n\n// Slide up on mount\nexport const slideUp = {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 20 },\n transition: { duration: 0.3, ease: 'easeOut' },\n};\n\n// Scale on hover (for buttons/cards)\nexport const scaleOnHover = {\n whileHover: { scale: 1.02 },\n whileTap: { scale: 0.98 },\n transition: { type: 'spring', stiffness: 400, damping: 17 },\n};\n\n// Stagger children\nexport const staggerContainer = {\n hidden: { opacity: 0 },\n visible: {\n opacity: 1,\n transition: {\n staggerChildren: 0.05,\n delayChildren: 0.1,\n },\n },\n};\n\nexport const staggerItem = {\n hidden: { opacity: 0, y: 10 },\n visible: {\n opacity: 1,\n y: 0,\n transition: { duration: 0.2, ease: 'easeOut' },\n },\n};\n```\n\n### Page Transition Wrapper\n\n```tsx\nimport { motion } from 'framer-motion';\nimport { ReactNode } from 'react';\n\ninterface PageTransitionProps {\n children: ReactNode;\n}\n\nexport function PageTransition({ children }: PageTransitionProps) {\n return (\n \n {children}\n \n );\n}\n```\n\n## Glass Effect Patterns\n\n### Glass Card\n\n```tsx\n

Card Title

Card content goes here.

\n```\n\n### Glass Panel (Sidebar)\n\n```tsx\n\n```\n\n### Glass Modal Overlay\n\n```tsx\n\n \n {/* Modal content */}\n \n\n```\n\n## Typography\n\n| Element | Classes |\n|---------|---------|\n| Page title | `text-2xl font-semibold text-text-primary` |\n| Section title | `text-lg font-semibold text-text-primary` |\n| Card title | `text-base font-medium text-text-primary` |\n| Body text | `text-sm text-text-secondary` |\n| Caption | `text-xs text-text-muted` |\n| Label | `text-sm font-medium text-text-secondary` |\n\n## Color Usage\n\n| Use Case | Color | Class |\n|----------|-------|-------|\n| Primary action | Brand purple | `bg-brand text-white` |\n| Primary hover | Brand hover | `hover:bg-brand-hover` |\n| Page background | Neutral bg1 | `bg-neutral-bg1` |\n| Card background | Neutral bg2 | `bg-neutral-bg2` |\n| Elevated surface | Neutral bg3 | `bg-neutral-bg3` |\n| Input background | Neutral bg2 | `bg-neutral-bg2` |\n| Input focus | Neutral bg3 | `focus:bg-neutral-bg3` |\n| Border default | Border default | `border-border` |\n| Border subtle | Border subtle | `border-border-subtle` |\n| Success | Status success | `text-status-success` |\n| Warning | Status warning | `text-status-warning` |\n| Error | Status error | `text-status-error` |\n\n## Related Files\n\n- Design Tokens — Complete color system, spacing, typography scales\n- Components — Button, Card, Input, Dialog, Tabs, and more\n- Patterns — Page layouts, navigation, lists, forms\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["frontend","dark","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-frontend-ui-dark-ts","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-ui-dark-ts","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34793 github stars · SKILL.md body (14,537 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T00:51:00.169Z","embedding":null,"createdAt":"2026-04-18T21:37:43.856Z","updatedAt":"2026-04-24T00:51:00.169Z","lastSeenAt":"2026-04-24T00:51:00.169Z","tsv":"'-0':1328 '-10':475 '-2':911 '-20':1295 '-4':1365 '-50':1340 '-6':1356 '/10':983,1000,1049,1058 '/40':1015 '/5':978,995,1020,1044 '/60':1032 '/app':1102 '/apple-touch-icon.png':252 '/assets/fonts/segoe':570,596,623,650 '/client':1091 '/components/layout/appshell':1128 '/favicon.ico':246 '/index.html':274 '/pages/dashboard':1132 '/pages/settings':1136 '/settings':1147 '/src':275 '/styles/globals.css':1104 '0':347,348,353,354,359,360,398,399,409,410,450,452,457,459,468,470,472,482,771,772,780,781,789,790,1164,1170,1183,1190,1193,1229,1243,1250,1283,1290,1293,1343,1349,1370,1380 '0.05':1235 '0.08':350,774 '0.1':1237 '0.12':356,783 '0.15':305,696 '0.2':1173,1253 '0.20':362,792 '0.25':815 '0.3':405,425,434,443,1068,1074,1198,1298 '0.375':844 '0.4':416 '0.5':389,820,849 '0.75':392,854 '0.95':1368,1378 '0.98':1214 '06b6d4':386 '1':455,465,479,702,1167,1188,1232,1248,1288,1346,1373,1375 '1.02':1211 '1.5':829 '10':311,706,1245 '100':349,355,361,453,463,477,773,782,791 '100vh':900 '10b981':365,378,798 '10px':462 '11':97 '12':316,714 '1200x630':177 '130':302,402,413,693 '14':321,722 '150ms':864 '17':1221 '18':76,83,326,730 '180x180':172,254 '18181b':259,262 '1rem':395,825,859 '2':101,710,918 '20':1185,1195,1285 '200ms':869 '20px':400 '22':331,738 '238':304,404,415,695 '240':309,314,319,324,329,334,704,712,720,728,736,744 '26':336,746 '2px':419 '2rem':834 '2xl':837,1390 '3':106,718 '300ms':874 '32x32':163,248 '3b82f6':371,376,810 '3rem':838 '4':325,330,335,726,729,737,745 '400':577,631,1219 '40px':411 '44px':532,538,541 '5':110,115,315,320,713,721,734 '6':91,310,705,742 '700':604,659 '71717a':343,763 '81':303,403,414,694 '8251ee':295,374,677 '8px':930,932 '9366f5':297,682 'a1a1aa':341,758 'a37ef5':299,687 'action':1457,1588 'admin':23,58 'anim':35,70,99,420,1059,1064,1066,1149,1165,1186,1286,1344,1371 'animate-in':1063 'animatepres':1120 'antialias':896 'app':128,136,228,236,239,243,1100,1140 'app.tsx':211 'apple-touch-icon.png':168 'apple/google':534 'appli':884,906,937,946,959,970,987,1007,1024,1036 'applic':29,64,1582 'appshel':1126 'appshell.tsx':206 'area':485,497,506,515,524 'ask':1626 'asset':182 'autoprefix':152,549 'backdrop':972,989,1009,1026,1038 'backdrop-blur-lg':1008 'backdrop-blur-md':971,988 'backdrop-blur-sm':1025,1037 'backdropblur':417 'background':260,698,1476,1484,1500 'badge.tsx':201 'base':553,876,1414 'bash':121 'bg':701,709,717,725,733,741,886,939,948,961,976,993,1013,1030,1042,1056,1461,1472,1480,1488,1496,1504,1513 'bg-black':1012,1029 'bg-brand':1460 'bg-brand-hov':1471 'bg-neutral-bg1':885,1479 'bg-neutral-bg2':938,1487,1503 'bg-neutral-bg3':1495,1512 'bg-neutral-bg5':947 'bg-neutral-bg6':960 'bg-white':975,992,1041,1055 'bg1':307,888,923,1478,1482 'bg2':312,941,1486,1490,1502,1506 'bg3':317,1494,1498,1510,1515 'bg4':322 'bg5':327,950 'bg6':332,963 'black':1014,1031 'blue':375 'blur':973,990,1010,1027,1039 'bodi':883,1422 'bold':194,652 'bold.ttf':188,598 'border':344,764,768,777,786,839,979,981,996,998,1016,1018,1045,1047,1052,1516,1518,1521,1522,1523,1525,1528,1529 'border-bord':1520 'border-border-subtl':1527 'border-brand':1051 'border-whit':980,997,1017,1046 'borderradius':387 'bottom':502,508 'boundari':1634 'boxshadow':396 'brand':293,672,676,680,685,690,914,1053,1458,1462,1468,1473 'browserrout':1093 'build':112 'button':1563 'button.tsx':198 'buttons/cards':1205 'caption':1431 'card':986,1306,1308,1310,1354,1410,1483,1564 'card.tsx':199 'case':1453 'cd':133 'center':1335,1338 'children':1223,1272,1277,1301 'clarif':1628 'class':103,966,1385,1455 'classic':161 'classnam':1325,1351 'clear':1601 'clsx':100,142 'color':258,261,292,673,675,679,684,689,700,708,716,724,732,740,748,750,755,760,765,767,776,785,794,796,800,804,808,880,1450,1454,1557 'color-bg':699,707,715,723,731,739 'color-border-default':775 'color-border-strong':784 'color-border-subtl':766 'color-brand':674 'color-brand-hov':678 'color-brand-light':683 'color-brand-subtl':688 'color-error':803 'color-info':807 'color-schem':879 'color-success':795 'color-text-mut':759 'color-text-primari':749 'color-text-secondari':754 'color-warn':799 'complet':1556 'compon':196,555,968,1562 'config':270 'configur':213 'const':1160,1179,1207,1225,1239 'content':273,1311,1382 'creat':123 'criteria':1637 'css':16,51,551,668 'custom':669 'cyan':385 'd':149 'damp':1220 'dark':4,9,38,44,882 'dark-them':8,43 'dashboard':22,57,1130 'data':27,62 'data-rich':26,61 'dataviz':372 'default':272,294,351,388,546,778,1138,1517,1519 'delaychildren':1236 'describ':1589,1605 'design':20,55,1554 'devic':489 'dialog':1566 'dialog.tsx':202 'display':263,584,611,638,666 'document.getelementbyid':1106 'dom':82,85,90,146,1090,1098,1118 'durat':1172,1197,1252,1297 'eas':428,437,446,865,870,875,1071,1077,1199,1254,1299 'ease-out':427,436,445,1070,1076 'easeout':1200,1255,1300 'ec4899':384 'ef4444':369,382,806 'effect':32,67,1303 'element':1144,1148,1384 'elev':1491 'entri':217 'env':494,503,512,521 'environ':1617 'environment-specif':1616 'error':368,805,1545,1547,1551 'execut':1584 'exit':1168,1191,1291,1347,1376 'expert':1622 'export':271,545,1137,1159,1178,1206,1224,1238,1274 'extend':281 'f59e0b':367,380,802 'face':559,562,588,615,642 'fade':422,1155 'fade-in':421 'fadein':424,449,1067,1161 'famili':565,591,618,645 'fast':863 'favicon':162,167,222 'favicon.ico':160 'favicon.svg':164 'ffffff':339,753 'file':1553 'fix':1326 'flex':1332 'focus':901,904,1050,1054,1508,1511 'focus-vis':903 'font':183,558,561,564,575,579,583,587,590,602,606,610,614,617,629,633,637,641,644,657,661,665,894,1392,1404,1416,1444 'font-display':582,609,636,664 'font-fac':560,586,613,640 'font-famili':563,589,616,643 'font-medium':1415,1443 'font-san':893 'font-semibold':1391,1403 'font-styl':578,605,632,660 'font-weight':574,601,628,656 'fontfamili':282 'form':1575 'format':572,599,626,654 'framer':18,53,95,140,1123,1151,1264 'framer-mot':94,139,1122,1263 'framework':79 'frontend':2,36 'frontend-ui-dark-t':1 'full':953,1363 'function':1139,1275 'glass':964,969,985,1005,1022,1034,1302,1305,1314,1320,1330,1353 'glass-card':984,1352 'glass-input':1033 'glass-overlay':1021,1329 'glass-panel':1004 'glassmorph':31,66 'globals.css':210 'glow':397,407 'glow-lg':406 'goe':1312 'green':377 'guidelin':535 'height':899,931 'hidden':1227,1241 'home':170 'hover':296,681,958,1203,1467,1469,1470,1474 'hsl':308,313,318,323,328,333,703,711,719,727,735,743 'hsla':346,352,358,770,779,788 'html':216,227,878 'icon':244 'imag':176 'image/png':256 'image/x-icon':250 'import':268,1081,1085,1092,1099,1103,1111,1119,1125,1129,1133,1260,1266 'index.html':214 'index.ts':204 'info':370,809 'init':155 'initi':1162,1181,1281,1341,1366 'input':1035,1499,1507,1565,1631 'input.tsx':200 'inset':486,498,507,516,525,1327 'instal':138,148,234 'interfac':1270 'io':169 'ital':635,663 'italic.ttf':191,195,625,653 'item':1319,1334 'items-cent':1333 'js':266,276,544 'json':237 'jsx':278 'justifi':1337 'justify-cent':1336 'keyfram':448 'label':1439 'latest':125 'layer':967,1061 'layout':205,1572 'left':511,517 'lg':391,408,828,853,1011,1402 'light':298,686 'limit':1593 'list':1574 'main.tsx':212 'manifest':180,232 'match':1602 'max':1358 'max-w-md':1357 'md':824,848,974,991,1360 'medium':1417,1445 'merg':104 'meta':225 'min':898 'min-height':897 'minheight':536 'minimum':528 'minwidth':539 'miss':1639 'mobil':220,483,527 'modal':1321,1381 'modern':7,42,165 'motion':19,54,96,141,1124,1152,1261,1265 'motion.div':1280,1324,1350 'mount':1158,1177 'mute':342,762,1438 'mx':1364 'my-app':126,134 'name':229,238,240,242 'navig':1318,1573 'neutral':306,697,887,922,940,949,962,1477,1481,1485,1489,1493,1497,1501,1505,1509,1514 'none':909 'normal':581,608,868 'notch':488 'npm':122,137,147 'npx':153 'offset':917,921 'og-image.png':173 'opac':451,454,458,464,471,478,1163,1166,1169,1182,1187,1192,1228,1231,1242,1247,1282,1287,1292,1342,1345,1348,1369,1374,1379 'outlin':908 'outline-non':907 'output':1611 'overlay':1023,1322,1331 'overview':1592 'p':156,1355 'packag':72 'page':1256,1386,1475,1571 'pageheader.tsx':208 'pagetransit':1276 'pagetransitionprop':1271,1278 'panel':24,59,1006,1315 'path':1143,1146 'pattern':1150,1304,1570 'per':533 'permiss':1632 'pink':383 'plugin':542,547 'point':218 'postcss':151 'postcss.config.js':543 'primari':338,752,892,1397,1409,1421,1456,1466 'project':157 'properti':670 'public':159 'public/site.webmanifest':230 'purpl':373,1459 'purpos':74 'pwa':179,231 'px':476 'quick':119 'radius':840,842,847,852,857 'radius-lg':851 'radius-md':846 'radius-sm':841 'radius-xl':856 'react':11,46,75,81,88,131,144,1082,1084,1089,1096,1116,1269 'react-dom':80,1088 'react-router-dom':87,143,1095,1115 'react-t':130 'reactdom':1086 'reactdom.createroot':1105 'reactnod':1267,1273 'red':381 'relat':1552 'rem':390,393,816,821,830,845,850,855 'render':86,1108 'requir':1630 'return':1141,1279 'review':1623 'rgba':301,401,412,692 'rich':28,63 'right':520,526 'ring':910,913,916,920 'ring-brand':912 'ring-offset':915 'ring-offset-neutral-bg1':919 'root':671,1107 'round':952,1002 'rounded-ful':951 'rounded-xl':1001 'rout':93,1112,1113,1142,1145 'router':89,145,1097,1117 'safe':484,492,496,501,505,510,514,519,523 'safe-area-inset-bottom':504 'safe-area-inset-left':513 'safe-area-inset-right':522 'safe-area-inset-top':495 'safe-bottom':500 'safe-left':509 'safe-right':518 'safe-top':491 'safeti':118,1633 'san':283,290,895 'sans-serif':289 'scale':1201,1210,1213,1367,1372,1377,1561 'scaleonhov':1208 'scheme':881 'scope':1604 'screen':171 'scrollbar':924,928,935,944,956 'secondari':340,757,1430,1449 'section':1398 'sego':184,186,189,192,284,566,592,619,646 'semibold':1393,1405 'serif':291 'set':1134 'share':175 'short':241 'sidebar':1316 'sidebar.tsx':207 'site.webmanifest':178 'size':247,253,531 'skill':1580,1596 'skill-frontend-ui-dark-ts' 'slide':431,440,1174 'slide-down':439 'slide-up':430 'slidedown':442,469 'slideup':433,456,1073,1180 'slow':873 'sm':819,843,1028,1040,1426,1442 'social':174,224 'source-sickn33' 'space':490,811,813,818,823,827,832,836,1559 'spacing-2xl':835 'spacing-lg':826 'spacing-md':822 'spacing-sm':817 'spacing-x':812 'spacing-xl':831 'specif':1618 'spring':1217 'src':181,245,251,568,594,621,648 'src/app.tsx':1109 'src/main.tsx':1079 'src/styles/globals.css':550 'stack':71 'stagger':1222 'staggerchildren':1234 'staggercontain':1226 'staggeritem':1240 'standalon':264 'start':120 'status':363,793,1532,1536,1539,1543,1546,1550 'stiff':1218 'stop':1624 'strong':357,787 'structur':158 'style':108,209,580,607,634,662,877,902,925 'substitut':1614 'subtl':300,345,691,769,1524,1526,1530 'success':364,797,1531,1533,1537,1636 'surfac':1492 'svg':166 'swap':585,612,639,667 'system':13,48,287,1558 'system-ui':286 'tab':1567 'tabs.tsx':203 'tag':226 'tailwind':15,50,552,554,556 'tailwind.config.js':265 'tailwindcss':105,150,154,269,548 'target':530 'task':1600 'tast':34,69 'templat':129 'test':1620 'text':337,747,751,756,761,890,891,1389,1395,1396,1401,1407,1408,1413,1419,1420,1423,1425,1428,1429,1433,1436,1437,1441,1447,1448,1464,1535,1542,1549 'text-2xl':1388 'text-bas':1412 'text-lg':1400 'text-sm':1424,1440 'text-status-error':1548 'text-status-success':1534 'text-status-warn':1541 'text-text-mut':1435 'text-text-primari':889,1394,1406,1418 'text-text-secondari':1427,1446 'text-whit':1463 'text-x':1432 'theme':10,39,45,257,280 'thumb':945,957 'titl':1309,1387,1399,1411 'token':1555 'tool':113 'top':493,499 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touch':529,537,540 'track':936 'transform':460,466,473,480 'transit':860,862,867,872,1171,1196,1215,1233,1251,1257,1296 'transition-fast':861 'transition-norm':866 'transition-slow':871 'translatey':461,467,474,481 'treat':1609 'truetyp':573,600,627,655 'ts':5,132,277 'tsx':279,1080,1110,1154,1259,1307,1317,1323 'type':117,249,255,267,1216 'typescript':40,114 'typographi':1383,1560 'ui':3,12,37,47,78,187,190,193,197,285,288,567,593,597,620,624,647,651 'ui.ttf':185,571 'url':569,595,622,649 'usag':1451 'use':14,49,1452,1578,1594 'util':557,965,1060,1062 'valid':1619 'variant':1153 'version':73 'viewport':221 'visibl':905,1230,1246 'vite':109,124 'w':1359,1362 'w-full':1361 'warn':366,801,1538,1540,1544 'web':235 'webkit':927,934,943,955 'webkit-scrollbar':926 'webkit-scrollbar-thumb':942,954 'webkit-scrollbar-track':933 'weight':576,603,630,658 'whilehov':1209 'whiletap':1212 'white':977,982,994,999,1019,1043,1048,1057,1465 'width':929 'workflow':1586 'wrapper':1258 'x':77,84,92,98,102,107,111,116 'xl':394,833,858,1003 'xs':418,814,1434 'y':1184,1189,1194,1244,1249,1284,1289,1294 'yellow':379 'z':1339","prices":[{"id":"59756e4c-8061-458b-8493-c7bfab602a3e","listingId":"0148d70a-e670-45cb-aae7-566a31a05fde","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:37:43.856Z"}],"sources":[{"listingId":"0148d70a-e670-45cb-aae7-566a31a05fde","source":"github","sourceId":"sickn33/antigravity-awesome-skills/frontend-ui-dark-ts","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-ts","isPrimary":false,"firstSeenAt":"2026-04-18T21:37:43.856Z","lastSeenAt":"2026-04-24T00:51:00.169Z"}],"details":{"listingId":"0148d70a-e670-45cb-aae7-566a31a05fde","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"frontend-ui-dark-ts","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34793,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T00:28:59Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"0f1b873e7edb75aa25fd3223d968c71e7ae54e0b","skill_md_path":"skills/frontend-ui-dark-ts/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-ts"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/frontend-ui-dark-ts"},"updatedAt":"2026-04-24T00:51:00.169Z"}}