[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7EMQM8T2BFS05F6PBY7DQGM":3,"skill-same:01M7EMQM8T2BFS05F6PBY7DQGM":46},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":14,"repositoryHtmlUrl":27,"repositoryHomepageUrl":28,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M7EMQM8T2BFS05F6PBY7DQGM","core-components",null,"Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.","marnixGeerkens\u002Frocketlauncher-claude-code","marnixGeerkens","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F143275741?v=4","01M7EJY825SFPHDDZNFDAJHCA9","Marnix Geerkens","01M7EJY82TBA6ABXJ62JWR9B9F",0,"MIT","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fcore-components\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: core-components\ndescription: Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.\n---\n\n# Core Components\n\n## Design System Overview\n\nUse components from your core library instead of raw platform components. This ensures consistent styling and behavior.\n\n## Design Tokens\n\n**NEVER hard-code values. Always use design tokens.**\n\n### Spacing Tokens\n\n```tsx\n\u002F\u002F CORRECT - Use tokens\n\u003CBox padding=\"$4\" marginBottom=\"$2\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded values\n\u003CBox padding={16} marginBottom={8} \u002F>\n```\n\n| Token | Value |\n|-------|-------|\n| `$1` | 4px |\n| `$2` | 8px |\n| `$3` | 12px |\n| `$4` | 16px |\n| `$6` | 24px |\n| `$8` | 32px |\n\n### Color Tokens\n\n```tsx\n\u002F\u002F CORRECT - Semantic tokens\n\u003CText color=\"$textPrimary\" \u002F>\n\u003CBox backgroundColor=\"$backgroundSecondary\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded colors\n\u003CText color=\"#333333\" \u002F>\n\u003CBox backgroundColor=\"rgb(245, 245, 245)\" \u002F>\n```\n\n| Semantic Token | Use For |\n|----------------|---------|\n| `$textPrimary` | Main text |\n| `$textSecondary` | Supporting text |\n| `$textTertiary` | Disabled\u002Fhint text |\n| `$primary500` | Brand\u002Faccent color |\n| `$statusError` | Error states |\n| `$statusSuccess` | Success states |\n\n### Typography Tokens\n\n```tsx\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\" \u002F>\n```\n\n| Token | Size |\n|-------|------|\n| `$xs` | 12px |\n| `$sm` | 14px |\n| `$md` | 16px |\n| `$lg` | 18px |\n| `$xl` | 20px |\n| `$2xl` | 24px |\n\n## Core Components\n\n### Box\n\nBase layout component with token support:\n\n```tsx\n\u003CBox\n  padding=\"$4\"\n  backgroundColor=\"$backgroundPrimary\"\n  borderRadius=\"$lg\"\n>\n  {children}\n\u003C\u002FBox>\n```\n\n### HStack \u002F VStack\n\nHorizontal and vertical flex layouts:\n\n```tsx\n\u003CHStack gap=\"$3\" alignItems=\"center\">\n  \u003CIcon name=\"user\" \u002F>\n  \u003CText>Username\u003C\u002FText>\n\u003C\u002FHStack>\n\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CHeading>Title\u003C\u002FHeading>\n  \u003CText>Content\u003C\u002FText>\n\u003C\u002FVStack>\n```\n\n### Text\n\nTypography with token support:\n\n```tsx\n\u003CText\n  fontSize=\"$lg\"\n  fontWeight=\"$semibold\"\n  color=\"$textPrimary\"\n>\n  Hello World\n\u003C\u002FText>\n```\n\n### Button\n\nInteractive button with variants:\n\n```tsx\n\u003CButton\n  onPress={handlePress}\n  variant=\"solid\"\n  size=\"md\"\n  isLoading={loading}\n  isDisabled={disabled}\n>\n  Click Me\n\u003C\u002FButton>\n```\n\n| Variant | Use For |\n|---------|---------|\n| `solid` | Primary actions |\n| `outline` | Secondary actions |\n| `ghost` | Tertiary\u002Fsubtle actions |\n| `link` | Inline actions |\n\n### Input\n\nForm input with validation:\n\n```tsx\n\u003CInput\n  value={value}\n  onChangeText={setValue}\n  placeholder=\"Enter text\"\n  error={touched ? errors.field : undefined}\n  label=\"Field Name\"\n\u002F>\n```\n\n### Card\n\nContent container:\n\n```tsx\n\u003CCard padding=\"$4\" gap=\"$3\">\n  \u003CCardHeader>\n    \u003CHeading size=\"sm\">Card Title\u003C\u002FHeading>\n  \u003C\u002FCardHeader>\n  \u003CCardBody>\n    \u003CText>Card content\u003C\u002FText>\n  \u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n## Layout Patterns\n\n### Screen Layout\n\n```tsx\nconst MyScreen = () => (\n  \u003CScreen>\n    \u003CScreenHeader title=\"Page Title\" \u002F>\n    \u003CScreenContent padding=\"$4\">\n      {\u002F* Content *\u002F}\n    \u003C\u002FScreenContent>\n  \u003C\u002FScreen>\n);\n```\n\n### Form Layout\n\n```tsx\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CInput label=\"Name\" {...nameProps} \u002F>\n  \u003CInput label=\"Email\" {...emailProps} \u002F>\n  \u003CButton isLoading={loading}>Submit\u003C\u002FButton>\n\u003C\u002FVStack>\n```\n\n### List Item Layout\n\n```tsx\n\u003CHStack\n  padding=\"$4\"\n  gap=\"$3\"\n  alignItems=\"center\"\n  borderBottomWidth={1}\n  borderColor=\"$borderLight\"\n>\n  \u003CAvatar source={{ uri: imageUrl }} size=\"md\" \u002F>\n  \u003CVStack flex={1}>\n    \u003CText fontWeight=\"$semibold\">{title}\u003C\u002FText>\n    \u003CText color=\"$textSecondary\" fontSize=\"$sm\">{subtitle}\u003C\u002FText>\n  \u003C\u002FVStack>\n  \u003CIcon name=\"chevron-right\" color=\"$textTertiary\" \u002F>\n\u003C\u002FHStack>\n```\n\n## Anti-Patterns\n\n```tsx\n\u002F\u002F WRONG - Hard-coded values\n\u003CView style={{ padding: 16, backgroundColor: '#fff' }}>\n\n\u002F\u002F CORRECT - Design tokens\n\u003CBox padding=\"$4\" backgroundColor=\"$backgroundPrimary\">\n\n\n\u002F\u002F WRONG - Raw platform components\nimport { View, Text } from 'react-native';\n\n\u002F\u002F CORRECT - Core components\nimport { Box, Text } from 'components\u002Fcore';\n\n\n\u002F\u002F WRONG - Inline styles\n\u003CText style={{ fontSize: 18, fontWeight: '600' }}>\n\n\u002F\u002F CORRECT - Token props\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\">\n```\n\n## Component Props Pattern\n\nWhen creating components, use token-based props:\n\n```tsx\ninterface CardProps {\n  padding?: '$2' | '$4' | '$6';\n  variant?: 'elevated' | 'outlined' | 'filled';\n  children: React.ReactNode;\n}\n\nconst Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (\n  \u003CBox\n    padding={padding}\n    backgroundColor=\"$backgroundPrimary\"\n    borderRadius=\"$lg\"\n    {...variantStyles[variant]}\n  >\n    {children}\n  \u003C\u002FBox>\n);\n```\n\n## Integration with Other Skills\n\n- **react-ui-patterns**: Use core components for UI states\n- **testing-patterns**: Mock core components in tests\n- **storybook**: Document component variants\n","# Core Components\n\n## Design System Overview\n\nUse components from your core library instead of raw platform components. This ensures consistent styling and behavior.\n\n## Design Tokens\n\n**NEVER hard-code values. Always use design tokens.**\n\n### Spacing Tokens\n\n```tsx\n\u002F\u002F CORRECT - Use tokens\n\u003CBox padding=\"$4\" marginBottom=\"$2\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded values\n\u003CBox padding={16} marginBottom={8} \u002F>\n```\n\n| Token | Value |\n|-------|-------|\n| `$1` | 4px |\n| `$2` | 8px |\n| `$3` | 12px |\n| `$4` | 16px |\n| `$6` | 24px |\n| `$8` | 32px |\n\n### Color Tokens\n\n```tsx\n\u002F\u002F CORRECT - Semantic tokens\n\u003CText color=\"$textPrimary\" \u002F>\n\u003CBox backgroundColor=\"$backgroundSecondary\" \u002F>\n\n\u002F\u002F WRONG - Hard-coded colors\n\u003CText color=\"#333333\" \u002F>\n\u003CBox backgroundColor=\"rgb(245, 245, 245)\" \u002F>\n```\n\n| Semantic Token | Use For |\n|----------------|---------|\n| `$textPrimary` | Main text |\n| `$textSecondary` | Supporting text |\n| `$textTertiary` | Disabled\u002Fhint text |\n| `$primary500` | Brand\u002Faccent color |\n| `$statusError` | Error states |\n| `$statusSuccess` | Success states |\n\n### Typography Tokens\n\n```tsx\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\" \u002F>\n```\n\n| Token | Size |\n|-------|------|\n| `$xs` | 12px |\n| `$sm` | 14px |\n| `$md` | 16px |\n| `$lg` | 18px |\n| `$xl` | 20px |\n| `$2xl` | 24px |\n\n## Core Components\n\n### Box\n\nBase layout component with token support:\n\n```tsx\n\u003CBox\n  padding=\"$4\"\n  backgroundColor=\"$backgroundPrimary\"\n  borderRadius=\"$lg\"\n>\n  {children}\n\u003C\u002FBox>\n```\n\n### HStack \u002F VStack\n\nHorizontal and vertical flex layouts:\n\n```tsx\n\u003CHStack gap=\"$3\" alignItems=\"center\">\n  \u003CIcon name=\"user\" \u002F>\n  \u003CText>Username\u003C\u002FText>\n\u003C\u002FHStack>\n\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CHeading>Title\u003C\u002FHeading>\n  \u003CText>Content\u003C\u002FText>\n\u003C\u002FVStack>\n```\n\n### Text\n\nTypography with token support:\n\n```tsx\n\u003CText\n  fontSize=\"$lg\"\n  fontWeight=\"$semibold\"\n  color=\"$textPrimary\"\n>\n  Hello World\n\u003C\u002FText>\n```\n\n### Button\n\nInteractive button with variants:\n\n```tsx\n\u003CButton\n  onPress={handlePress}\n  variant=\"solid\"\n  size=\"md\"\n  isLoading={loading}\n  isDisabled={disabled}\n>\n  Click Me\n\u003C\u002FButton>\n```\n\n| Variant | Use For |\n|---------|---------|\n| `solid` | Primary actions |\n| `outline` | Secondary actions |\n| `ghost` | Tertiary\u002Fsubtle actions |\n| `link` | Inline actions |\n\n### Input\n\nForm input with validation:\n\n```tsx\n\u003CInput\n  value={value}\n  onChangeText={setValue}\n  placeholder=\"Enter text\"\n  error={touched ? errors.field : undefined}\n  label=\"Field Name\"\n\u002F>\n```\n\n### Card\n\nContent container:\n\n```tsx\n\u003CCard padding=\"$4\" gap=\"$3\">\n  \u003CCardHeader>\n    \u003CHeading size=\"sm\">Card Title\u003C\u002FHeading>\n  \u003C\u002FCardHeader>\n  \u003CCardBody>\n    \u003CText>Card content\u003C\u002FText>\n  \u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n## Layout Patterns\n\n### Screen Layout\n\n```tsx\nconst MyScreen = () => (\n  \u003CScreen>\n    \u003CScreenHeader title=\"Page Title\" \u002F>\n    \u003CScreenContent padding=\"$4\">\n      {\u002F* Content *\u002F}\n    \u003C\u002FScreenContent>\n  \u003C\u002FScreen>\n);\n```\n\n### Form Layout\n\n```tsx\n\u003CVStack gap=\"$4\" padding=\"$4\">\n  \u003CInput label=\"Name\" {...nameProps} \u002F>\n  \u003CInput label=\"Email\" {...emailProps} \u002F>\n  \u003CButton isLoading={loading}>Submit\u003C\u002FButton>\n\u003C\u002FVStack>\n```\n\n### List Item Layout\n\n```tsx\n\u003CHStack\n  padding=\"$4\"\n  gap=\"$3\"\n  alignItems=\"center\"\n  borderBottomWidth={1}\n  borderColor=\"$borderLight\"\n>\n  \u003CAvatar source={{ uri: imageUrl }} size=\"md\" \u002F>\n  \u003CVStack flex={1}>\n    \u003CText fontWeight=\"$semibold\">{title}\u003C\u002FText>\n    \u003CText color=\"$textSecondary\" fontSize=\"$sm\">{subtitle}\u003C\u002FText>\n  \u003C\u002FVStack>\n  \u003CIcon name=\"chevron-right\" color=\"$textTertiary\" \u002F>\n\u003C\u002FHStack>\n```\n\n## Anti-Patterns\n\n```tsx\n\u002F\u002F WRONG - Hard-coded values\n\u003CView style={{ padding: 16, backgroundColor: '#fff' }}>\n\n\u002F\u002F CORRECT - Design tokens\n\u003CBox padding=\"$4\" backgroundColor=\"$backgroundPrimary\">\n\n\n\u002F\u002F WRONG - Raw platform components\nimport { View, Text } from 'react-native';\n\n\u002F\u002F CORRECT - Core components\nimport { Box, Text } from 'components\u002Fcore';\n\n\n\u002F\u002F WRONG - Inline styles\n\u003CText style={{ fontSize: 18, fontWeight: '600' }}>\n\n\u002F\u002F CORRECT - Token props\n\u003CText fontSize=\"$lg\" fontWeight=\"$semibold\">\n```\n\n## Component Props Pattern\n\nWhen creating components, use token-based props:\n\n```tsx\ninterface CardProps {\n  padding?: '$2' | '$4' | '$6';\n  variant?: 'elevated' | 'outlined' | 'filled';\n  children: React.ReactNode;\n}\n\nconst Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (\n  \u003CBox\n    padding={padding}\n    backgroundColor=\"$backgroundPrimary\"\n    borderRadius=\"$lg\"\n    {...variantStyles[variant]}\n  >\n    {children}\n  \u003C\u002FBox>\n);\n```\n\n## Integration with Other Skills\n\n- **react-ui-patterns**: Use core components for UI states\n- **testing-patterns**: Mock core components in tests\n- **storybook**: Document component variants\n",{"name":5,"description":7},"main","4e647b68aabe849e143b6950971c380f7adccdef","components\u002Fskills\u002Fdevelopment\u002Fcore-components","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code","https:\u002F\u002Frocketlauncher.ai\u002Fclaude-code","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens","CEO of Rocketlauncher.ai\r\n\r\nObsessed with AI\r\n\r\njoin  https:\u002F\u002Fwww.skool.com\u002Frocketlauncher-university\r\n👉🏻 it's free ","2026-10-13 00:52:14",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add marnixGeerkens\u002Frocketlauncher-claude-code --skill core-components",{"tool":38,"command":39},"bunx","bunx skills add marnixGeerkens\u002Frocketlauncher-claude-code --skill core-components",{"tool":41,"command":42},"pnpm","pnpm dlx skills add marnixGeerkens\u002Frocketlauncher-claude-code --skill core-components","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Fcore-components\u002FSKILL.md",true,[],[47,54,63,70,77,84],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M7EQFDF4T3K89WMFVFQVT3C8","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points.  This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fzapier-make-patterns\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":58,"licenseFileUrl":59,"sourceHtmlUrl":60,"categories":61,"keywords":62,"publishedAt":19},"01M7EQFA5XQ0811Q4Q0WCFASZG","yeet","Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`).","Apache-2.0","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fyeet\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fyeet\u002FSKILL.md",[],[],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":69,"publishedAt":19},"01M7EQF4J6C2WKQWD9E2RQC6MJ","workflow-automation","Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off.  This skill covers the platforms (n8n, Temporal, Inngest) and patterns (sequential, parallel, orchestrator-worker) that turn brittle scripts into production-grade automation.  Key insight: The platforms make different tradeoffs. n8n optimizes for accessibility","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fworkflow-automation\u002FSKILL.md",[],[],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":76,"publishedAt":19},"01M7EQF1AT655CYYZBEQ8V6Z9D","trigger-dev","Trigger.dev expert for background jobs, AI workflows, and reliable async execution with excellent developer experience and TypeScript-first design. Use when: trigger.dev, trigger dev, background task, ai background job, long running task.","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Ftrigger-dev\u002FSKILL.md",[],[],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":19},"01M7EQEY9ENH0G2EJ1WD6C1CE8","slack-automation","Automate Slack workspace operations including messaging, search, channel management, and reaction workflows through Composio's Slack toolkit.","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Fslack-automation\u002FSKILL.md",[],[],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":58,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":19},"01M7EQESHEKPTE0QPW9R6XV5K2","rote","Compile a proven agent skill (a SKILL.md plus references) into a deterministic pipeline that runs without an LLM in the loop, then serve it back to Claude as an MCP tool. Use when: rote, compile this skill, turn this skill into a workflow, make this skill deterministic, make this skill cheaper or faster, harden this skill for production, run this skill as a background job.","https:\u002F\u002Fgithub.com\u002FmarnixGeerkens\u002Frocketlauncher-claude-code\u002Fblob\u002Fmain\u002Fcomponents\u002Fskills\u002Fworkflow-automation\u002Frote\u002FSKILL.md",[],[]]