design-lab

Malicious tool definition detected

Tool: DESIGN_PRINCIPLES.md [1/8] Description: # Design Principles Reference This document contains curated best practices from world-class designers and design systems.

Tool: DESIGN_PRINCIPLES.md [2/8] Description: round feels friendly/approachable ### Shadows & Elevation (from Material, Linear) ``` Level 0: none (flat, on surface) Level 1: 0 1px 2px rgba(0,0,0,0.05) - Subtle lift (cards) Level 2: 0 4px 6px rgba(0,0,0,0.07) - Raised (dropdowns) Level 3: 0 10px 15px rgba(0,0,0,0.1) - Floating (modals) Level 4: 0 20px 25px rgba(0,0,0,0.15) - High (popovers) ``` **Principles:** - Shadows should feel like natural light (top-down, slight offset) - Dark mode: use lig

Tool: DESIGN_PRINCIPLES.md [3/8] Description: modals:** ```css /* Prevent scroll chaining to body when modal/drawer reaches edge */ .modal, .drawer, .dropdown { overscroll-behavior: contain; } ``` **Touch targets:** - Minimum 44x44px for all interactive elements (Apple HIG) - Provide adequate spacing between targets (8px minimum) **Hover states for pointer devices only:** ```css /* Only apply hover effects on devices with fine pointers */ @media (hover: hover) and (pointer: fine) { .card:hover {

Tool: DESIGN_PRINCIPLES.md [4/8] Description: on screen (A to B)?

Tool: DESIGN_PRINCIPLES.md [5/8] Description: animateToValue(newValue); } else { setValueInstantly(newValue); } } ``` **Keyboard interactions often need no animation:** ```jsx // Tab navigation - instant focus, no animation // Arrow key navigation - instant highlight // Enter to select - instant (or very fast 50ms) const keyboardTransition = { duration: 0.05 }; const pointerTransition = { duration: 0.15 }; const transition = isKeyboardNav ?

Tool: DESIGN_PRINCIPLES.md [6/8] Description: <div role="tablist"> <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button> </div> <div role="tabpanel" id="panel1">Content</div> <!-- Loading state --> <button aria-busy="true" aria-describedby="loading-text"> <span id="loading-text" className="sr-only">Loading...</span> </button> ``` --- ## Part 7: Performance Patterns ### Virtualization **Large lists require virtualization:** ```jsx // Use virtualization for lists > 50 items

Tool: DESIGN_PRINCIPLES.md [7/8] Description: [Notion](https://notion.so) - Flexible, playful - [Slack](https://slack.com) - Conversational, colorful **For Data & Density:** - [Bloomberg Terminal](https://bloomberg.com) - Maximum information - [Figma](https://figma.com) - Tool-like precision - [GitHub](https://github.com) - Code-centric clarity **For Motion & Delight:** - [Apple](https://apple.com) - Cinematic quality - [Framer](https://framer.com) - Motion-first ### When Generating Variants Ref

Tool: DESIGN_PRINCIPLES.md [8/8] Description: --- ## Quick Decision Framework When unsure, ask: 1.

Malicious tool definition detected

Tool: SKILL.md [1/5] Description: --- name: design-lab description: Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans.

Tool: SKILL.md [2/5] Description: - Header: "Context" - Question: "What's the primary usage context?" - Options: - "Desktop-first" - Primarily used on larger screens - "Mobile-first" - Primarily used on phones - "Both equally" - Must work well on all devices **Question 3: Key Tasks** - Header: "Key tasks" - Question: "What are the top 3 tasks users must complete?" - (Let user provide via "Other" - this is open-ended) ### Step 1.5: Constraints **Question 1: Must-Keep Elements** - Header: "Keep" -

Tool: SKILL.md [3/5] Description: X is A, B, C, D, E, or F). This is required for the feedback system to identify which variant comments belong to.

Tool: SKILL.md [4/5] Description: as is?" - Options: - "Good as is" - No changes needed, proceed to final preview - "Minor tweaks needed" - I'll describe what to adjust If "Minor tweaks needed", ask user to describe changes via text input.

Tool: SKILL.md [5/5] Description: [Tailwind classes, CSS modules, etc.] - **Existing primitives:** [Button, Input, Card, etc.] --- *Updated by Design Variations plugin* ``` If updating existing file: - Append new patterns discovered - Update any conflicting guidance with latest decisions - Keep file concise and actionable --- ## Error Handling ### Framework Not Detected If framework cannot be determined: - Ask user: "I couldn't detect your framework.