framer-ui-skills
Framer's UI design system. Use when building interfaces inspired by Framer's aesthetic - dark mode, Inter font, 4px grid.
70
62%
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/framer/SKILL.mdQuality
Discovery
75%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 effectively communicates when to use the skill with a clear 'Use when...' clause and distinctive Framer-specific details. However, it lacks concrete action verbs describing what the skill actually does beyond being a 'design system' - it would benefit from listing specific capabilities like creating components, applying styles, or generating layouts.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Creates UI components, applies consistent styling, and generates layouts following Framer's design system.'
Include additional natural trigger terms users might say, such as 'UI components', 'design tokens', 'theme', 'styling', or 'Framer-style'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific elements (dark mode, Inter font, 4px grid), but doesn't list concrete actions like 'create components', 'apply styles', or 'generate layouts'. | 2 / 3 |
Completeness | Answers both 'what' (Framer's UI design system) and 'when' (Use when building interfaces inspired by Framer's aesthetic) with an explicit 'Use when...' clause and specific trigger conditions. | 3 / 3 |
Trigger Term Quality | Includes 'Framer', 'dark mode', 'Inter font', and '4px grid' which are relevant but somewhat niche. Missing common user terms like 'UI components', 'design tokens', 'styling', or 'theme' that users might naturally say. | 2 / 3 |
Distinctiveness Conflict Risk | The specificity to Framer's aesthetic with concrete details (dark mode, Inter font, 4px grid) creates a clear niche that is unlikely to conflict with other design system skills or generic UI skills. | 3 / 3 |
Total | 10 / 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 skill provides a comprehensive design system reference with specific values and clear constraint language (MUST/SHOULD/NEVER), which is valuable. However, it reads more like auto-extracted design audit data than curated guidance—some sections include raw detected values (22 colors, element widths like '22px, 21px, 43px') without clear rationale. The lack of executable code examples (CSS, Tailwind classes, or component snippets) significantly limits actionability for an AI agent building interfaces.
Suggestions
Add executable code examples: include a Tailwind config snippet for the design tokens, a sample component in JSX/HTML+CSS, or at minimum CSS custom property declarations that can be copy-pasted.
Curate the auto-detected data: remove or consolidate raw audit artifacts (e.g., the 3-9px font sizes, the 'Count' column, inconsistent element widths) and present only the intentional design scale values.
Add a quick-start section showing how to scaffold a basic Framer-style page with the key constraints applied, giving Claude a concrete starting point.
Split the detailed reference tables (all text styles, full color palette) into a separate REFERENCE.md and keep SKILL.md as a concise overview with the most important constraints and links.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with well-structured tables and clear MUST/SHOULD/NEVER constraints, but includes some redundancy (e.g., 'Border Radius Reference' repeats the scale already listed above, font sizes list includes tiny sizes like 3-9px that seem auto-detected rather than curated, and the 'Count' column in text styles adds no value). The detected layout patterns and element widths feel like raw data dumps rather than curated guidance. | 2 / 3 |
Actionability | The skill provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for styling, but lacks executable code examples. No CSS/Tailwind snippets, no component code, no copy-paste ready implementations. The button component table has only one variant with mostly empty fields. Rules like 'lighten background by 10%' are somewhat vague without specifying the mechanism. | 2 / 3 |
Workflow Clarity | The skill is primarily a reference/constraint document rather than a multi-step workflow, so explicit sequencing is less critical. However, there's no guidance on the order of applying these constraints when building a UI, no validation steps (e.g., how to verify contrast ratios meet 4.5:1), and no feedback loops for checking compliance with the design system. | 2 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers and tables, making it easy to scan. However, it's a fairly long monolithic document (~150 lines of dense reference material) that could benefit from splitting detailed token tables and typography references into separate files, with the SKILL.md serving as a concise overview with links. | 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.
- Repository
- ihlamury/design-skills
- Commit
126714e
- 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.