distill

Analyze frontend designs and recommend simplification across layout, interaction, and code.

Updated Jan 22, 2025
One-click install
npx skills add https://github.com/SL-A-SH/my-portfolio --skill distill-sl-a-sh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: distill
Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/distill
Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill distill-sl-a-sh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Strip designs down to their essential elements to remove visual and functional complexity that blocks users from achieving their primary goal. It targets cluttered interfaces, competing controls, inconsistent visual language, and feature bloat that increases cognitive load and slows task completion. The skill requires explicit design context and user goals before applying simplification recommendations.

Core Features & Use Cases

  • Assess current state: Identify sources of complexity such as excessive elements, visual noise, confusing hierarchy, information overload, and feature creep.
  • Plan simplification: Define the single core purpose, essential elements, progressive disclosure, and consolidation opportunities.
  • Simplify across dimensions: Provide concrete guidance for information architecture, visual design, layout, interaction, content, and code-level cleanup.
  • Verify & document: Offer measurable verification criteria (task speed, cognitive load, performance) and document removed complexity with rationale and fallback access if needed.
  • Use Case: Simplify a cluttered product settings page by identifying the primary user task, consolidating related actions into a single flow, hiding advanced options behind progressive disclosure, and reducing visual variants.

Quick Start

Ask the distill skill to simplify the checkout component by focusing on the primary user goal and removing redundant controls.

Frequently Asked Questions about distill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I simplify a cluttered UI and reduce visual complexity in my frontend components?

To simplify a cluttered UI, strip unnecessary elements to reveal essential user-focused components, consolidating redundant controls and applying progressive disclosure to lower cognitive load. This process requires explicit design context and primary user goals to generate actionable recommendations across visual layout and information architecture.

What causes high cognitive load and confusing visual hierarchy in a landing page?

High cognitive load in a landing page stems from excessive elements, visual noise, competing controls, and feature creep that impede task completion. Assessing these sources of complexity allows you to define a single core purpose and plan consolidation opportunities for a clearer visual hierarchy.

How do I declutter a product settings page using progressive disclosure?

Declutter a product settings page by identifying the primary user task, consolidating related actions into a single flow, and hiding advanced options behind progressive disclosure. This reduces visual variants and removes feature bloat while maintaining fallback access to advanced configurations.

Can I get actionable recommendations for content pruning and information architecture simplification?

Yes, you can receive concrete guidance for content pruning and information architecture by providing explicit design context. Recommendations span visual layout, interaction streamlining, content reduction, and code-level cleanup to eliminate competing controls and feature creep.

What is the best way to verify that a design simplification actually improved task speed?

The best way to verify design simplification is to apply measurable verification criteria focusing on task speed, cognitive load reduction, and performance gains. Documenting removed complexity with rationale ensures the simplified interface maintains essential user-focused functionality.