CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind

Tailwind CSS v4 styling rules, responsive design patterns, and data attribute conventions for Graph Explorer.

41

Quality

41%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.kiro/skills/tailwind/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

50%

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

This skill is admirably concise but critically lacks actionability. It reads as a set of high-level preferences rather than executable guidance — there are no code examples showing Tailwind v4 syntax, no data attribute patterns, and no container query examples. Claude would struggle to apply these conventions consistently without concrete demonstrations of the preferred patterns.

Suggestions

Add concrete code examples for each preference: a Tailwind v4 class usage example, a data attribute conditional styling example (e.g., `data-[state=open]:bg-blue-500`), and a container query example vs. the discouraged ResizeObserver approach.

Provide a before/after example showing the preferred Tailwind v4 syntax versus legacy patterns from `tailwind.config.ts`.

Link to specific Tailwind docs sections (e.g., container queries, data attributes) rather than the generic docs URL.

DimensionReasoningScore

Conciseness

The content is very lean — five bullet points with no unnecessary explanation. It assumes Claude knows what Tailwind, data attributes, and container queries are.

3 / 3

Actionability

The guidance is entirely abstract and directional. There are no concrete code examples, no Tailwind class snippets, no data attribute patterns, and no executable demonstrations of the preferred approaches.

1 / 3

Workflow Clarity

As a simple styling convention skill, there's no multi-step workflow needed, but the bullet about looking up Tailwind docs is vague — it doesn't specify how or when. The preferences are listed but lack any sequencing or decision criteria for when to apply them.

2 / 3

Progressive Disclosure

The skill references an external URL (tailwindcss.com/docs) but provides no bundle files, no internal references, and no examples. For a skill this short with no bundle, the structure is acceptable but the external reference is underspecified — it doesn't point to specific pages or sections.

2 / 3

Total

8

/

12

Passed

Description

32%

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 identifies a specific technology (Tailwind CSS v4) and project context (Graph Explorer) but remains too high-level, listing broad categories rather than concrete actions. It critically lacks any 'Use when...' guidance, making it difficult for Claude to know when to select this skill over others. The description reads more like a topic label than an actionable skill selector.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when styling Graph Explorer components with Tailwind CSS, applying utility classes, or configuring responsive layouts.'

List specific concrete actions the skill enables, such as 'apply Tailwind utility classes, configure responsive breakpoints, use data attributes for state-based styling, set up dark mode variants.'

Include natural trigger terms users might say, such as 'CSS classes', 'utility classes', 'breakpoints', 'Tailwind config', 'styling components', or 'graph UI'.

DimensionReasoningScore

Specificity

Names the domain (Tailwind CSS v4, Graph Explorer) and some general areas (styling rules, responsive design patterns, data attribute conventions), but doesn't list specific concrete actions like 'apply utility classes', 'configure breakpoints', or 'set up dark mode'.

2 / 3

Completeness

Describes what the skill covers at a high level but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when' caps completeness at 2, and the 'what' is also weak, so this scores a 1.

1 / 3

Trigger Term Quality

Includes relevant keywords like 'Tailwind CSS v4', 'responsive design', and 'data attribute conventions', but misses common user variations like 'CSS classes', 'utility classes', 'styling', 'layout', 'breakpoints', or 'Tailwind config'.

2 / 3

Distinctiveness Conflict Risk

The combination of 'Tailwind CSS v4' and 'Graph Explorer' provides some specificity, but 'styling rules' and 'responsive design patterns' are generic enough to overlap with other CSS or frontend styling skills.

2 / 3

Total

7

/

12

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
aws/graph-explorer
Reviewed

Table of Contents

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.