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.

Quality

30%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Quality

Discovery

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 format (DESIGN.md) but relies heavily on buzzwords and marketing-style language ('premium', 'anti-generic', 'perpetual micro-motion') rather than concrete, actionable capabilities. It completely lacks a 'Use when...' clause, making it difficult for Claude to know when to select this skill. The description would benefit from clearer trigger terms and explicit usage guidance.

Suggestions

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

Replace buzzword-heavy phrases like 'anti-generic UI standards' and 'perpetual micro-motion' with concrete actions users would request, e.g., 'define color palettes, set typography scales, configure animation tokens, create layout grid specifications.'

Include natural trigger terms users might say, such as 'UI design', 'design tokens', 'styling guide', 'theme', or 'component styles' to improve keyword coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (design system for Google Stitch) and some actions (generates DESIGN.md files), and lists several design concepts (typography, color, layouts, micro-motion, performance), but these read more like buzzwords than concrete actionable capabilities. It doesn't clearly list multiple distinct user-facing actions.	2 / 3
Completeness	Describes what it does (generates DESIGN.md files with certain 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 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 keywords like 'Google Stitch', 'DESIGN.md', 'design system', 'typography', 'color', and 'layouts', but many terms are jargon-heavy ('anti-generic UI standards', 'perpetual micro-motion', 'hardware-accelerated performance') rather than natural phrases a user would say. Missing common variations like 'UI design', 'styling', 'theme'.	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 defined but not sharply delineated.	2 / 3
	Total	7 / 12 Passed

Implementation

27%

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

The skill contains genuinely useful and opinionated design knowledge with specific values and a clear output template, but it suffers significantly from verbosity — much of the content explains concepts Claude already understands (CSS properties, responsive design basics, UI component patterns). The lack of validation steps and the monolithic structure further weaken it. It would benefit greatly from aggressive trimming, splitting into reference files, and adding a concrete input→output example.

Suggestions

Cut the content by at least 50% — remove explanations of basic concepts (what CSS Grid is, what responsive design means, what skeleton loaders are) and keep only the opinionated constraints and specific values that Claude wouldn't know.

Add a concrete end-to-end example: show a sample user input (e.g., 'minimalist finance dashboard') and the exact DESIGN.md output it should produce, so Claude has a clear input→output mapping.

Split into supporting files: move the anti-patterns list to ANTI_PATTERNS.md, the output template to TEMPLATE.md, and the detailed component/typography rules to COMPONENTS.md, keeping SKILL.md as a concise overview with references.

Add a validation step: after generating the DESIGN.md, include a checklist to verify all anti-patterns are absent, all required sections are present, and hex codes/values are consistent throughout.

Dimension	Reasoning	Score
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 pads with unnecessary context like 'The generated DESIGN.md serves as the single source of truth...' and explanations of basic UI concepts.	1 / 3
Actionability	The skill provides specific values (hex codes, spring physics constants, font names, pixel values) and a concrete output template, which is good. However, it lacks executable code or commands — there's no actual generation script, no concrete input→output example showing how a user's vibe description maps to a completed DESIGN.md, and the 'Analysis & Synthesis Instructions' are more descriptive guidelines than executable steps.	2 / 3
Workflow Clarity	The 9-step numbered process provides a clear sequence for generating the DESIGN.md, and the output format template is well-structured. However, there are no validation checkpoints — no step to verify the generated DESIGN.md is valid, no feedback loop for testing the output in Stitch, and no verification that the anti-patterns are actually absent from the generated design.	2 / 3
Progressive Disclosure	This is a monolithic wall of text with no references to external files despite being complex enough to warrant splitting (e.g., anti-patterns list, color palette guidelines, typography rules, and the output template could each be separate reference files). Everything is inlined in one massive document with no bundle files to support it.	1 / 3
	Total	6 / 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: Leonxlnx/taste-skill
Commit: 3c7017d

Reviewed: about 6 hours 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.