[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C4XTFB9WM353FMYNESHRX6":3,"skill-same:01M6C4XTFB9WM353FMYNESHRX6":59},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":33,"linkOnly":34,"markdownContent":35,"markdownBody":35,"frontMatter":36,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":13,"repositoryHtmlUrl":40,"repositoryHomepageUrl":41,"ownerHtmlUrl":42,"ownerBlogUrl":43,"ownerDescription":6,"updatedAt":44,"install":45,"resources":58},"01M6C4XTFB9WM353FMYNESHRX6","astro-design-system",null,"joshribakoff\u002Ffightingwithai.com","joshribakoff","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F4021306?v=4","01M6C4XRSWK3RV2R7FF1CH2FGA","Josh Ribakoff","01M6C4XRYAPRF3PM6E2VY4MNXM",0,"MIT","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fastro-design-system\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],"design","design system","astro","system","astro design system","2026-11-10 10:12:30",false,"# Astro Design System Skill\n\n## When to Use This Skill\n\nUse this skill when:\n- Creating or modifying CSS styles\n- Adding new UI components\n- Changing colors, spacing, typography, or other visual properties\n- Implementing theme switching (light\u002Fdark mode)\n\n## Design System Architecture\n\n### File Structure\n\n```\nsrc\u002Fstyles\u002F\n├── design-system.css  # Base tokens (typography, spacing, radius, etc.)\n├── theme-dark.css     # Dark theme color variables (warm amber)\n└── theme-light.css    # Light theme color variables (teal)\n```\n\n### How Themes Work\n\n1. **Base tokens** in `design-system.css` are theme-agnostic (spacing, fonts, etc.)\n2. **Color tokens** are defined per-theme in `theme-*.css`\n3. Theme is set via `data-theme` attribute on `\u003Chtml>`:\n   - `data-theme=\"dark\"` → Dark theme\n   - `data-theme=\"light\"` → Light theme\n   - No attribute or `data-theme=\"auto\"` → Follows system preference\n\n### Key CSS Variables\n\n#### Colors (Theme-Dependent)\n```css\nvar(--color-accent)       \u002F* Primary accent color *\u002F\nvar(--color-accent-hover) \u002F* Accent hover state *\u002F\nvar(--color-accent-dim)   \u002F* Subtle accent background *\u002F\n\nvar(--color-bg)           \u002F* Page background *\u002F\nvar(--color-bg-sidebar)   \u002F* Sidebar background *\u002F\nvar(--color-surface)      \u002F* Cards, elevated elements *\u002F\n\nvar(--color-text)         \u002F* Primary text *\u002F\nvar(--color-text-muted)   \u002F* Secondary text *\u002F\nvar(--color-border)       \u002F* Borders *\u002F\n```\n\n#### Typography\n```css\nvar(--text-xs)    \u002F* 0.75rem - 12px *\u002F\nvar(--text-sm)    \u002F* 0.875rem - 14px *\u002F\nvar(--text-base)  \u002F* 1rem - 16px *\u002F\nvar(--text-lg)    \u002F* 1.125rem - 18px *\u002F\nvar(--text-xl)    \u002F* 1.25rem - 20px *\u002F\nvar(--text-2xl)   \u002F* 1.5rem - 24px *\u002F\nvar(--text-3xl)   \u002F* 2rem - 32px *\u002F\nvar(--text-4xl)   \u002F* 2.5rem - 40px *\u002F\n\nvar(--font-normal)    \u002F* 400 *\u002F\nvar(--font-medium)    \u002F* 500 *\u002F\nvar(--font-semibold)  \u002F* 600 *\u002F\nvar(--font-bold)      \u002F* 700 *\u002F\n```\n\n#### Spacing\n```css\nvar(--space-1)   \u002F* 0.25rem - 4px *\u002F\nvar(--space-2)   \u002F* 0.5rem - 8px *\u002F\nvar(--space-3)   \u002F* 0.75rem - 12px *\u002F\nvar(--space-4)   \u002F* 1rem - 16px *\u002F\nvar(--space-6)   \u002F* 1.5rem - 24px *\u002F\nvar(--space-8)   \u002F* 2rem - 32px *\u002F\nvar(--space-12)  \u002F* 3rem - 48px *\u002F\n```\n\n#### Other Tokens\n```css\nvar(--radius-sm)  \u002F* 2px *\u002F\nvar(--radius-md)  \u002F* 4px *\u002F\nvar(--radius-lg)  \u002F* 8px *\u002F\n\nvar(--shadow-sm)  \u002F* Subtle elevation *\u002F\nvar(--shadow-md)  \u002F* Default card shadow *\u002F\nvar(--shadow-lg)  \u002F* Modal\u002Fdropdown shadow *\u002F\n\nvar(--transition-fast)   \u002F* 0.1s *\u002F\nvar(--transition-base)   \u002F* 0.15s *\u002F\nvar(--transition-slow)   \u002F* 0.3s *\u002F\n```\n\n## Rules\n\n### DO:\n- Always use `var(--token-name)` instead of hardcoded values\n- Use semantic color names (`--color-text-muted`) not raw values\n- Define styles in CSS files, not inline when possible\n- Use utility classes from design-system.css when they exist\n\n### DON'T:\n- Never use hardcoded hex colors like `#1a1a1a`\n- Never use hardcoded pixel values for spacing (use `var(--space-*)`)\n- Never modify the design system files without explicit permission\n- Don't duplicate tokens - use existing ones\n\n## Examples\n\n### Good: Using Design Tokens\n```css\n.nav-item {\n  padding: var(--space-2) var(--space-3);\n  font-size: var(--text-sm);\n  color: var(--color-text-muted);\n  border-radius: var(--radius-md);\n  transition: all var(--transition-base);\n}\n\n.nav-item:hover {\n  background: var(--color-accent-dim);\n  color: var(--color-accent);\n}\n```\n\n### Bad: Hardcoded Values\n```css\n\u002F* DON'T DO THIS *\u002F\n.nav-item {\n  padding: 8px 12px;\n  font-size: 14px;\n  color: #a8a29e;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n}\n```\n\n### In React\u002FAstro Components\n```tsx\n\u002F\u002F Inline styles should still use CSS variables\n\u003Cdiv style={{\n  padding: 'var(--space-4)',\n  backgroundColor: 'var(--color-surface)',\n  borderRadius: 'var(--radius-lg)'\n}}>\n  Content\n\u003C\u002Fdiv>\n```\n\n## Theme Switching\n\n### Adding Theme Toggle (Vanilla JS)\n```astro\n\u003Cscript is:inline>\n  \u002F\u002F Initialize theme from localStorage or system preference\n  const stored = localStorage.getItem('theme');\n  if (stored) {\n    document.documentElement.setAttribute('data-theme', stored);\n  }\n  \u002F\u002F else: CSS @media query handles auto-detection\n\u003C\u002Fscript>\n\n\u003Cscript is:inline>\n  document.getElementById('theme-toggle')?.addEventListener('click', () => {\n    const current = document.documentElement.getAttribute('data-theme');\n    const next = current === 'dark' ? 'light' : 'dark';\n    document.documentElement.setAttribute('data-theme', next);\n    localStorage.setItem('theme', next);\n  });\n\u003C\u002Fscript>\n```\n\n## Importing Styles\n\nIn your main layout:\n```astro\n---\n\u002F\u002F Layout.astro\n---\n\u003Chtml>\n  \u003Chead>\n    \u003Cstyle is:global>\n      @import '..\u002Fstyles\u002Fdesign-system.css';\n      @import '..\u002Fstyles\u002Ftheme-dark.css';\n      @import '..\u002Fstyles\u002Ftheme-light.css';\n    \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n\u003C\u002Fhtml>\n```\n\nOr import in your Astro config if using a build tool that supports it.\n",{},"main","456b6e5999d9613b2065544f7789689d31742769",".claude\u002Fskills\u002Fastro-design-system","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com","https:\u002F\u002Ffightingwithai.vercel.app","https:\u002F\u002Fgithub.com\u002Fjoshribakoff","joshribakoff.com","2026-01-22 14:44:35",{"source":7,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add joshribakoff\u002Ffightingwithai.com --skill astro-design-system",{"tool":51,"command":52},"bunx","bunx skills add joshribakoff\u002Ffightingwithai.com --skill astro-design-system",{"tool":54,"command":55},"pnpm","pnpm dlx skills add joshribakoff\u002Ffightingwithai.com --skill astro-design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fastro-design-system\u002FSKILL.md",true,[],[60,67,75,82,91,102],{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":33},"01M6C4Y9B23N3BZYDHRRVW13PF","simple-commands","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsimple-commands\u002FSKILL.md",[],[66],"simple commands",{"skillNo":68,"name":69,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":72,"publishedAt":33},"01M6C4Y7XQM8QNRMDDFXTDMW7P","meta-skill","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fmeta-skill\u002FSKILL.md",[],[73,74],"Meta","meta skill",{"skillNo":76,"name":77,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":33},"01M6C4Y65GQJC86RRJN64NZ4R5","magic-links","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fmagic-links\u002FSKILL.md",[],[81],"magic links",{"skillNo":83,"name":84,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":90,"publishedAt":33},"01M6C4Y508MC06FWACP82JNYMN","copywriting","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fcopywriting\u002FSKILL.md",[87],{"categoryNo":88,"categoryName":89,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",[84],{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":99,"publishedAt":33},"01M6C4Y2QWSAXM4QMZT7B148R7","content-ordering","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fcontent-ordering\u002FSKILL.md",[96],{"categoryNo":97,"categoryName":98,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[100,101],"content","content ordering",{"skillNo":103,"name":104,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":110,"publishedAt":33},"01M6C4Y0W01TCYVVFE4ZSQ8K02","code-cleanup","https:\u002F\u002Fgithub.com\u002Fjoshribakoff\u002Ffightingwithai.com\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fcode-cleanup\u002FSKILL.md",[107],{"categoryNo":108,"categoryName":109,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000030","开发工程师",[111,112,113],"cleanup","code","code cleanup"]