ainergiz/design-inspirations
8 skills481 installs48 starsGitHub
Install
npx skills add https://github.com/ainergiz/design-inspirationsSkills in this repo
1Glassmorphismglassmorphism in ainergiz/design-inspirations teaches developers to build frosted glass UI elements with blur, transparency, and subtle borders for overlays, floating controls, tooltips, and elevated panels in React and Tailwind CSS. The skill documents a standard container using bg-black/20, backdrop-blur-md, and border border-white/10, plus variations such as dark overlays on images or video and rounded floating controls. Developers reach for glassmorphism when dashboards, media players, or landing pages need translucent layers without manually tuning opacity stacks that fail contrast or readability checks. Invocation supplies copy-ready TSX class combinations rather than abstract design theory, reducing guesswork on blur radius and border alpha values during implementation. The pattern fits frontend engineers shipping Tailwind-based SaaS or content sites who want consistent glass surfaces across modals, toolbars, and on-media controls. Examples emphasize rounded-full pill controls and dark-overlay variants best suited to photography or video backgrounds where solid panels would obscure underlying content.436installs2Expandable Cardexpandable-card is a Claude Code skill that builds smooth expand and collapse cards using a CSS grid-rows animation. The technique animates between grid-rows [0fr] and [1fr] to avoid height:auto animation problems. A developer uses it when building accordions, collapsible panels, or show/hide card sections.7installs3Image Carouselimage-carousel is a Claude Code skill that builds React image carousels that auto-advance on hover, support touch swipe on mobile, and show animated progress indicators. Manual navigation temporarily pauses the auto-advance. A developer uses it when building image galleries, product showcases, or multi-image displays.7installs4Nested Cardnested-card is a Claude Code skill that builds layered card designs where an outer gradient container wraps an inner content card. This separates a media section from a content section and creates visual depth. A developer uses it when building card layouts that combine an image area with a content area.7installs5Stacked Cardsstacked-cards is a Claude Code skill that builds horizontally fanned or cascading card stacks. It solves wrong stacking order, hover breaking the cascade, and tooltips trapped in a stacking context. A developer uses it when building album browsers, card fans, or overlapping card collections.7installs6Create New Designcreate-new-design is a Claude Code skill that scaffolds a new design entry inside the design-inspirations Next.js repo. It creates the preview component, the detail page, the main-page listing entry, and the ViewTransition CSS following the repo conventions. A developer uses it when adding a new design inspiration to that project.6installs7Dropdown Menudropdown-menu is a Claude Code skill that builds React dropdown menus which work correctly inside cards and list items. It addresses three common bugs: overflow clipping, sibling cards covering the menu, and double-toggle on the trigger click. A developer uses it when adding action, context, or overflow menus to list-based UI.6installs8Component Variantscomponent-variants is a Claude Code skill that builds matching light and dark versions of a UI component using a fixed Tailwind color-token table. A developer uses it when creating theme-aware or dual-theme components so light and dark variants share identical structure. It maps backgrounds, text, borders, shadows, badges, and separators between the two modes.5installs