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

43%

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 ./skills/frontend-ui-dark-ts/SKILL.md

Quality

Content

46%Scale 1-5

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

This skill functions more as a configuration dump than an actionable guide. While it provides concrete, copy-paste ready configuration files and useful pattern examples (glass effects, animations), it wastes significant token budget on boilerplate that Claude could generate from brief specs. The most critical gap is that the actual UI components (Button, Card, Input, etc.) are never defined despite being the core purpose of the skill, and referenced supporting files don't exist.

Suggestions

Extract the full tailwind.config.js, globals.css, index.html, and site.webmanifest into bundle files, and summarize them with just the key design decisions (color palette, glass classes, animation names) in the SKILL.md body.

Add actual component implementations for at least the core components (Button, Card, Input) since these are the primary deliverable of a UI component system skill.

Remove duplicate information — the CSS custom properties in globals.css duplicate the Tailwind config colors exactly; keep only one source of truth and reference it.

Replace the 'Related Files' section with actual bundle files or remove the references entirely to avoid pointing to non-existent resources.

Dimension	Reasoning	Score
Conciseness	The skill is heavily verbose, inlining massive configuration files (tailwind.config.js, globals.css, index.html, site.webmanifest) that Claude could generate from brief specifications. The CSS custom properties duplicate the Tailwind config values. Much of this content (favicon setup, Open Graph meta tags, scrollbar styling, font-face declarations) is boilerplate that doesn't need to be spelled out in full.	2 / 5
Actionability	The content provides concrete, copy-paste ready code for configuration files, animation patterns, glass effects, and component usage. However, the actual UI components (Button, Card, Input, Dialog, Tabs, AppShell, Sidebar, PageHeader) are only listed in the project structure but never implemented, which is a significant gap for a UI component system skill.	4 / 5
Workflow Clarity	The Quick Start section provides a clear setup sequence, but there's no workflow for building components, no validation steps, and no guidance on the order of operations when creating new pages or components. The skill reads more like a reference dump than a guided workflow.	3 / 5
Progressive Disclosure	The skill inlines hundreds of lines of configuration that should be in separate reference files, while the 'Related Files' section at the bottom references 'Design Tokens', 'Components', and 'Patterns' files that don't exist in the bundle. The massive tailwind config, CSS, and HTML boilerplate should be extracted to supporting files, with the SKILL.md providing a concise overview.	2 / 5
	Total	11 / 20 Passed

Description

41%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 reads more like a marketing tagline than a functional skill description. It identifies the technology stack and aesthetic style but fails to specify concrete actions the skill performs and completely lacks a 'Use when...' clause to guide skill selection. The description would benefit significantly from listing specific capabilities and explicit trigger conditions.

Suggestions

Add a 'Use when...' clause with trigger terms like 'when the user asks for dashboard components, admin panel UI, dark-themed interfaces, or React components with animations'.

List specific concrete actions such as 'Generates React components, builds dashboard layouts, creates data tables, designs navigation sidebars, implements animated cards and modals'.

Include natural user synonyms and variations like 'dark mode', 'UI components', 'animated UI', 'data visualization panels', '.tsx' to improve trigger term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (React UI system) and mentions a few concrete elements like 'glassmorphism effects', 'tasteful animations', 'dashboards, admin panels', but doesn't list specific actions or capabilities (e.g., 'creates components', 'generates layouts', 'builds navigation bars').	3 / 5
Completeness	The 'what' is partially described (a UI system with certain technologies and aesthetics), but there is no explicit 'when' clause or trigger guidance. The description reads more like a product tagline than skill selection guidance, and the missing 'Use when...' clause caps this at 3 per the rubric, but the 'what' itself is also somewhat vague, placing it at 2.	2 / 5
Trigger Term Quality	Includes some relevant keywords like 'React', 'Tailwind CSS', 'Framer Motion', 'dashboards', 'admin panels', 'dark-themed', and 'glassmorphism', but misses natural user phrases like 'UI components', 'dark mode', 'animated components', or file/framework variations users might say.	3 / 5
Distinctiveness Conflict Risk	The combination of dark theme, glassmorphism, and specific tech stack (React + Tailwind + Framer Motion) provides some distinctiveness, but it could overlap with other React component skills, general Tailwind CSS skills, or generic UI/dashboard building skills.	3 / 5
	Total	11 / 20 Passed

Validation

81%

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 — 9 / 11 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	9 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: 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.