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.

Install with Tessl CLI

npx tessl i github:ravnhq/ai-toolkit --skill design-frontend

What are skills?

0.98x

Quality

58%

Does it follow best practices?

Impact

96%

0.98x

Average score across 3 eval scenarios

Optimize this skill with Tessl

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

SKILL.md

Review

Evals

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 that clearly communicates when to use the skill with good trigger terms and explicit 'Use when' guidance. The main weakness is the lack of specific concrete actions—it describes the domain well but doesn't enumerate what specific tasks it enables (e.g., creating spacing scales, defining breakpoints, building grid systems).

Suggestions

Add specific concrete actions like 'create spacing scales, define breakpoints, build grid systems, configure color tokens' to improve specificity

Consider adding more distinctive terms like 'design tokens', 'utility classes', or specific Tailwind concepts to reduce potential overlap with general CSS/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 focus on 'design system patterns' helps but isn't fully distinctive.	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 essentially a meta-wrapper that describes when to trigger itself rather than providing actual design system guidance. Despite the description promising 'layout, responsive, Tailwind tokens', the content contains zero CSS, Tailwind classes, design patterns, or concrete implementation examples. The troubleshooting section is generic boilerplate applicable to any skill.

Suggestions

Add concrete Tailwind/CSS code examples for common layout patterns (grid, flexbox, responsive breakpoints) that Claude can directly use

Include specific design tokens or utility class combinations for visual hierarchy, spacing scales, and responsive patterns

Replace generic troubleshooting with design-specific guidance (e.g., 'If layout breaks at breakpoint X, check...')

Move the trigger/non-trigger examples to frontmatter or remove them, and use that space for actual design system content

Dimension	Reasoning	Score
Conciseness	The content is relatively brief but includes boilerplate troubleshooting sections that explain generic concepts Claude already knows (like 'rephrase with explicit keywords'). The troubleshooting section adds little value specific to this skill.	2 / 3
Actionability	The skill provides no concrete code, CSS/Tailwind examples, or executable guidance. Despite claiming to cover 'layout, responsive, Tailwind tokens', it contains zero actual design patterns, code snippets, or specific implementation details.	1 / 3
Workflow Clarity	A 3-step workflow is provided but it's extremely generic ('identify', 'apply', 'validate') with no specific validation criteria or checkpoints. The actual design workflow for implementing visual designs is not described.	2 / 3
Progressive Disclosure	References a rules index file which is good structure, but the main content itself is mostly meta-instructions about when to use the skill rather than actual design system content. The referenced file may contain the real content, but this file provides almost no standalone value.	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

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.