Add personality to interfaces through small interaction responses, completion animations, illustrations, and product-specific messages. Shape enjoyable moments around the brand and user context while preserving task flow, accessibility, and performance.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
Identify where delight would enhance (not distract from) the experience:
Find natural delight moments:
Understand the context:
Define delight strategy:
If any of these are unclear from the codebase, Ask the user using AskUserQuestion.
CRITICAL: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
Follow these guidelines:
Add personality and joy through these methods:
Button delight:
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Smooth lift on hover */
.button:hover {
transform: translateY(-2px);
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
}
Loading delight:
Success animations:
Hover surprises:
Playful error messages:
"Error 404"
"This page is playing hide and seek. (And winning)"
"Connection failed"
"Looks like the internet took a coffee break. Want to retry?"
Encouraging empty states:
"No projects"
"Your canvas awaits. Create something amazing."
"No messages"
"Inbox zero! You're crushing it today."
Playful labels & tooltips:
"Delete"
"Send to void" (for playful brand)
"Help"
"Rescue me" (tooltip)
IMPORTANT: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
Custom illustrations:
Icon personality:
Background effects:
Drag and drop delight:
Toggle switches:
Progress & achievements:
Form interactions:
Subtle audio cues (when appropriate):
IMPORTANT:
Discovery rewards:
Seasonal touches:
Contextual personality:
Make waiting engaging:
Loading messages — write ones specific to your product, not generic AI filler:
- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
- "Preparing your dashboard..."
- "Checking for updates since yesterday..."
WARNING: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
Success celebrations:
Milestone recognition:
Animation libraries:
Sound libraries:
Physics libraries:
IMPORTANT: File size matters. Compress images, optimize animations, lazy load delight features.
NEVER:
Test that delight actually delights:
Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Adapts existing designs for phones, tablets, desktops, print, and email. Adjusts layouts, navigation, content priorities, and touch controls to suit each context, with guidance for responsive sizing and verification across devices and input methods.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Audit a website for Google AdSense application readiness or ongoing ad-serving issues. Check content, navigation, crawler access, and disclosures against official requirements, then receive evidence-based findings, specific fixes, and a complete checklist with unresolved questions clearly marked.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Routes AI development questions to focused references on agents, language model security, retrieval-augmented generation, which uses retrieved information in answers, and prompt design and evaluation. It also outlines principles for validation, safety boundaries, version control, and ongoing assessment.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Review an interface and add purposeful motion to buttons, forms, navigation, and state changes. Plan and implement animations that clarify actions and provide feedback, while checking performance and supporting users who prefer reduced motion.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Find the relevant architectural guidance for API design, security, cloud infrastructure, message queues, and caching. This skill acts as an index to specialized references and lists principles for structuring software, distributed systems, and access controls.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Improve interface layouts by reviewing spacing, alignment, content density, and visual hierarchy, the cues that show what matters most. Refine repetitive card grids and crowded sections into compositions with consistent spacing and responsive structure.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.