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.
44
30%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/stitch-skill/SKILL.mdQuality
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 artifact (DESIGN.md), which provides some distinctiveness, but it relies heavily on buzzwords like 'premium', 'anti-generic', and 'perpetual micro-motion' that add fluff without clarity. The critical omission is any 'Use when...' guidance, making it difficult for Claude to know when to select this skill from a pool of alternatives.
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, or set up UI standards for a Google Stitch project.'
Replace buzzwords like 'premium, anti-generic UI standards' and 'perpetual micro-motion' with concrete, actionable descriptions of what the skill produces, e.g., 'defines spacing scales, color palettes, font stacks, and animation tokens.'
Include common user-facing trigger terms such as 'design system', 'UI guidelines', 'style guide', 'design tokens', or 'component library' to improve keyword coverage.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (design system for Google Stitch) and mentions several specific aspects (typography, color, layouts, micro-motion, performance), but the actions are somewhat vague — 'Generates agent-friendly DESIGN.md files' is the only concrete action. Terms like 'premium, anti-generic UI standards' are more buzzwordy than actionable. | 2 / 3 |
Completeness | 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 rubric guidelines, missing 'Use when' should cap completeness at 2, and the 'what' is also somewhat vague, so this scores a 1. | 1 / 3 |
Trigger Term Quality | Includes some relevant keywords like 'DESIGN.md', 'Google Stitch', 'typography', 'color', 'layouts', but many are jargon-heavy ('perpetual micro-motion', 'hardware-accelerated performance', 'semantic design system') rather than natural terms a user would say. Missing common variations like 'UI design', 'design tokens', 'component styling'. | 2 / 3 |
Distinctiveness Conflict Risk | The mention of 'Google Stitch' and 'DESIGN.md' provides some distinctiveness, but the broader design system language (typography, color, layouts) could overlap with other UI/design-related skills. The niche is somewhat clear 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.
This skill contains genuinely useful and opinionated design knowledge — the specific bans, font recommendations, color constraints, and motion specs are valuable. However, it suffers from significant verbosity (explaining concepts, redundant sections like Tips/Pitfalls/Best Practices that restate the main content), lack of validation steps, and poor progressive disclosure with everything packed into one massive file. The content would benefit greatly from being trimmed by ~40% and split into referenced sub-documents.
Suggestions
Remove the 'Best Practices', 'Tips for Success', and 'Common Pitfalls' sections — they largely restate what's already in the main instructions and add ~40 lines of redundant content.
Split detailed specifications (color rules, typography rules, component stylings, motion specs) into separate referenced files (e.g., COLORS.md, TYPOGRAPHY.md) and keep SKILL.md as a concise overview with the workflow and output template.
Add a validation step after DESIGN.md generation: e.g., a checklist to verify all anti-patterns are explicitly listed, all colors have hex codes + roles, and the atmosphere section uses the density/variance/motion scales.
Trim the Overview section to 1-2 sentences — remove explanations of what Stitch is and how it interprets design, which Claude can learn from context.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~200+ lines. The Overview section explains what Stitch is and how it works (Claude knows this). Sections like 'Best Practices', 'Tips for Success', and 'Common Pitfalls' are largely redundant with the main instructions. Phrases like 'battle-tested anti-slop frontend engineering directives' and extensive explanations of what DESIGN.md is add no actionable value. | 1 / 3 |
Actionability | Provides concrete design rules (specific hex codes, font names, banned patterns, CSS properties) and a clear output template, which is good. However, there's no executable code or commands — the skill is instruction-based but many directives are descriptive rather than precisely actionable (e.g., 'Evaluate the target project's intent. Use evocative adjectives from the taste spectrum'). | 2 / 3 |
Workflow Clarity | The 9-step analysis process provides a clear sequence, and the output format section gives a concrete template. However, there are no validation checkpoints — no step to verify the generated DESIGN.md is correct, no feedback loop for checking if Stitch interprets the output correctly, and no verification that banned patterns aren't present in the output. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with everything inline. The output template, anti-patterns list, component stylings, and detailed rules for 9 different dimensions are all crammed into a single file with no references to supplementary documents. The anti-patterns list appears twice (sections 9 and the output format). Content like detailed typography rules or motion specs could be split into referenced files. | 1 / 3 |
Total | 6 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
840b46b
Table of Contents
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.