{"id":"a0289bf8-932e-4725-9fc3-93f9b21488f4","shortId":"H4Qhdh","kind":"skill","title":"design-spells","tagline":"Curated micro-interactions and design details that add \"magic\" and personality to websites and apps.","description":"# Design Spells Skill\n\n[Design Spells](https://www.designspells.com/) is a collection of exceptional design details—micro-interactions, easter eggs, and clever UX patterns—that transform standard interfaces into memorable digital experiences.\n\n## Context\n\nUse this skill specifically to elevate a UI from merely \"functional\" or \"common\" into something genuinely \"magical.\" It focuses on the minute details that surprise and delight users, establishing a strong, premium brand personality.\n\n## When to Use\nTrigger this skill when:\n\n- Polishing a finished feature to actively add a \"wow\" factor.\n- Designing unique interactions to replace standard web behaviors (e.g., clever hover states, creative loaders, surprising transitions).\n- Implementing \"Easter Eggs\" or personality-driven design choices to differentiate the product.\n- Looking to break away from generic, template-driven development.\n\n## Execution Workflow\n\n1. **Identify Opportunity**: Target the \"boring\" or \"standard\" parts of the interface (e.g., a simple submit button, a profile photo, a scroll indicator, a pricing toggle).\n2. **Research Spells**: Browse Design Spells for highly creative patterns (e.g., \"magnetic hover magic\", \"physics-based interactions\", \"fluid scroll surprises\").\n3. **Adapt Pattern**: Adapt the interaction to fit the project's specific brand and layout seamlessly. Use it to enhance the core narrative of the app.\n4. **Implement flawlessly**: Use CSS, Anime.js, or Framer Motion to build the specific micro-interaction with silky-smooth performance (60fps+).\n\n## Strict Rules\n\n- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in the common style and ways. Look for every opportunity to inject \"magic\" into standard components.\n- **Delight, Don't Distract**: The detail must be additive to the experience, not a usability barrier. It should feel expensive and highly crafted.\n- **Quality Execution**: A broken or janky \"spell\" is worse than none. Ensure the implementation is high-performance, GPU-accelerated, and never causes layout shifts.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["design","spells","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-design-spells","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/design-spells","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34831 github stars · SKILL.md body (2,426 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T06:51:03.588Z","embedding":null,"createdAt":"2026-04-18T21:36:01.457Z","updatedAt":"2026-04-24T06:51:03.588Z","lastSeenAt":"2026-04-24T06:51:03.588Z","tsv":"'/)':27 '1':145 '2':171 '3':192 '4':218 '60fps':239 'absolut':242 'acceler':319 'activ':99 'adapt':193,195 'add':12,100 'addit':284 'agent':244 'anime.js':223 'app':19,217 'ask':358 'away':136 'barrier':291 'base':187 'behavior':111 'bore':150 'boundari':366 'brand':85,204 'break':135 'broken':302 'brows':174 'build':228,250,259 'button':161 'caus':322 'choic':128 'clarif':360 'clear':333 'clever':41,113 'collect':30 'common':65,262 'compon':275 'context':52 'core':213 'craft':298 'creativ':116,179,252 'criteria':369 'css':222 'curat':4 'delight':79,276 'describ':337 'design':2,9,20,23,33,104,127,175 'design-spel':1 'detail':10,34,75,281 'develop':142 'differenti':130 'digit':50 'distract':279 'driven':126,141 'e.g':112,157,181 'easter':38,121 'egg':39,122 'elev':58 'enhanc':211 'ensur':310 'environ':349 'environment-specif':348 'establish':81 'everi':268 'except':32 'execut':143,300 'expens':295 'experi':51,287 'expert':354 'factor':103 'featur':97 'feel':294 'finish':96 'fit':199 'flawless':220 'fluid':189 'focus':71 'framer':225 'function':63 'generic':138 'genuin':68 'gpu':318 'gpu-acceler':317 'high':178,297,315 'high-perform':314 'hover':114,183 'identifi':146 'implement':120,219,312 'indic':167 'inject':271 'input':363 'interact':7,37,106,188,197,233 'interfac':47,156 'janki':304 'layout':206,323 'limit':325 'loader':117 'look':133,266 'magic':13,69,184,272 'magnet':182 'mandat':243 'match':334 'memor':49 'mere':62 'micro':6,36,232 'micro-interact':5,35,231 'minut':74 'miss':371 'modern':251 'motion':226 'must':245,282 'narrat':214 'never':321 'none':309 'opportun':147,269 'output':343 'part':153 'pattern':43,180,194 'perform':238,316 'permiss':364 'person':15,86,125 'personality-driven':124 'photo':164 'physic':186 'physics-bas':185 'polish':94 'premium':84 'price':169 'product':132 'profil':163 'project':201 'qualiti':299 'replac':108 'requir':362 'research':172 'review':355 'rule':241 'safeti':365 'scope':336 'scroll':166,190 'seamless':207 'shift':324 'silki':236 'silky-smooth':235 'simpl':159 'skill':22,55,92,248,328 'skill-design-spells' 'smooth':237 'someth':67 'source-sickn33' 'specif':56,203,230,350 'spell':3,21,24,173,176,305 'standard':46,109,152,274 'state':115 'stop':356 'strict':240 'strong':83 'stun':255 'style':263 'submit':160 'substitut':346 'success':368 'surpris':77,118,191 'target':148 'task':332 'templat':140 'template-driven':139 'test':352 'toggl':170 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':45 'transit':119 'treat':341 'trigger':90 'ui':60 'ui/ux':256 'uniqu':105 'usabl':290 'use':53,89,208,221,326 'user':80 'util':246 'ux':42 'valid':351 'visual':254 'way':265 'web':110 'websit':17 'workflow':144 'wors':307 'wow':102 'www.designspells.com':26 'www.designspells.com/)':25","prices":[{"id":"42d64a82-dd4c-4d82-b86f-49363e99f05e","listingId":"a0289bf8-932e-4725-9fc3-93f9b21488f4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:36:01.457Z"}],"sources":[{"listingId":"a0289bf8-932e-4725-9fc3-93f9b21488f4","source":"github","sourceId":"sickn33/antigravity-awesome-skills/design-spells","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-spells","isPrimary":false,"firstSeenAt":"2026-04-18T21:36:01.457Z","lastSeenAt":"2026-04-24T06:51:03.588Z"}],"details":{"listingId":"a0289bf8-932e-4725-9fc3-93f9b21488f4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"design-spells","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34831,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"ccd90e384cadd8dc201174bc28d19e9b8963dfd6","skill_md_path":"skills/design-spells/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-spells"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"design-spells","description":"Curated micro-interactions and design details that add \"magic\" and personality to websites and apps."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/design-spells"},"updatedAt":"2026-04-24T06:51:03.588Z"}}