CtrlK
BlogDocsLog inGet started
Tessl Logo

stitch-design-taste

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

37

Quality

33%

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 ./skills/stitch-skill/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

27%

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

This skill contains genuinely useful, opinionated design knowledge with specific values and constraints, but it suffers from significant verbosity and poor information architecture. The monolithic structure forces all detailed specifications into a single file, and the content includes unnecessary explanations (tips, pitfalls, best practices) that Claude doesn't need. The workflow lacks validation steps to verify the generated DESIGN.md works correctly with Stitch.

Suggestions

Split detailed specifications (color rules, typography rules, component behaviors, anti-patterns, motion specs) into separate reference files and make SKILL.md a concise overview with clear links to each.

Remove the 'Tips for Success', 'Common Pitfalls to Avoid', and 'Best Practices' sections — these are generic advice Claude already knows. Fold any truly unique guidance into the relevant workflow steps.

Add a validation step after generating DESIGN.md — e.g., a checklist to verify all required sections are present, all hex codes are valid, no banned patterns appear, and the accent count constraint is met.

Include a concrete worked example showing a real user input (e.g., 'a fintech dashboard for crypto traders') mapped to a complete, filled-out DESIGN.md output, rather than just the template skeleton.

DimensionReasoningScore

Conciseness

The skill is extremely verbose at ~200+ lines. It explains concepts Claude already knows (what a design system is, what hex codes are, what CSS Grid is), includes extensive 'Tips for Success' and 'Common Pitfalls' sections that are largely obvious, and the 'Overview' section spends tokens explaining what Stitch is and how it works. The 'Best Practices' section states things like 'Be Consistent' and 'Be Precise' which are generic advice Claude doesn't need.

1 / 3

Actionability

The skill provides concrete values (hex codes, spring physics parameters, font names, specific CSS patterns like `min-h-[100dvh]`) and a clear output template, which is good. However, it lacks executable code or commands — there's no script to run, no programmatic workflow, and the output format section is a template rather than a fully worked example with real project context showing input→output transformation.

2 / 3

Workflow Clarity

The 9-step analysis process is clearly sequenced and logically ordered (atmosphere → color → typography → components → layout → motion → anti-patterns). However, there are no validation checkpoints — no step to verify the generated DESIGN.md is well-formed, no feedback loop for testing against Stitch, and no verification that the output actually produces the intended results when fed to Stitch.

2 / 3

Progressive Disclosure

The entire skill is a monolithic wall of text with no references to supporting files. All detailed specifications (color rules, typography rules, motion specs, anti-patterns, component behaviors, responsive rules) are inlined in a single massive document. The color palette details, typography rules, component stylings, and anti-patterns could each be separate reference files, with SKILL.md serving as a concise overview pointing to them.

1 / 3

Total

6

/

12

Passed

Description

40%

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 targets a very specific niche (Google Stitch DESIGN.md generation) which gives it strong distinctiveness, but it relies heavily on buzzwords like 'anti-generic', 'perpetual micro-motion', and 'premium' that add flair without clarity. The critical weakness is the complete absence of a 'Use when...' clause, making it unclear when Claude should select this skill over others.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks to create or update a DESIGN.md file for Google Stitch, set up UI design guidelines, or establish a design system for an agent-based application.'

Replace buzzword-heavy phrases like 'anti-generic UI standards' and 'perpetual micro-motion' with concrete, actionable descriptions of what the skill produces, e.g., 'defines spacing scales, animation tokens, color palettes, and typography rules'.

Include natural trigger terms users might actually say, such as 'design tokens', 'UI guidelines', 'style guide', 'design file', or 'Stitch project setup'.

DimensionReasoningScore

Specificity

It names the domain (design system for Google Stitch) and mentions some actions ('Generates agent-friendly DESIGN.md files') along with design aspects (typography, color, layouts, micro-motion, performance), but the specific actions are limited to just 'generates' and the rest are buzzword-heavy descriptors rather than concrete actionable capabilities.

2 / 3

Completeness

The description answers 'what' (generates DESIGN.md files with specific design standards) but completely lacks any 'Use when...' clause or explicit trigger guidance for when Claude should select this skill. Per the rubric, a missing 'Use when...' clause should cap completeness at 2, and since the 'when' is entirely absent, this scores a 1.

1 / 3

Trigger Term Quality

Includes some relevant keywords like 'DESIGN.md', 'Google Stitch', 'design system', 'typography', 'color', 'layouts', but many terms are jargon-heavy ('anti-generic UI standards', 'perpetual micro-motion', 'hardware-accelerated performance') and miss natural user phrases. A user would more likely say 'create a design file' or 'set up UI guidelines' than these specialized terms.

2 / 3

Distinctiveness Conflict Risk

The description is highly specific to 'Google Stitch' and 'DESIGN.md files' with a very particular design philosophy, making it clearly distinguishable from other skills and unlikely to conflict with general design or coding skills.

3 / 3

Total

8

/

12

Passed

Validation

100%

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

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
Leonxlnx/taste-skill
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.