descript-ui-skills

Descript's UI design system. Use when building interfaces inspired by Descript'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/descript/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 clearly scoped to a specific brand's design system, with an explicit 'Use when' clause that aids skill selection. Its main weakness is the lack of concrete actions—it describes what the system is but not what specific tasks it enables (e.g., creating components, applying themes, generating layouts). Adding more action-oriented language and natural trigger terms would strengthen it.

Suggestions

Add concrete actions the skill performs, e.g., 'Creates UI components, applies theme tokens, and generates styled layouts following Descript's design system.'

Expand trigger terms to include variations users might say, such as 'design tokens', 'UI components', 'theme', 'styling', or 'component library'.

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 styling', or 'generate layouts'.	2 / 3
Completeness	Clearly answers both what ('Descript's UI design system') and when ('Use when building interfaces inspired by Descript's aesthetic - dark mode, Inter font, 4px grid') with explicit trigger guidance.	3 / 3
Trigger Term Quality	Includes some relevant keywords like 'dark mode', 'Inter font', '4px grid', and 'Descript', but misses common variations users might say such as 'design tokens', 'component library', 'UI components', 'theme', or 'styling'.	2 / 3
Distinctiveness Conflict Risk	Highly distinctive due to the specific brand reference ('Descript') and concrete design specifications (dark mode, Inter font, 4px grid), making it unlikely to conflict with generic UI or 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 skill provides a comprehensive design system reference with specific, opinionated values and clear constraint language (MUST/SHOULD/NEVER). Its main weaknesses are the lack of executable code examples showing implementation and some redundancy in reference sections. The content reads more like a design spec than an actionable skill — adding implementation snippets and a brief workflow for building components would significantly improve it.

Suggestions

Add executable code examples (CSS custom properties setup, Tailwind config, or React component snippets) showing how to implement the design tokens

Remove redundant reference sections (Border Radius Reference repeats Borders section; Typography Reference repeats the Text Styles table)

Add a brief workflow section: e.g., '1. Set up CSS variables from token table → 2. Configure typography → 3. Verify contrast ratios meet 4.5:1 → 4. Build components'

Consider splitting the detailed token tables into a separate TOKENS.md reference file, keeping SKILL.md as a concise overview with key 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' section repeats the scale already listed in Borders, 'Typography Reference' repeats font families and sizes already shown in the table). The detected layout patterns and element widths feel like raw data dumps rather than curated guidance.	2 / 3
Actionability	Provides specific values (hex codes, pixel sizes, font weights) which are concrete, but lacks executable code examples showing how to implement these design tokens in CSS/Tailwind/React. The guidance is specific enough to act on but would benefit from copy-paste ready code snippets for common patterns like setting up the color scheme or typography.	2 / 3
Workflow Clarity	The 'When to Apply' section provides clear triggers, and the MUST/SHOULD/NEVER hierarchy creates implicit priority ordering. However, there's no workflow for actually building a component or page — no sequenced steps for how to start implementing a Descript-style interface, and no validation checkpoints (e.g., checking contrast ratios, verifying 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 file that could benefit from splitting detailed token tables and component specs into separate reference files, with the SKILL.md serving as a concise overview with links.	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.