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.

35

Quality

30%

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 valuable and opinionated design knowledge, but it suffers from significant verbosity — explaining concepts Claude already understands, repeating anti-patterns across multiple sections, and including redundant 'tips' and 'pitfalls' sections. The output template is the strongest element, providing a concrete artifact structure, but the lack of validation steps and monolithic organization weaken its effectiveness as an actionable skill.

Suggestions

Cut the content by 40-50%: remove 'Overview' explanation of what Stitch is, eliminate 'Tips for Success' and 'Common Pitfalls' sections (they restate rules already given), and merge redundant anti-pattern mentions into a single canonical list.

Add a validation checklist step after generation: e.g., 'Verify: ☐ Only 1 accent color ☐ No banned fonts ☐ All colors have hex codes ☐ Anti-patterns section populated ☐ Responsive rules included'.

Split into multiple files: keep SKILL.md as a concise overview with the output template, and move detailed rules (color constraints, typography rules, component specs, anti-patterns) into separate reference files like COLOR_RULES.md, TYPOGRAPHY.md, ANTI_PATTERNS.md.

Add a complete worked example: show a real user prompt (e.g., 'minimalist finance dashboard') and the full generated DESIGN.md output, so Claude can pattern-match rather than interpret abstract instructions.

DimensionReasoningScore

Conciseness

The skill is extremely verbose at ~250+ lines. It over-explains concepts Claude already knows (what Stitch is, what a design system is, what CSS Grid vs Flexbox is), includes lengthy 'Tips for Success' and 'Common Pitfalls' sections that restate earlier content, and the 'Best Practices' section is largely redundant. The atmosphere description methodology, while novel, could be conveyed in half the tokens.

1 / 3

Actionability

The skill provides a concrete output template (DESIGN.md structure) with specific hex codes, font names, and CSS values, which is good. However, it lacks executable code or commands — there's no step-by-step generation process, no script to run, and the 'Analysis & Synthesis Instructions' are descriptive rather than procedural. The output format example is helpful but is itself a template rather than a fully worked example.

2 / 3

Workflow Clarity

The numbered sections (1-9) provide a clear sequence for generating the DESIGN.md, but there are no validation checkpoints — no way to verify the generated output meets the constraints, no feedback loop for checking anti-patterns are actually excluded, and no verification step before delivering the final DESIGN.md. For a generative skill producing a complex artifact, validation steps would be important.

2 / 3

Progressive Disclosure

The entire skill is a monolithic wall of text with no references to supporting files. The detailed component stylings, anti-patterns list, typography rules, and motion philosophy could each be separate reference files. With no bundle files provided and everything inline, the content is poorly structured for progressive disclosure — a reader must consume everything at once.

1 / 3

Total

6

/

12

Passed

Description

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 tool (Google Stitch) and output artifact (DESIGN.md), which provides some distinctiveness, but it is heavily laden with marketing-style buzzwords ('premium', 'anti-generic', 'perpetual micro-motion') that obscure rather than clarify capabilities. The complete absence of a 'Use when...' clause significantly weakens its utility for skill selection, and the specific actions beyond file generation are unclear.

Suggestions

Add an explicit 'Use when...' clause with natural trigger terms, e.g., 'Use when the user asks to create a design system, generate a DESIGN.md file, set up UI standards for Google Stitch, or define styling guidelines for a project.'

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 typography scales, color palettes, layout grids, animation tokens, and performance constraints.'

Include common user-facing trigger terms such as 'UI design', 'styling guide', 'theme', 'component standards', or 'design tokens' to improve keyword coverage.

DimensionReasoningScore

Specificity

It names the domain (design system for Google Stitch) and mentions some specific aspects (typography, color, layouts, micro-motion, performance), but these read more like buzzwords than concrete actions. The only concrete action is 'Generates agent-friendly DESIGN.md files'.

2 / 3

Completeness

It describes what it does (generates DESIGN.md files with certain standards) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also somewhat vague with buzzword-heavy language, so this scores a 1.

1 / 3

Trigger Term Quality

Includes some relevant terms like 'DESIGN.md', 'Google Stitch', 'design system', 'typography', 'color', and 'layouts'. However, many terms are jargon-heavy ('perpetual micro-motion', 'hardware-accelerated performance', 'anti-generic UI standards') rather than natural phrases a user would say. Missing common variations like 'UI design', 'styling', 'theme', 'component design'.

2 / 3

Distinctiveness Conflict Risk

The mention of 'Google Stitch' and 'DESIGN.md' provides some distinctiveness, but terms like 'design system', 'typography', 'color', and 'layouts' could overlap with other UI/design-related skills. The niche is somewhat clear but not sharply delineated.

2 / 3

Total

7

/

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.