airbnb-ui-skills
Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light 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/airbnb/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 is concise and clearly scoped to Airbnb's design system with an explicit 'Use when' clause and distinctive triggers. Its main weakness is the lack of specific concrete actions (what the skill actually does beyond being a design system) and limited trigger term coverage for how users might naturally request Airbnb-style interfaces.
Suggestions
Add specific concrete actions like 'Generates components, styles buttons, creates layouts, and applies color tokens following Airbnb's design system'.
Expand trigger terms to include natural variations like 'Airbnb-style', 'Airbnb theme', 'Airbnb look and feel', 'clean minimal UI', or 'booking platform design'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design system) and mentions some specific details (light mode, Inter font, 4px grid), but doesn't list concrete actions like 'create components', 'style buttons', or 'build layouts'. | 2 / 3 |
Completeness | Clearly answers both what ('Airbnb's UI design system') and when ('Use when building interfaces inspired by Airbnb's aesthetic') with explicit trigger guidance including specific details about light mode, Inter font, and 4px grid. | 3 / 3 |
Trigger Term Quality | Includes 'Airbnb' and 'UI design system' as natural keywords, plus some specifics like 'Inter font' and '4px grid', but misses common variations users might say like 'Airbnb-style', 'Airbnb theme', 'Airbnb look and feel', 'components', or 'design tokens'. | 2 / 3 |
Distinctiveness Conflict Risk | Very distinct niche - specifically Airbnb's design system aesthetic. The mention of Airbnb, Inter font, and 4px grid makes it clearly distinguishable from other UI/design 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 token reference with clear MUST/SHOULD/NEVER constraints, which is valuable for maintaining consistency. However, it reads more like a raw design audit export than a curated skill—duplicate rows, suspicious values (0px input height, arbitrary widths), and lack of executable code examples reduce its practical utility. Trimming redundant data, adding code snippets, and splitting reference tables into separate files would significantly improve it.
Suggestions
Add executable code examples showing how to apply the design tokens (e.g., a CSS custom properties block, Tailwind config, or a sample React component using the tokens).
Clean up suspicious/raw audit values: '0px' input height, near-duplicate body-secondary rows, and arbitrary element widths (249px, 97px, 78px) that appear to be measurements rather than intentional design constraints.
Move detailed reference tables (full text styles list, font sizes, layout patterns) into a separate REFERENCE.md file and link to it from the main skill.
Add a quick-start section at the top with a minimal component example that demonstrates the core constraints (Inter font, 4px grid, surface-base background, border-radius scale) in action.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful design tokens and constraints but is overly verbose in places—the text styles table has many near-duplicate rows (body-secondary repeated 6 times with minor color/weight variations), and some reference data (font sizes list, detected layout patterns) adds marginal value. The 'Count' column and raw detection artifacts feel like unprocessed audit output rather than curated guidance. | 2 / 3 |
Actionability | Provides concrete values (hex codes, pixel sizes, specific CSS properties) which is good, but lacks executable code examples showing how to apply these tokens in practice (e.g., a Tailwind config snippet, CSS custom properties block, or a sample component). Some values are questionable—'0px height for input fields' and inconsistent element widths like '249px, 24px, 97px'—which would confuse rather than guide implementation. | 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, the 'When to Apply' section is vague, and there's no guidance on how to compose these constraints when building a component end-to-end. The MUST/SHOULD/NEVER hierarchy provides some implicit ordering of priorities but no validation steps. | 2 / 3 |
Progressive Disclosure | Content is organized into clear sections with headers and tables, which aids scanning. However, the document is quite long and monolithic—detailed reference tables (all text styles, all border radii, layout patterns) could be split into separate reference files. No external file references are provided for deeper dives. | 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.