Name: frontend-ui-dark-ts
Rating: 56.8 (1 reviews)
Author: administrakt0r

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.

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/frontend-ui-dark-ts/SKILL.md

The canonical home for this skill is frontend-ui-dark-ts in administrakt0r/AI-Agents-Safe-Coding-Skills

Quality

Content

71%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is highly actionable with complete, copy-paste-ready configs and concrete patterns, and is well-sectioned, but it is verbose for a SKILL.md (inlined full configs, repeated description) and its "Related Files" pointers reference non-existent files, limiting progressive disclosure.

Suggestions

Move the full tailwind.config.js and globals.css into reference files and keep only key excerpts inline, with clearly signaled links, to improve both conciseness and progressive disclosure.

Add a verification step to Quick Start (e.g. "Run `npm run dev` and confirm the dark glassmorphism theme renders") to lift workflow clarity.

Remove the verbatim repeat of the frontmatter description as the intro paragraph, and either create the referenced Design Tokens/Components/Patterns files or remove the dangling "Related Files" entries.

Dimension	Reasoning	Score
Conciseness	Mostly efficient reference material with executable configs and no padding about concepts Claude already knows, but it inlines entire config files (full tailwind.config.js, globals.css) and repeats the frontmatter description verbatim as the intro paragraph; these could be trimmed or moved to reference files, so it does not reach the lean 4.	3 / 5
Actionability	Fully copy-paste ready: the Quick Start commands are runnable, the tailwind/postcss/globals configs are complete, and concrete Framer Motion variants plus glass card/sidebar/modal patterns cover the common cases.	5 / 5
Workflow Clarity	The Quick Start is a clear sequenced scaffold (create vite, cd, install deps, install tailwind, init) but lacks a final verification checkpoint (e.g. run `npm run dev` and confirm the dark theme renders); it is above the implicit-checkpoint 3 but short of the explicit-validation 5.	4 / 5
Progressive Disclosure	Section structure is clear (Stack, Quick Start, Configuration, Animation/Glass patterns, Typography, Color Usage), but the file is monolithic with bulk config content inlined rather than split out, and the "Related Files" section references Design Tokens/Components/Patterns that do not exist as bundle files.	3 / 5
	Total	15 / 20 Passed

Description

61%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description conveys a clear, specific design-system niche with good natural trigger terms, but it omits an explicit "Use when…" clause and describes a system rather than concrete actions, capping completeness and specificity at the midpoint.

Suggestions

Add an explicit trigger clause, e.g. "Use when building dashboards, admin panels, or data-rich React apps with a dark theme." to lift completeness above 3.

Reframe features as concrete actions (e.g. "Scaffold a dark-themed React dashboard, apply glassmorphism surfaces, add Framer Motion transitions") to raise specificity.

Add common synonyms/file cues ("frontend", "UI kit", "components", ".tsx") to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain clearly ("dark-themed React UI system using Tailwind CSS and Framer Motion") and concrete features ("glassmorphism effects", "tasteful animations"), but lists no concrete action verbs — it describes a system rather than what it does, so it does not reach the several-specific-actions bar of 4.	3 / 5
Completeness	Has a clear "what" (a dark-themed React UI system with the stated stack and effects) but only a weakly implied "when" via "Designed for dashboards, admin panels, and data-rich applications"; there is no explicit "Use when…" trigger clause, which caps completeness at 3 per the rubric guideline.	3 / 5
Trigger Term Quality	Includes natural user terms ("dark-themed", "React", "dashboards", "admin panels", "glassmorphism", "animations") that a user would plausibly say; a few natural synonyms (e.g. "frontend", "components", "UI kit") are missing, keeping it below 5.	4 / 5
Distinctiveness Conflict Risk	Targets a fairly distinct niche (dark, glassmorphism, Tailwind + Framer Motion dashboards) which is unlikely to fire for unrelated skills; minor overlap risk remains with other generic frontend/UI skills, so it does not reach the minimal-conflict 5.	4 / 5
	Total	14 / 20 Passed

Validation

87%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (595 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	14 / 16 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: plugins/AI-Agents-Safe-Coding-Skills-claude/skills/frontend-ui-dark-ts/SKILL.md
Commit: 57c135b

Reviewed: 4 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.