frontend-ui-dark-ts
Build Dark React Dashboards
Data-heavy React apps need consistent dark interfaces that remain readable and maintainable. This skill provides Tailwind, TypeScript, and motion patterns for polished dashboards.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "frontend-ui-dark-ts" from https://skillstore.io/skills/sickn33-frontend-ui-dark-ts.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-ui-dark-ts/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "frontend-ui-dark-ts". A user asks for a dark dashboard foundation.
Expected outcome:
A setup checklist with Vite, React, Tailwind CSS, Framer Motion, routing, folders, and dark theme tokens.
Using "frontend-ui-dark-ts". A user asks to improve an admin panel surface style.
Expected outcome:
A design pass covering glass panels, borders, contrast, spacing, focus states, and card hierarchy.
Using "frontend-ui-dark-ts". A user asks for animation guidance.
Expected outcome:
A motion plan for page transitions, hover feedback, staggered lists, and reduced motion considerations.
Security Audit
SafeThe static findings are false positives from Markdown examples, placeholder metadata URLs, a JSDoc type import, and local CSS font paths. No prompt injection, data exfiltration intent, unauthorized execution, or unsafe filesystem behavior was found in SKILL.md.
Risk Factors
⚡ Contains scripts (1)
⚙️ External commands (50)
🌐 Network access (3)
📁 Filesystem access (4)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/sickn33-frontend-ui-dark-ts?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/sickn33-frontend-ui-dark-ts?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-ui-dark-ts/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/sickn33-frontend-ui-dark-ts.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
sickn33. (2026). frontend-ui-dark-ts security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6BibTeX citation
@techreport{sickn33-sickn33-frontend-ui-dark-ts-2026,
author = {sickn33},
title = {frontend-ui-dark-ts security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-ui-dark-ts security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/sickn33-frontend-ui-dark-ts/audits/6"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-ui-dark-ts:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Start a Dashboard
Create a dark Vite React dashboard with consistent Tailwind tokens and motion patterns.
Translate a Design System
Convert a dark visual system into implementable colors, spacing, typography, and surface patterns.
Standardize Internal Tools
Build admin panels with shared layout, component, and interaction conventions.
Try These Prompts
Use frontend-ui-dark-ts to plan a new Vite React dashboard. Include setup steps, folder structure, and required packages.
Use frontend-ui-dark-ts to design a dark analytics dashboard with cards, tabs, forms, and motion states.
Apply frontend-ui-dark-ts patterns to my current React components. Keep behavior unchanged and update Tailwind classes consistently.
Review my TypeScript React admin UI against frontend-ui-dark-ts. Identify token drift, accessibility gaps, and animation issues.
Best Practices
- Replace placeholder app names, URLs, and images before release.
- Test contrast, keyboard focus, and reduced motion with real users.
- Keep design tokens centralized before adding page-specific styles.
Avoid
- Do not copy placeholder metadata into production.
- Do not treat glass effects as a substitute for readable contrast.
- Do not add animations that block navigation, forms, or data scanning.
Frequently Asked Questions
Does this skill generate a complete app?
Which frameworks does it target?
Can I use it with existing components?
Does it include accessibility checks?
Are the example URLs production ready?
Does it install dependencies automatically?
Developer Details
Author
sickn33License
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Repository
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-tsRef
3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88
Maintenance freshness
7/18/2026
Usage
13 downloads · 141 views
File structure
📄 SKILL.md