Name: frontend-ui-dark-ts
Rating: 51.2 (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

57%

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/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

53%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 content is highly actionable with copy-paste-ready configs and code, but it is severely verbose for a SKILL.md, inlining material that should live in separate reference files, and provides no multi-step workflow with validation beyond initial scaffolding.

Suggestions

Move the full tailwind.config.js, globals.css, index.html, and webmanifest into reference files under references/ and keep SKILL.md as a concise overview with links, to fix both conciseness and progressive disclosure.

Add a short end-to-end workflow with a validation checkpoint (e.g., after Quick Start, 'Run npm run dev and confirm the dashboard renders at localhost:5173').

Either make the 'Related Files' entries real, linked files in references/ or remove the section to avoid dead navigation.

Dimension	Reasoning	Score
Conciseness	The ~590-line body inlines entire config files (tailwind.config.js, globals.css, index.html, webmanifest) and adds explanatory comments like 'Classic favicon (32x32)' and 'minimum touch target sizes (44px per Apple/Google guidelines)' that teach concepts Claude already knows; noticeably verbose with several padded sections.	2 / 5
Actionability	Provides fully copy-paste-ready, executable guidance: complete quick-start commands, full tailwind/postcss/globals config, main.tsx, App.tsx, animation variants, and glass-effect snippets that cover the common cases.	5 / 5
Workflow Clarity	Quick Start gives a sequenced install path, but there is no build/usage workflow beyond setup and no validation checkpoints (e.g., 'verify the dev server runs'); steps are listed with validation gaps, fitting the anchor-3 example.	3 / 5
Progressive Disclosure	No bundle files exist (references/scripts/assets absent), yet the body is a monolithic wall inlining configs that belong in separate files; the 'Related Files' section names Design Tokens/Components/Patterns but they are not real, linked files, leaving references buried and non-functional.	2 / 5
	Total	12 / 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 is clear and reasonably specific about the stack and target use cases, but lacks an explicit 'Use when...' trigger clause and frames capabilities as attributes rather than actions, which limits completeness and specificity.

Suggestions

Add an explicit 'Use when...' trigger clause naming concrete user phrases (e.g., 'Use when building a dark-themed dashboard, admin panel, or data-rich React app with Tailwind and Framer Motion').

Reframe features as actions the skill performs (e.g., 'Scaffolds a dark-themed React UI, applies glassmorphism styles, and wires Framer Motion animations') to lift specificity.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete features ('Tailwind CSS', 'Framer Motion', 'glassmorphism effects', 'tasteful animations'), but these are attributes rather than actions the skill performs; 'Designed for' is not an executable verb, so it sits at the 'names domain and 1-2 concrete actions' anchor rather than 4.	3 / 5
Completeness	Has a clear 'what' (a dark-themed React UI system with a named stack), but the 'when' is only weakly implied via 'Designed for dashboards, admin panels...' with no explicit 'Use when...' trigger clause, which caps completeness at 3 per the rubric.	3 / 5
Trigger Term Quality	Includes natural terms users would say ('React UI system', 'Tailwind CSS', 'Framer Motion', 'dashboards', 'admin panels', 'glassmorphism') with good coverage; a few common synonyms or phrasings are missing, keeping it just below 5.	4 / 5
Distinctiveness Conflict Risk	The specific stack (Tailwind + Framer Motion, dark theme, glassmorphism) carves a mostly distinct niche with only minor overlap risk against general frontend skills.	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/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.