n26-ui-skills

N26's UI design system. Use when building interfaces inspired by N26's aesthetic - dark mode, Inter font, 4px grid.

Quality

62%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Quality

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 well-structured with a clear 'Use when' clause and distinctive brand-specific triggers. Its main weakness is the lack of concrete actions—it describes the design system's characteristics but not what specific tasks it enables (e.g., creating components, styling pages). The trigger terms are adequate but could benefit from broader coverage of related user queries.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Creates buttons, cards, navigation bars, and form elements following N26's design system.'

Expand trigger terms to include related phrases users might say, such as 'banking UI', 'fintech design', 'dark theme components', or 'N26-style layout'.

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 buttons', 'style forms', or 'generate component layouts'.	2 / 3
Completeness	Clearly answers both what ('N26's UI design system') and when ('Use when building interfaces inspired by N26's aesthetic - dark mode, Inter font, 4px grid'), with an explicit 'Use when' clause and specific trigger conditions.	3 / 3
Trigger Term Quality	Includes some relevant keywords like 'N26', 'dark mode', 'Inter font', '4px grid', and 'UI design system', but misses common variations users might say such as 'banking app design', 'fintech UI', 'component library', or 'design tokens'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive due to the specific brand reference (N26) and concrete design parameters (dark mode, Inter font, 4px grid), making it very unlikely to conflict with other design system 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 is a well-structured design system reference with clear constraint language (MUST/SHOULD/NEVER) and specific values, making it a useful specification document. Its main weaknesses are the lack of executable code examples (no CSS, Tailwind config, or component snippets) and some data redundancy. Adding implementation examples and splitting detailed reference tables into separate files would significantly improve it.

Suggestions

Add at least one executable code example—e.g., CSS custom properties setup with the semantic tokens, a Tailwind config snippet, or a sample button component implementing the design system.

Extract the detailed text styles table and typography reference into a separate REFERENCE.md file, keeping only the key styles (heading-1, body) in the main skill.

Add a brief implementation workflow: e.g., 1) Set up CSS variables from token table, 2) Configure font loading for Inter, 3) Verify contrast ratios with a tool, 4) Apply spacing grid.

Remove low-signal metadata like 'Count' columns, 'detected lightness: 0', and 'currently 18 colors detected' which describe analysis artifacts rather than actionable guidance.

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., 'Typography Reference' section repeats info from the Text Styles table, detected layout patterns add marginal value, and some token values like 'detected lightness: 0' and 'Count' columns are noise). The raw data dumps (all font sizes, element widths) could be tightened.	2 / 3
Actionability	Provides specific values (hex codes, pixel sizes, font weights) which are concrete and actionable for UI implementation, but lacks any executable code examples—no CSS snippets, no Tailwind config, no component code. For a UI design system skill, at least one concrete implementation example (e.g., a button component or CSS custom properties setup) would make it fully actionable.	2 / 3
Workflow Clarity	The 'When to Apply' section provides clear triggers, and the MUST/SHOULD/NEVER hierarchy creates implicit ordering of priorities. However, there's no workflow for actually implementing these guidelines—no step-by-step process for setting up the design system, no validation steps to check compliance, and no feedback loop for verifying contrast ratios or grid alignment.	2 / 3
Progressive Disclosure	Content is well-organized with clear section headers and tables, making it scannable. However, it's a fairly long monolithic document (~150 lines of detailed specs) with no references to external files for detailed component libraries, extended examples, or implementation guides. The detailed text styles table and spacing scales could be split into reference files.	2 / 3
	Total	8 / 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: ihlamury/design-skills
Commit: 126714e

Reviewed: 8 days 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.