Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

frontend-ui-dark-ts — Claude Code skill: what it does, how to install

Build dark-themed React interfaces with Tailwind CSS and Framer Motion. It guides dashboard, admin panel, and data-dense UI styling.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add sickn33/agentic-awesome-skills --skill frontend-ui-dark-ts -a claude-code
Open on GitHub

What frontend-ui-dark-ts does

This skill guides agents when styling dark-themed React applications in TypeScript. It targets data-dense interfaces, admin panels, and analytical dashboards. The stack relies on Tailwind CSS and Framer Motion for animations and glassmorphism.

The skill defines a structured color scheme with ready utility classes. Primary actions use bg-brand text-white, while page surfaces use bg-neutral-bg1. Cards and inputs adopt bg-neutral-bg2, and elevated components get bg-neutral-bg3. It also specifies tokens for subtle borders, success states, and error alerts.

Agents must consult references/detailed-guide.md for safety and validation requirements before executing tasks. Generated components never substitute for manual environment-specific testing and code review. If parameters or constraints are unclear, the agent must pause and ask for clarification.

What it helps with

  • style a dark-themed admin panel with glassmorphism
  • apply standardized Tailwind color classes across cards and inputs
  • integrate Framer Motion transitions in React dashboards
  • format error and success states using design system tokens

Example prompts for the agent

  • Build a dark analytics card following frontend-ui-dark-ts guidelines with bg-neutral-bg2.
  • Create an admin table using brand purple buttons and subtle border tokens.
  • Implement a glassmorphic modal with Framer Motion animations.

How to install frontend-ui-dark-ts

1Skills CLI (Vercel)

npx skills add sickn33/agentic-awesome-skills --skill frontend-ui-dark-ts -a claude-code

2Manually: put the files in place

~/.claude/skills/frontend-ui-dark-ts/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/frontend-ui-dark-ts/

From the same set80

The whole set →
docker-expert sickn33 A skill that turns your AI agent into a Docker reviewer for Dockerfiles, multi-stage builds and container security. Useful when images and Compose files need a second look. Claude Code CX Codex Cursor +1 27,200installs typescript-expert sickn33 A skill for TypeScript and JavaScript work: it reads your project setup, fixes type errors and speeds up type checking. Useful once a TS codebase gets big. Claude Code CX Codex Cursor +1 12,600installs browser-automation sickn33 This skill builds browser checks around observed UI state and explicit outcomes. Use it for UI workflows, timing failures, or authorised page-data collection. Claude Code CX Codex Cursor +1 6,700installs nextjs-supabase-auth sickn33 This skill wires Supabase Auth into the Next.js App Router with clients, middleware, OAuth callbacks, and Server Actions. Use it when you need protected routes and session handling. Claude Code CX Codex Cursor +1 6,500installs 3d-web-experience sickn33 Helps build and debug web 3D scenes, product configurators, and portfolios. Covers stack choice, model loading, scroll interaction, and performance checks. Claude Code CX Codex Cursor +1 5,200installs prisma-expert sickn33 This skill helps inspect Prisma schemas, migrations, and queries. Use it to investigate an error or review database changes before deployment. Claude Code CX Codex Cursor +1 4,200installs playwright-skill sickn33 Write and run Playwright browser tests directly in Claude Code: responsive design checks, login flows, form submissions, screenshots. Executes locally via Node with a visible browser window. Claude Code CX Codex Cursor +1 3,900installs game-development sickn33 Guides game architecture decisions, platform choices, and core loop structure. Directs the assistant to specialized sub-skills for web, mobile, PC, or VR. Claude Code CX Codex Cursor +1 3,800installs

Similar

render-textures phaserjs Explains off-screen rendering in Phaser 4, covering RenderTexture game objects, DynamicTexture assets, Stamp helpers, and command buffers. Claude Code CX Codex Cursor +1 767installs physics-matter phaserjs Helps AI agents configure Matter.js physics in Phaser 4, including rigid bodies, composite shapes, constraints, and mouse dragging. Claude Code CX Codex Cursor +1 754installs ink vercel-labs Builds interactive terminal user interfaces from JSON specs using @json-render/ink. Useful when creating dynamic TUI components or agent-generated layouts. Claude Code CX Codex Cursor +1 1,300installs sign-in-with-google-web official google Guides Google Identity Services setup across web projects. It implements secure token handling and IETF authentication patterns. Claude Code Gemini CLI CX Codex 743installs v3-to-v4-migration phaserjs Guides migration from Phaser 3 to Phaser 4. Explains renderer architecture changes, unified filters, and tint system updates. Claude Code CX Codex Cursor +1 711installs react-joyride gilbarbara Teaches the agent to create step-by-step tours and onboarding flows in React apps using React Joyride v3. Claude Code CX Codex Cursor +1 686installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about frontend-ui-dark-ts

How to install frontend-ui-dark-ts in Claude Code?

Run npx skills add sickn33/agentic-awesome-skills --skill frontend-ui-dark-ts -a claude-code in your terminal. The skill file is placed in ~/.claude/skills/frontend-ui-dark-ts/SKILL.md.

What does frontend-ui-dark-ts do?

It provides design rules and Tailwind classes for dark-mode React applications. The skill covers surfaces, primary actions, inputs, and status states with Framer Motion animations.

What prerequisites does frontend-ui-dark-ts require?

You must follow the instructions in references/detailed-guide.md before execution. Its output also requires manual testing and review in your specific target environment.

Source text

SKILL.md · MIT 
---
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."
risk: critical
source: community
date_added: "2026-02-27"
---

# 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.

## Detailed Guide

Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

## Color Usage

| Use Case | Color | Class |
|----------|-------|-------|
| Primary action | Brand purple | `bg-brand text-white` |
| Primary hover | Brand hover | `hover:bg-brand-hover` |
| Page background | Neutral bg1 | `bg-neutral-bg1` |
| Card background | Neutral bg2 | `bg-neutral-bg2` |
| Elevated surface | Neutral bg3 | `bg-neutral-bg3` |
| Input background | Neutral bg2 | `bg-neutral-bg2` |
| Input focus | Neutral bg3 | `focus:bg-neutral-bg3` |
| Border default | Border default | `border-border` |
| Border subtle | Border subtle | `border-border-subtle` |
| Success | Status success | `text-status-success` |
| Warning | Status warning | `text-status-warning` |
| Error | Status error | `text-status-error` |

## When to Use
This skill is applicable to execute the workflow or actions described in the overview.

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

© sickn33 · MIT · sickn33/agentic-awesome-skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor