design-frontend

Visual design system patterns for web UIs — layout, responsive, Tailwind tokens. Use when implementing visual designs, working with CSS/Tailwind, or building responsive layouts.

0.98x

Quality

58%

Does it follow best practices?

Impact

96%

0.98x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/design/design-frontend/SKILL.md

Quality

Discovery

82%

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

This is a solid description with good trigger terms and complete what/when coverage. The main weakness is the lack of specific concrete actions—it describes the domain well but doesn't enumerate what specific tasks it enables. The scope could also be slightly more distinctive to avoid overlap with general frontend skills.

Suggestions

Add specific concrete actions like 'create responsive grid layouts', 'configure Tailwind design tokens', 'implement spacing and typography scales' to improve specificity.

Consider adding more distinctive triggers like 'design tokens', 'breakpoints', 'utility classes', or 'spacing system' to further differentiate from general frontend skills.

Dimension	Reasoning	Score
Specificity	Names the domain (visual design system, web UIs) and mentions some areas (layout, responsive, Tailwind tokens), but doesn't list concrete actions like 'create grid layouts', 'configure breakpoints', or 'define color tokens'.	2 / 3
Completeness	Clearly answers both what (visual design system patterns for web UIs — layout, responsive, Tailwind tokens) and when (Use when implementing visual designs, working with CSS/Tailwind, or building responsive layouts) with explicit trigger guidance.	3 / 3
Trigger Term Quality	Good coverage of natural terms users would say: 'visual designs', 'CSS', 'Tailwind', 'responsive layouts', 'web UIs'. These are terms developers naturally use when seeking this type of help.	3 / 3
Distinctiveness Conflict Risk	Somewhat specific to visual/CSS/Tailwind work, but could overlap with general frontend development skills or component library skills. The 'web UIs' scope is broad enough to potentially conflict with other UI-related skills.	2 / 3
	Total	10 / 12 Passed

Implementation

35%

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

This skill is a meta-wrapper that provides no actual design system content despite its description promising 'layout, responsive, Tailwind tokens.' The content consists entirely of generic trigger examples, troubleshooting boilerplate, and an abstract workflow without any executable CSS/Tailwind code or concrete visual design patterns. The skill fails to deliver on its stated purpose.

Suggestions

Add concrete Tailwind/CSS code examples for common layout patterns (grid, flexbox, responsive breakpoints) directly in the skill body

Include specific design tokens or utility class combinations that demonstrate the visual design system

Replace the abstract workflow with actionable steps like 'Use these responsive breakpoints: sm:640px, md:768px...' with code snippets

Either inline essential patterns or ensure the referenced rules/_sections.md contains the promised content and summarize key patterns here

Dimension	Reasoning	Score
Conciseness	The content is relatively brief but includes boilerplate troubleshooting sections that add little value for Claude. The examples and workflow sections are reasonably efficient but could be tighter.	2 / 3
Actionability	The skill provides no concrete code, commands, or executable guidance. It describes abstract workflows ('Apply the skill rules') without showing actual Tailwind patterns, CSS examples, or responsive layout code that the description promises.	1 / 3
Workflow Clarity	The 3-step workflow is present but extremely vague ('Apply the skill rules and referenced guidance'). No validation checkpoints or concrete steps for implementing visual designs are provided.	2 / 3
Progressive Disclosure	References a rules index file which is appropriate, but the SKILL.md itself contains no substantive content—it's essentially a shell pointing elsewhere without providing any quick-start value or concrete patterns inline.	2 / 3
	Total	7 / 12 Passed

Validation

90%

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

Validation for skill structure

Criteria	Description	Result
metadata_field	'metadata' should map string keys to string values	Warning

	Total	10 / 11 Passed

Repository: ravnhq/ai-toolkit
Commit: 7b466be

Reviewed: 9 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.