coda-ui-skills

Coda's UI design system. Use when building interfaces inspired by Coda's aesthetic - light 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/coda/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 specific concrete actions - it describes the system but not what actions Claude should perform with it (e.g., generating components, applying styles, creating layouts). Adding concrete capabilities would strengthen it significantly.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Generates UI components, applies consistent styling, and creates layouts following Coda's design system.'

Expand trigger terms to include variations users might say, such as 'Coda-style', 'Coda theme', 'Coda look and feel', or 'design tokens'.

Dimension	Reasoning	Score
Specificity	Names the domain (UI design system) and mentions some specific elements (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 ('Coda's UI design system') and when ('Use when building interfaces inspired by Coda's aesthetic - light mode, Inter font, 4px grid') with an explicit 'Use when' clause and trigger conditions.	3 / 3
Trigger Term Quality	Includes some relevant terms like 'Coda', 'UI', 'design system', 'light mode', 'Inter font', and '4px grid', but misses common user phrases like 'Coda-style', 'Coda theme', 'design tokens', 'component library', or 'styling'.	2 / 3
Distinctiveness Conflict Risk	Very distinct niche - specifically targets Coda's design aesthetic with unique identifiers (Inter font, 4px grid, Coda brand). Unlikely to conflict with other design system skills unless there are multiple Coda-related 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 structured design system reference with concrete values for colors, typography, spacing, and interactive states, which is useful for building Coda-style interfaces. However, it appears to be largely auto-extracted from a design analysis tool without sufficient curation—several values seem incorrect (0px input height, black for raised surfaces/hover states, destructive color being a light pink), and it lacks executable code examples showing implementation. The document would benefit from validation of extracted values, practical code snippets, and splitting detailed reference tables into separate files.

Suggestions

Add executable code examples showing implementation (e.g., CSS custom properties setup, Tailwind config, or a sample component) to improve actionability

Review and correct seemingly auto-extracted values that appear incorrect: 0px input height, #000000 for surface-raised and hover backgrounds, #F1E7E2 as destructive color

Split detailed reference tables (full text styles, layout patterns) into a separate REFERENCE.md file and keep SKILL.md as a concise overview with the most essential tokens

Add a brief workflow section explaining how to apply these constraints when building a new component (e.g., 'Start with surface-base background, apply 4px grid spacing, use semantic color tokens')

Dimension	Reasoning	Score
Conciseness	The skill contains useful design tokens and constraints, but includes some redundant information (e.g., 'Count' column always showing 1, detected layout patterns with raw pixel values that seem auto-generated rather than curated, and the full font size list that largely duplicates the text styles table). Some values seem questionable (0px input height, #000000 for hover backgrounds and raised surfaces) suggesting raw extraction 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 implement these in practice (e.g., Tailwind config, CSS custom properties setup, or component code). The MUST/SHOULD/NEVER constraints are specific but some values appear incorrect or auto-extracted without validation (0px input height, black for raised surfaces and hover states).	2 / 3
Workflow Clarity	The skill is organized as a reference document rather than a workflow, which is appropriate for a design system. However, there's no guidance on how to apply these constraints in sequence when building a new component or page, and no validation steps to verify the output matches the design system. The 'When to Apply' section is minimal.	2 / 3
Progressive Disclosure	Content is organized into clear sections with good headers and tables, but it's a monolithic document that could benefit from splitting detailed token tables and component specs into separate reference files. At ~150 lines with extensive tables, the inline detail level is high for a SKILL.md overview.	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.