[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DZ05F5KE1KEVCAPEQK4DD5":3,"skill-same:01M6DZ05F5KE1KEVCAPEQK4DD5":65},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":6,"ownerHtmlUrl":49,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":50,"install":51,"resources":64},"01M6DZ05F5KE1KEVCAPEQK4DD5","interaction-design",null,"Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.","kennyolofsson23-netizen\u002Fclaude-code-config","kennyolofsson23-netizen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F262391667?v=4","01M6DYPCT5DBDV0C11CXD8G7RX","01M6DYPD3KYJ7P6A8H7RKJ6KGG",0,"MIT","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Finteraction-design\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38],"design","interaction design","interaction","guidelines","error handling","ux","Animation","feedback","user","use","patterns","2026-11-10 10:12:30",false,"---\nname: interaction-design\ndescription: Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.\nlicense: MIT\n---\n\n# Interaction Design\n\nCreate intuitive user experiences through thoughtful feedback and interaction patterns.\n\n## Interaction Patterns\n\n| Pattern | Duration | Use Case |\n|---------|----------|----------|\n| Microinteraction | 100-200ms | Button press, toggle |\n| Transition | 200-400ms | Page change, modal |\n| Entrance | 300-500ms | List items appearing |\n\n## Loading States\n\n```css\n\u002F* Skeleton loader *\u002F\n.skeleton {\n  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n```\n\n```jsx\nfunction LoadingState({ isLoading, children }) {\n  if (isLoading) {\n    return \u003Cdiv className=\"skeleton\" style={{ height: 200 }} \u002F>;\n  }\n  return children;\n}\n```\n\n## Error States\n\n```jsx\nfunction ErrorState({ error, onRetry }) {\n  return (\n    \u003Cdiv className=\"error-container\" role=\"alert\">\n      \u003CIcon name=\"warning\" \u002F>\n      \u003Ch3>Something went wrong\u003C\u002Fh3>\n      \u003Cp>{error.message}\u003C\u002Fp>\n      \u003Cbutton onClick={onRetry}>Try Again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Empty States\n\n```jsx\nfunction EmptyState({ title, description, action }) {\n  return (\n    \u003Cdiv className=\"empty-state\">\n      \u003CIllustration name=\"empty-inbox\" \u002F>\n      \u003Ch3>{title}\u003C\u002Fh3>\n      \u003Cp>{description}\u003C\u002Fp>\n      {action && \u003Cbutton onClick={action.onClick}>{action.label}\u003C\u002Fbutton>}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Accessibility\n\n```jsx\n\u002F\u002F Announce state changes to screen readers\nfunction StatusAnnouncer({ message }) {\n  return (\n    \u003Cdiv aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n      {message}\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F Respect motion preferences\nconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n```\n\n## Animation Guidelines\n\n- Keep animations under 500ms (longer feels sluggish)\n- Use ease-out for entering, ease-in for exiting\n- Respect `prefers-reduced-motion`\n- Ensure focus indicators are always visible\n- Test with keyboard navigation\n\n## Best Practices\n\n- Provide immediate feedback for all actions\n- Show loading states for waits >0.5s\n- Include clear error messages with recovery options\n- Design meaningful empty states\n- Support keyboard navigation\n","# Interaction Design\n\nCreate intuitive user experiences through thoughtful feedback and interaction patterns.\n\n## Interaction Patterns\n\n| Pattern | Duration | Use Case |\n|---------|----------|----------|\n| Microinteraction | 100-200ms | Button press, toggle |\n| Transition | 200-400ms | Page change, modal |\n| Entrance | 300-500ms | List items appearing |\n\n## Loading States\n\n```css\n\u002F* Skeleton loader *\u002F\n.skeleton {\n  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n```\n\n```jsx\nfunction LoadingState({ isLoading, children }) {\n  if (isLoading) {\n    return \u003Cdiv className=\"skeleton\" style={{ height: 200 }} \u002F>;\n  }\n  return children;\n}\n```\n\n## Error States\n\n```jsx\nfunction ErrorState({ error, onRetry }) {\n  return (\n    \u003Cdiv className=\"error-container\" role=\"alert\">\n      \u003CIcon name=\"warning\" \u002F>\n      \u003Ch3>Something went wrong\u003C\u002Fh3>\n      \u003Cp>{error.message}\u003C\u002Fp>\n      \u003Cbutton onClick={onRetry}>Try Again\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Empty States\n\n```jsx\nfunction EmptyState({ title, description, action }) {\n  return (\n    \u003Cdiv className=\"empty-state\">\n      \u003CIllustration name=\"empty-inbox\" \u002F>\n      \u003Ch3>{title}\u003C\u002Fh3>\n      \u003Cp>{description}\u003C\u002Fp>\n      {action && \u003Cbutton onClick={action.onClick}>{action.label}\u003C\u002Fbutton>}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Accessibility\n\n```jsx\n\u002F\u002F Announce state changes to screen readers\nfunction StatusAnnouncer({ message }) {\n  return (\n    \u003Cdiv aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n      {message}\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F Respect motion preferences\nconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n```\n\n## Animation Guidelines\n\n- Keep animations under 500ms (longer feels sluggish)\n- Use ease-out for entering, ease-in for exiting\n- Respect `prefers-reduced-motion`\n- Ensure focus indicators are always visible\n- Test with keyboard navigation\n\n## Best Practices\n\n- Provide immediate feedback for all actions\n- Show loading states for waits >0.5s\n- Include clear error messages with recovery options\n- Design meaningful empty states\n- Support keyboard navigation\n",{"name":5,"license":14,"description":7},"main","770ead1d2718b931bf0d81b757d75d0f33e43d90","skills\u002Finteraction-design",2,"https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen","2026-09-05 20:20:54",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill interaction-design",{"tool":57,"command":58},"bunx","bunx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill interaction-design",{"tool":60,"command":61},"pnpm","pnpm dlx skills add kennyolofsson23-netizen\u002Fclaude-code-config --skill interaction-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Finteraction-design\u002FSKILL.md",true,[],[66,95,126,160,179,203],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":78,"publishedAt":39},"01M6DZ7A62MZTGTBH4GYQPYHHM","web-quality-audit","Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to \"audit my site\", \"review web quality\", \"run lighthouse audit\", \"check page quality\", or \"optimize my website\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fweb-quality-audit\u002FSKILL.md",[72,75],{"categoryNo":73,"categoryName":74,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":76,"categoryName":77,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000035","市场营销",[79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,37,94],"web","audit","web quality audit","quality","review","performance","accessibility","run","best practices","website","seo","Lighthouse","site","page","check","optimize",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":105,"publishedAt":39},"01M6DZ6385911YENGYA985W015","tailwind-v4-shadcn","Production-tested setup for Tailwind CSS v4 with shadcn\u002Fui, Vite, and React.\n\nUse when: initializing React projects with Tailwind v4, setting up shadcn\u002Fui,\nimplementing dark mode, debugging CSS variable issues, fixing theme switching,\nmigrating from Tailwind v3, or encountering color\u002Ftheming problems.\n\nCovers: @theme inline pattern, CSS variable architecture, dark mode with\nThemeProvider, component composition, vite.config setup, common v4 gotchas,\nand production-tested patterns.\n\nKeywords: Tailwind v4, shadcn\u002Fui, @tailwindcss\u002Fvite, @theme inline, dark mode,\nCSS variables, hsl() wrapper, components.json, React theming, theme switching,\ncolors not working, variables broken, theme not applying, @plugin directive,\ntypography plugin, forms plugin, prose class, @tailwindcss\u002Ftypography,\n@tailwindcss\u002Fforms","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Ftailwind-v4-shadcn\u002FSKILL.md",[101,104],{"categoryNo":102,"categoryName":103,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125],"shadcn","Tailwind","tailwind v4","tailwind v4 shadcn","css","tailwindcss","components","react","component","architecture","config","debugging","issues","Composition","projects","common","broken","up","switching","css variables",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":140,"publishedAt":39},"01M6DZ5Z3F0PTH87NM9ATQD3E3","social-content","When the user wants help creating, scheduling, or optimizing social media content for LinkedIn, Twitter\u002FX, Instagram, TikTok, Facebook, or other platforms. Also use when the user mentions 'LinkedIn post,' 'Twitter thread,' 'social media,' 'content calendar,' 'social scheduling,' 'engagement,' or 'viral content.' This skill covers content creation, repurposing, and platform-specific strategies.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fsocial-content\u002FSKILL.md",[132,133,136,137],{"categoryNo":73,"categoryName":74,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":134,"categoryName":135,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":76,"categoryName":77,"taxonomyType":25,"taxonomyTypeDesc":26},{"categoryNo":138,"categoryName":139,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[141,142,143,144,145,146,147,148,149,37,150,151,152,153,154,155,156,157,158,159],"content","social content","social","Media","marketing","twitter","linkedin","instagram","social media","calendar","scheduling","tiktok","content calendar","content creation","facebook","viral","strategies","platform","creation",{"skillNo":161,"name":89,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":167,"publishedAt":39},"01M6DZ5NDBE4821RDH11V7FQTK","Optimize for search engine visibility and ranking. Use when asked to \"improve SEO\", \"optimize for search\", \"fix meta tags\", \"add structured data\", \"sitemap optimization\", or \"search engine optimization\".","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fseo\u002FSKILL.md",[165,166],{"categoryNo":73,"categoryName":74,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":76,"categoryName":77,"taxonomyType":25,"taxonomyTypeDesc":26},[89,168,79,169,170,171,172,173,174,175,82,176,37,94,177,178],"structured data","search","Optimization","data","Meta","Meta Tags","improve","engine","fix","structured","ranking",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":190,"publishedAt":39},"01M6DZ39W3BS39MBVGBDA38DV9","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Freact-best-practices\u002FSKILL.md",[185,186,187],{"categoryNo":102,"categoryName":103,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":134,"categoryName":135,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":188,"categoryName":189,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000030","开发工程师",[113,191,87,192,193,194,84,112,195,31,196,197,170,171,198,199,38,200,201,202],"vercel react best practices","react best practices","vercel","writing","react components","tasks","code","Next.js","refactoring","next","pages","triggers",{"skillNo":204,"name":205,"nameZh":6,"description":206,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":214,"publishedAt":39},"01M6DZ2C3HPF1JX3TD508SXNDR","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002Fkennyolofsson23-netizen\u002Fclaude-code-config\u002Fblob\u002Fmain\u002Fskills\u002Fpostgres-best-practices\u002FSKILL.md",[209,212,213],{"categoryNo":210,"categoryName":211,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":134,"categoryName":135,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":188,"categoryName":189,"taxonomyType":25,"taxonomyTypeDesc":26},[87,215,216,217,218,194,84,197,219,220,170,221,222,223,37,224,225,226,227,228],"supabase postgres best practices","supabase","postgres best practices","postgres","database","examples","analysis","correct","Rules","schema","query","across","critical","impact"]