emil-design-eng – Design & UI skill for AI agents
Use when designing or reviewing polished product UI with Emil Kowalski-inspired animation, interaction, and component craft guidance.
Install the emil-design-eng skill with one command
Pick the tool you use, copy the command and paste it in your terminal. The skill lands in that tool's skills folder and is ready in your next session.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.claude/skills
Call it in Claude Code: /emil-design-eng – then describe the task you want done.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.codex/skills
Call it in Codex: $emil-design-eng – then describe the task you want done.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.hermes/skills
Call it in Hermes Agent: /emil-design-eng – then describe the task you want done.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/emil-design-eng-940f8.tgz | tar xz -C ~/.deepcode/skills
Call it in DeepSeek: /emil-design-eng – then describe the task you want done.
SKILL.md content
Design Engineering
Detailed Guide
Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
- Use when the user asks for UI polish, product design critique, animation direction, or high-craft component decisions.
- Use when reviewing frontend code for motion quality, easing, duration, physicality, interaction feedback, or subtle interface details.
- Use when building or refining React, Tailwind, CSS, or Framer Motion interfaces where taste and perceived quality matter.
Limitations
- Keep decorative animation separate from action authorization. Provide keyboard alternatives for gestures, honor reduced motion and test final visible states; duplicated visual controls must not create duplicate accessible controls.
- This skill provides design engineering judgment; it does not replace project-specific product requirements, accessibility testing, or real-device motion review.
- Verify framework versions, installed dependencies, and rendered behavior before treating animation or UI recommendations as production-ready.
- Do not apply these rules mechanically when an existing brand system, platform convention, or user requirement calls for a different interaction language.
Related skills
- engine-selection – Selects game engines and frameworks by platform, genre, and architecture (full canvas…
- quality-manager-qms-iso13485 – ISO 13485 Quality Management System implementation and maintenance for medical device…
- enhance-prompt – Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity…
- rag-architect – Use when the user asks to design a RAG pipeline, choose a chunking strategy or embedding…
- event-sourcing-architect – Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event…
- event-store-design – Design and implement event stores for event-sourced systems. Use when building event…
- vision-sft – Fine-tune vision-language models (VLMs) with supervised learning on image+text data. Use…
- expo-animation – Curated upstream guidance for Expo Animation; use when the workflow matches the user goal.