skills.rest
MiguelGotea
MiguelGoteaCOMMUNITY
Explore all skills by this author →
GitHub

neumorphism-migration

Convert web page designs to neumorphism style by generating CSS code with dual shadows.

Updated Aug 23, 2026
Search Tags:#web development#CSS#UI design#neumorphism#style migration#soft UI
One-click install
npx skills add https://github.com/MiguelGotea/erp.batidospitaya --skill neumorphism-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neumorphism-migration
Source: https://github.com/MiguelGotea/erp.batidospitaya/tree/main/.agent/skills/neumorphism-migration
Command: npx skills add https://github.com/MiguelGotea/erp.batidospitaya --skill neumorphism-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill enables developers and designers to convert existing website styles into modern neumorphic (Soft UI) design, creating visually appealing interfaces with depth and tactility.

Core Features & Use Cases

  • Design Migration: Assist in updating website components to neumorphic style, including buttons, cards, inputs, and sliders.
  • CSS Automation: Generate CSS snippets that implement the dual-shadow neumorphism principles.
  • Use Case: Redesign a user dashboard by applying neumorphic shadows and rounded elements, providing a more contemporary and engaging UI.

Quick Start

Ask the AI to convert your current website’s CSS to neumorphic style for consistent soft UI design elements.

Frequently Asked Questions about neumorphism-migration

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

FAQPage Schema
How do I convert my existing web design to neumorphism style?▼

To convert web design to neumorphism style, you need to generate CSS code with dual shadows, soft borders, and rounded elements. This process enhances visual depth and creates a tactile soft UI appearance for components like buttons, cards, and inputs.

What is soft UI design and how do CSS shadows create it?▼

Soft UI design, or neumorphism, is a visual style that uses CSS dual shadows, soft borders, and rounded elements to create interface components with enhanced visual depth and a tactile appearance. It makes elements look extruded from or pressed into the background.

Can I use this to standardize neumorphic UI across a whole web application?▼

Yes, you can standardize neumorphic UI across a web application by generating consistent CSS snippets for dual shadows and rounded elements. It is suitable for UI redesign projects and ensures style standardization across all website components.

Do I need to manually calculate shadow values for neumorphic CSS?▼

You do not need to manually calculate shadow values for neumorphic CSS. The conversion process handles shadow calculations and design principles adherence automatically, generating the required dual shadow CSS snippets for your web page components.

What is the best way to migrate a user dashboard to neumorphic style?▼

The best way to migrate a user dashboard to neumorphic style is by applying CSS dual shadows and rounded elements to your existing components. This provides a contemporary, engaging soft UI by updating inputs, sliders, and cards with tactile depth.

Related Skills

Explore More Design & Creative Skills→
windyroadwindyroad
4

wr-style-guide:update-guide

Inspect project CSS architecture, design tokens, and component patterns to generate STYLE-GUIDE.md.

Official
Intermediate
tylerwindtylerwind
47

ui-neumorphic-design

Apply dual shadows, soft highlights, and typography rules for neumorphic UI styling.

Community
Basic
gil00pitagil00pita

web-components

Define and register framework-agnostic web components using Custom Elements and Shadow DOM.

Community
Intermediate
Objective-ArtsObjective-Arts

visual

Define minimalist visual design rules for shadows, colors, border-radius, and typography.

Official
Intermediate