tailwind
Tailwind CSS v4 styling rules, responsive design patterns, and data attribute conventions for Graph Explorer.
41
41%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.kiro/skills/tailwind/SKILL.mdQuality
Discovery
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 a 'Use when...' clause, making it difficult for Claude to know when to select this skill over others. The description would benefit from explicit trigger terms and actionable specifics.
Suggestions
Add a 'Use when...' clause with trigger terms like 'when styling Graph Explorer components', 'when applying Tailwind classes', 'when working with responsive layouts in Graph Explorer'.
List specific concrete actions such as 'apply Tailwind utility classes, configure responsive breakpoints, use data attributes for component state styling, set up dark mode variants'.
Include common user-facing keywords like 'CSS classes', 'utility classes', 'breakpoints', 'dark mode', 'theme', or file extensions like '.css' to improve trigger term coverage.
| Dimension | Reasoning | Score |
|---|---|---|
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', 'breakpoints', 'styling', 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 |
Implementation
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 concise but lacks substance. It reads as a set of high-level preferences rather than actionable guidance — there are no code examples showing Tailwind v4 syntax, no examples of data attribute conventions, no container query patterns, and no concrete styling rules. The directive to 'lookup the latest Tailwind documentation' from a URL delegates the actual skill content externally rather than encoding it.
Suggestions
Add concrete code examples showing preferred Tailwind v4 patterns, e.g., a data attribute styling example like `data-[state=active]:bg-blue-500` and a container query example.
Replace the 'lookup the latest Tailwind documentation' bullet with specific Tailwind v4 syntax differences or patterns relevant to Graph Explorer (e.g., new `@theme` directive, CSS-first configuration).
Include at least one before/after example showing the preferred approach (data attributes + Tailwind) vs. the discouraged approach (ResizeObserver or inline conditional styles).
Document the specific data attribute conventions used in Graph Explorer (e.g., which data attributes exist, what values they take, and how they map to Tailwind classes).
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is very lean — five bullet points with no unnecessary explanation. It assumes Claude knows what Tailwind, data attributes, container queries, and ResizeObserver are. | 3 / 3 |
Actionability | The content is entirely vague directives ('prefer', 'use', 'lookup') with no concrete code examples, no specific Tailwind class patterns, no data attribute conventions, and no executable guidance. Telling Claude to 'lookup the latest Tailwind documentation' from a URL is not actionable instruction. | 1 / 3 |
Workflow Clarity | For a simple styling-conventions skill, there's no multi-step workflow needed, but the lack of any concrete examples of the preferred patterns (e.g., data attribute usage, container query syntax) means the guidance is too implicit to be fully clear. | 2 / 3 |
Progressive Disclosure | The skill references an external URL for Tailwind docs and mentions a legacy config file, but provides no internal bundle references or structured navigation. For a skill this short with no bundle files, the organization is acceptable but the external URL reference without any local examples or supplementary files is a missed opportunity. | 2 / 3 |
Total | 8 / 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.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- aws/graph-explorer
- Commit
30587b0
- 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.