skills.rest
nicolaiprodromov
nicolaiprodromovCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

adapt

Implement UI adaptation guidelines for Puree panels across Blender panel sizes.

20|2|Updated Oct 5, 2025
Search Tags:#ui#yaml#responsive-design#scss#adapt#blender
One-click install
npx skills add https://github.com/nicolaiprodromov/puree --skill adapt-nicolaiprodromov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: adapt
Source: https://github.com/nicolaiprodromov/puree/tree/main/puree/scaffold/.agents/skills/adapt
Command: npx skills add https://github.com/nicolaiprodromov/puree --skill adapt-nicolaiprodromov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adapt Puree UI (YAML/SCSS) designs to work across different Blender panel sizes, workspace configurations, and monitor resolutions, ensuring a consistent user experience with minimal rework.

Core Features & Use Cases

  • Strategy-driven adaptation across narrow (<300px), medium (300-500px), and wide (500px+) panels, including high-DPI displays and multi-monitor setups.
  • Context gathering and planning steps, including identifying the source context, target panel type, workspace layout, and user workflows, followed by concrete adaptation plans.
  • Variant-driven implementation guidance to maintain a single design system while adjusting layout, typography, and visibility per breakpoint.

Quick Start

Describe the target Blender panel context and apply the adaptation guidelines to render Puree UI consistently across narrow, medium, and wide panels.

Frequently Asked Questions about adapt

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

FAQPage Schema
How do I make a Puree UI panel render consistently across different Blender workspace sizes?▼

To make Puree UI render consistently across Blender workspace sizes, apply strategy-driven adaptation guidelines that adjust layout, typography, and visibility based on narrow (<300px), medium (300-500px), and wide (500px+) panel breakpoints.

What's the best way to handle high-DPI display scaling for YAML and SCSS interfaces in Blender?▼

Handling high-DPI display scaling for YAML and SCSS interfaces involves gathering multi-monitor context and applying variant-driven implementation rules that adjust component visibility and typography for high-resolution Blender displays.

Do I need to define separate design systems for narrow, medium, and wide Blender panels?▼

You do not need separate design systems for narrow, medium, and wide Blender panels. The adaptation process uses variant-driven implementation to maintain a single Puree design system while adjusting layout rules per breakpoint.

How does context gathering work before adapting a Blender panel layout?▼

Context gathering for Blender panel layout adaptation requires identifying the source context, target panel type, workspace layout, and user workflows to generate a concrete adaptation plan before implementing visibility and typography adjustments.

Why does my Puree UI break or misalign when docked in a narrow Blender sidebar?▼

Puree UI breaks or misaligns in narrow Blender sidebars when adaptation guidelines for sub-300px panel contexts are not applied. You must implement specific layout and visibility adjustments to ensure consistent rendering in constrained widths.

Related Skills

Explore More Design & Creative Skills→
nicolaiprodromovnicolaiprodromov
20

frontend-design

Translate design briefs into YAML/SCSS/Python Puree UI interfaces for Blender addons.

Community
Advanced
nicolaiprodromovnicolaiprodromov
20

polish

Polish Puree UI components across YAML, SCSS, and Python for visual consistency.

Community
Advanced
nicolaiprodromovnicolaiprodromov
20

extract

Identify reusable Puree patterns, components, and SCSS tokens for extraction.

Community
Intermediate
DevanBDevanB

Frontend Responsive

Implement responsive React component layouts with Tailwind CSS breakpoints.

Community
Basic