Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
60
50%
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/redesign-skill/SKILL.mdQuality
Discovery
50%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 communicates a reasonable sense of what the skill does—upgrading existing web designs to higher quality—but relies on subjective terms like 'premium quality' and 'high-end design standards' rather than concrete actions. It lacks an explicit 'Use when...' clause, which hurts completeness, and could benefit from more natural trigger terms that users would actually say when requesting design improvements.
Suggestions
Add an explicit 'Use when...' clause, e.g., 'Use when the user wants to improve, polish, or upgrade the visual design of an existing website or app, or mentions their site looks generic or AI-generated.'
Include more natural trigger terms users would say, such as 'make it look professional', 'UI polish', 'redesign', 'improve styling', 'looks like AI generated', 'visual upgrade'.
Replace vague phrases like 'premium quality' and 'high-end design standards' with specific actions, e.g., 'Refines typography, spacing, color palettes, hover states, and visual hierarchy.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (website/app design upgrades) and some actions (audits, identifies patterns, applies standards), but the actions are somewhat vague—'premium quality' and 'high-end design standards' are subjective and not concrete. It doesn't list specific transformations like 'improves typography, spacing, color palettes, animations.' | 2 / 3 |
Completeness | The 'what' is partially addressed (upgrades design, audits, identifies patterns), but there is no explicit 'Use when...' clause or equivalent trigger guidance. The 'when' is only implied by the description of capabilities, which caps this at 2 per the rubric guidelines. | 2 / 3 |
Trigger Term Quality | Includes some relevant terms like 'websites', 'apps', 'CSS framework', 'vanilla CSS', and 'design', but misses many natural user phrases like 'make it look better', 'UI polish', 'redesign', 'improve styling', 'looks generic', or 'professional design'. The phrase 'generic AI patterns' is somewhat niche. | 2 / 3 |
Distinctiveness Conflict Risk | The focus on upgrading existing designs and identifying 'generic AI patterns' provides some distinctiveness, but terms like 'websites and apps' and 'CSS' are broad enough to overlap with general web development or CSS styling skills. The 'premium quality' angle helps but isn't sharply delineated. | 2 / 3 |
Total | 8 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a comprehensive design audit checklist with strong domain knowledge and many specific, useful patterns to identify and fix. Its main weaknesses are the monolithic structure (everything in one file), lack of executable code examples for the fixes it recommends, and missing validation/verification steps for a skill that modifies existing codebases. The content would benefit from being split into a concise overview with references to detailed sub-files.
Suggestions
Add concrete, copy-paste ready code snippets for the most common fixes (e.g., a complete CSS snippet for typography upgrades, a hover state template, a skeleton loader component) rather than just describing what to do.
Split the audit categories into separate reference files (e.g., TYPOGRAPHY.md, COLOR.md, LAYOUT.md) and keep SKILL.md as a concise overview with the workflow and links to each audit area.
Add explicit validation checkpoints to the workflow, such as 'After each fix category, verify the page renders correctly in browser preview' and 'Check for CSS specificity conflicts or broken responsive layouts before proceeding to the next category.'
Trim items that explain concepts Claude already knows (semantic HTML elements, what alt text is, what z-index does) to just the actionable instruction.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extensive and most content earns its place as a reference checklist, but it's quite long (~300+ lines) and some items explain things Claude already knows (e.g., 'Use semantic HTML: <nav>, <main>, <article>' or explaining what orphaned words are). The upgrade techniques section adds significant length with ideas that are more inspirational than actionable. | 2 / 3 |
Actionability | The skill provides specific CSS properties, hex values, and concrete patterns to look for and fix, which is good. However, it lacks executable code examples — most guidance is descriptive ('Add subtle noise, grain, or micro-patterns') rather than providing copy-paste ready CSS/code snippets. The audit checklist format is actionable for diagnosis but the fixes are often vague. | 2 / 3 |
Workflow Clarity | The 3-step workflow (Scan → Diagnose → Fix) and the Fix Priority section provide clear sequencing. However, there are no validation checkpoints — no steps like 'verify the page still renders correctly' or 'check for regressions after each change.' For a skill that modifies existing codebases, the instruction to 'test after every change' in the Rules section is too brief and lacks specifics on how to validate. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear headers and subsections, making it scannable. However, it's a monolithic document — the extensive audit checklists, upgrade techniques, and component patterns could be split into separate reference files with the SKILL.md serving as an overview. At its current length, it consumes significant context window space. | 2 / 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.
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.