webflow-ui-skills

Webflow's UI design system. Use when building interfaces inspired by Webflow's aesthetic - dark mode, Inter font, 4px grid.

Quality

64%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/webflow/SKILL.md

Quality

Discovery

67%

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 has a clear 'Use when...' clause which satisfies completeness, and the Webflow branding provides some distinctiveness. However, it lacks concrete action verbs describing what the skill actually does (e.g., generates components, applies styles) and could benefit from more natural trigger terms users would say when needing this skill.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Generates styled UI components, layouts, and pages following Webflow's design system'

Expand trigger terms with natural user language like 'dashboard UI', 'styled components', 'Webflow-style theme', or 'modern dark interface'

Dimension	Reasoning	Score
Specificity	Names the domain (UI design system) and mentions some specific elements (dark mode, Inter font, 4px grid), but doesn't list concrete actions like 'create layouts', 'style components', or 'generate CSS'. It describes attributes rather than actions.	2 / 3
Completeness	Clearly answers both 'what' (Webflow's UI design system) and 'when' (Use when building interfaces inspired by Webflow's aesthetic - dark mode, Inter font, 4px grid). The explicit 'Use when...' clause with trigger conditions is present.	3 / 3
Trigger Term Quality	Includes 'Webflow', 'dark mode', 'Inter font', and '4px grid' which are somewhat relevant, but misses common user terms like 'UI components', 'design tokens', 'styling', 'theme', or 'dashboard layout'. A user might not naturally say '4px grid' when requesting this skill.	2 / 3
Distinctiveness Conflict Risk	The Webflow branding gives it some distinctiveness, but 'dark mode' and 'UI design system' could overlap with other design system or theming skills. The mention of specific attributes (Inter font, 4px grid) helps somewhat but 'building interfaces' is broad.	2 / 3
	Total	9 / 12 Passed

Implementation

62%

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

This is a well-structured design system reference with clear constraints using MUST/SHOULD/NEVER language and specific values. Its main weaknesses are the lack of executable code examples (CSS/Tailwind/component snippets) and some raw data that could be better curated or moved to reference files. The content would benefit from concrete implementation examples rather than purely declarative specifications.

Suggestions

Add executable code examples - e.g., a Tailwind config snippet for the color tokens, a CSS custom properties block, or a sample button component implementing the specified styles

Move detailed reference data (full font size list, text styles table, detected layout patterns) to a separate REFERENCE.md file and link to it from the main skill

Remove or consolidate redundant sections like the 'Border Radius Reference' which repeats the scale already listed in the Borders section

Dimension	Reasoning	Score
Conciseness	The skill is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundant information (e.g., 'Border Radius Reference' section repeats what's already in the Borders section, detected layout patterns with arbitrary pixel values, and the full font size list adds marginal value). Some sections like the extensive text styles table with count=1 entries feel like raw data dumps rather than curated guidance.	2 / 3
Actionability	The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for design implementation. However, it lacks executable code examples - no CSS/Tailwind snippets, no component code, no copy-paste ready implementations. The guidance is specific but declarative rather than executable.	2 / 3
Workflow Clarity	This is a design system reference skill, not a multi-step workflow. The single task (applying Webflow-style design constraints) is unambiguous with clear rules organized by category. The MUST/SHOULD/NEVER hierarchy provides clear priority ordering, and the 'When to Apply' section clearly scopes usage.	3 / 3
Progressive Disclosure	The content is well-organized with clear section headers and tables, but it's a fairly long monolithic document. Some sections (like the full typography reference with 22 font sizes, or the extensive text styles table) could be split into reference files. No external file references are provided for deeper dives into specific areas like components or layout patterns.	2 / 3
	Total	9 / 12 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: ihlamury/design-skills
Commit: 126714e

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