design-first-dev

Follows Airbnb's design-led development and Figma's craft quality standards. Use when building user-facing features, making UI/UX decisions, determining when details matter, or applying design system thinking. Guides when to move fast vs when quality creates moats. Based on Brian Chesky staying in every design detail and Dylan Field's craft philosophy.

Quality

72%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./design-first-dev/SKILL.md

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill provides strong actionable guidance with excellent decision frameworks, templates, and checklists for design-led development. However, it's overly verbose with repetitive concepts and explanatory content that Claude doesn't need. The progressive disclosure could be improved by moving examples and detailed reference material to separate files.

Suggestions

Condense the Core Frameworks section by removing redundant explanations - the DO/DON'T blocks and examples often repeat the same point

Move Real-World Examples and Common Pitfalls to a separate reference file (e.g., references/design-led-examples.md) and link to it

Remove the 'When This Skill Activates' section - this is metadata that belongs in frontmatter or can be inferred from the skill content

Trim the Key Quotes section - these are inspirational but don't add actionable guidance

Dimension	Reasoning	Score
Conciseness	The skill contains useful frameworks but is verbose with repetitive explanations. The 'When This Skill Activates' section and multiple restatements of the same concepts (design-first, all states matter) add unnecessary tokens. The quotes and real-world examples, while illustrative, could be condensed.	2 / 3
Actionability	Provides concrete, actionable templates (Feature Spec, State Design Checklist, Craft Quality Assessment), clear decision trees, and specific checklists. The DO/DON'T examples and state tables give Claude exact guidance on what to produce.	3 / 3
Workflow Clarity	The decision tree for 'When to Polish vs Ship' provides clear sequencing. Templates include explicit checkpoints (Before You Code, During Build, Before Ship). The state design checklist ensures validation of all UI states before shipping.	3 / 3
Progressive Disclosure	References to related skills and further learning files are present, but the main content is monolithic (~400 lines). The real-world examples and common pitfalls sections could be moved to separate reference files. The structure is good but content that should be separate is inline.	2 / 3
	Total	10 / 12 Passed

Description

67%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This description has good structure with an explicit 'Use when' clause and covers both what and when. However, it relies heavily on abstract concepts ('craft quality standards', 'design-led development') rather than concrete actions, and the trigger terms could be more comprehensive to capture natural user language around design work.

Suggestions

Add more concrete actions like 'review UI mockups', 'apply spacing/typography standards', 'evaluate component consistency' to improve specificity

Expand trigger terms to include natural phrases like 'styling', 'visual polish', 'component design', 'look and feel', 'pixel-perfect'

Dimension	Reasoning	Score
Specificity	Names domain (design-led development, UI/UX, design system thinking) and some actions (building features, making decisions, determining when details matter), but lacks concrete specific actions like 'create component libraries' or 'review design mockups'.	2 / 3
Completeness	Clearly answers both what (follows Airbnb/Figma design standards, guides quality vs speed tradeoffs) and when (building user-facing features, making UI/UX decisions, applying design system thinking) with explicit 'Use when' clause.	3 / 3
Trigger Term Quality	Includes some relevant keywords like 'UI/UX', 'design system', 'user-facing features', but missing common variations users might say like 'styling', 'components', 'visual design', 'look and feel', or 'polish'.	2 / 3
Distinctiveness Conflict Risk	The design/UI/UX focus provides some distinction, but 'building user-facing features' and 'design system thinking' could overlap with general frontend skills or other design-related skills. The Airbnb/Figma branding adds some uniqueness.	2 / 3
	Total	9 / 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: menkesu/awesome-pm-skills
Commit: 53530ef

Reviewed: 3 months 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.