Emil Design Engineering
Skill GeverifieerdThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
This skill provides detailed principles and a framework for creating highly polished user interfaces, drawing from Emil Kowalski's design philosophy. It covers animation decision-making, CSS transform mastery, clip-path usage, gesture interactions, performance rules, and accessibility considerations, offering concrete examples and review formats.
License
- info:License usabilityThe license is not explicitly stated in a LICENSE file or manifest; it is only mentioned in the README footer. This makes it informal and potentially difficult for downstream tools to parse.
Versioning
- warning:Release ManagementNo version information is present in the manifest files or associated documentation, and no installation instructions are provided to specify a version.
Installatie
npx skills add emilkowalski/skillVoert de Vercel skills CLI (skills.sh) uit via npx — vereist Node.js lokaal en minstens één geïnstalleerde skills-compatibele agent (Claude Code, Cursor, Codex, …). Gaat ervan uit dat de repo het agentskills.io-formaat volgt.
Vergelijkbare extensies
Make Interfaces Feel Better
95Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
Frontend Design
98Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
react-is
98Brand checking of React Elements.
Modern CSS
96Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
Frontend Design Skill
95Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.