skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-dark-ts

Builds dark-themed React applications with Tailwind CSS, glassmorphism effects, and Framer Motion animations.

Updated Jul 29, 2026
Search Tags:#typescript#react#dashboard#tailwind css#glassmorphism#dark theme#framer motion
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-ui-dark-ts-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-dark-ts
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/frontend-ui-dark-ts
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill frontend-ui-dark-ts-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, react-router-dom, framer-motion, clsx, tailwindcss, vite, typescript.

What problem does it solve? Setting up a consistent dark-themed React interface from scratch requires configuring Tailwind tokens, fonts, glassmorphism utilities, and animation patterns manually, which is repetitive and error-prone. This Skill provides a complete, ready-to-use design system scaffold for dashboards, admin panels, and data-rich interfaces. ## Core Features & Use Cases - Complete Design Token System: Predefined Tailwind config with brand colors, neutral backgrounds, status colors, dataviz palette, and CSS custom properties for dark UIs. - Glassmorphism Utilities: Ready-made glass, glass-card, glass-panel, glass-overlay, and glass-input component classes built on backdrop-blur. - Framer Motion Patterns: Reusable animation variants including fade-in, slide-up, stagger containers, page transitions, and modal animations. - Use Case: You need to build an analytics dashboard with a sidebar, cards, and modals. Use this Skill to scaffold the Vite + React + TypeScript project with the full dark theme, glass components, and page transitions already configured. ## Quick Start Ask the AI to scaffold a dark-themed React dashboard using this skill's Tailwind configuration, glass components, and Framer Motion page transitions.

Frequently Asked Questions about frontend-ui-dark-ts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a dark theme React app with Tailwind CSS?▼

Create a Vite React TypeScript project, install tailwindcss with postcss and autoprefixer, then apply the provided tailwind.config.js with dark neutral backgrounds, brand colors, and status palettes. The globals.css file adds glass utilities and base dark styles.

How to add glassmorphism effects in Tailwind CSS?▼

Use the predefined glass utility classes that combine backdrop-blur with semi-transparent backgrounds and subtle white borders, such as glass-card for cards and glass-panel for sidebars. These are defined as Tailwind component layers in globals.css.

What Framer Motion animation patterns work for page transitions?▼

Use the PageTransition wrapper with initial opacity 0 and y offset 20, animating to visible state on mount. Combine with AnimatePresence in mode wait around React Router Routes for smooth exit and enter transitions between pages.

Does this Tailwind config support mobile safe areas and touch targets?▼

Yes, the config includes spacing utilities for env(safe-area-inset) values on notched devices and min-h-touch/min-w-touch classes enforcing 44px minimum touch targets per Apple and Google guidelines.

Can I use a different font instead of Segoe UI?▼

Yes, replace the @font-face declarations in globals.css and update the fontFamily sans stack in tailwind.config.js. The default setup loads Segoe UI in regular, bold, italic, and bold italic weights from local TTF assets.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

dashboard-design

Design responsive dashboards with KPI cards and data tables using React and Tailwind CSS.

Official
Intermediate
dallaydallay

building-mcp-server-on-cloudflare

Build and deploy remote MCP servers on Cloudflare Workers with OAuth 2.1.

Official
Advanced
nsuberinsuberi

colorize

Propose 2–4 color palettes with OKLCH values and WCAG contrast validation for UI components.

Community
Intermediate
rafaelcallejarafaelcalleja
2

ui-styling

Generate Tailwind CSS configurations and integrate shadcn/ui components for React-based UIs.

Community
Advanced