메뉴
Generate dropdown menus with glass styling, keyboard navigation, and animated open/close.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy to create intentional compositions.
Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations.
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.
| name | dropdown |
| description | Generate dropdown menus with glass styling, keyboard navigation, and animated open/close. |
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-trigger {
padding: 10px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.15s ease;
}
.dropdown-trigger:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
padding: 6px;
background: rgba(16, 18, 30, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
backdrop-filter: blur(20px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translateY(-4px) scale(0.98);
pointer-events: none;
transition: all 0.15s ease;
z-index: 1000;
}
.dropdown.open .dropdown-menu {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.dropdown-item {
padding: 8px 12px;
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
cursor: pointer;
transition: all 0.1s ease;
}
.dropdown-item:hover {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.95);
}
.dropdown-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 4px 0;
}
Rules: