القائمة
Patterns for polishing sidebar list components in React/Tailwind apps
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | sidebar-list-polish |
| description | Patterns for polishing sidebar list components in React/Tailwind apps |
| domain | frontend-ui |
| confidence | low |
| source | earned |
Sidebar list panels (slide lists, file trees, layer panels) often start utilitarian and need polish. These patterns transform a basic list into a professional, designed panel.
Replace unicode symbols (↑↓✕←→) with inline SVG components. Unicode renders inconsistently across OS/browser combos and looks unpolished. Inline SVGs are 5-7 lines each, need no icon library, and render crisply at any size.
Wrap list items in a Tailwind group class. Place action buttons as absolute positioned elements with opacity-0 group-hover:opacity-100 transition-opacity. This keeps the list clean while making actions discoverable. For the selected/active item, always show buttons (opacity-100).
A single background highlight (bg-indigo-600/20) is not visually distinct enough. Use three signals together:
absolute left-0 w-[3px] rounded-full bg-indigo-400ring-1 ring-indigo-500/30bg-indigo-500/15For list items that represent visual content (slides, pages, cards), add a small preview area. Even a simple colored box with a number or icon is better than text-only. Use cycling accent colors for visual variety.
Never conditionally render ({show && <Panel />}) — it causes a hard mount/unmount cut. Instead, always render the panel and control with CSS: w-64 ↔ w-0 with transition-all duration-200 overflow-hidden. The inner content should have a fixed width matching the open state.