[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6J6QSDZX70HMYCYEW7A2AHF":3,"skill-same:01M6J6QSDZX70HMYCYEW7A2AHF":104},{"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":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":14,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":48,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6J6QSDZX70HMYCYEW7A2AHF","shopify",null,"Build Shopify applications, extensions, and themes using GraphQL\u002FREST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product\u002Forder\u002Fcustomer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.","ldanh270\u002Fcreate-skills-kit","ldanh270","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F117491247?v=4","01M6J6JM6HXDA2QYTMNGQC3QBV","Lê Đức Anh","01M6J6JMAM2DEECQ418M736HRV",0,"MIT","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],"api","implementing","billing","processing","themes","checkout","apps","app","webhook","cli","data","flow","ui","product","capabilities","authentication","components","customer","dashboard","2026-11-10 10:12:30",false,"---\nname: shopify\ndescription: Build Shopify applications, extensions, and themes using GraphQL\u002FREST APIs, Shopify CLI, Polaris UI components, and Liquid templating. Capabilities include app development with OAuth authentication, checkout UI extensions for customizing checkout flow, admin UI extensions for dashboard integration, POS extensions for retail, theme development with Liquid, webhook management, billing API integration, product\u002Forder\u002Fcustomer management. Use when building Shopify apps, implementing checkout customizations, creating admin interfaces, developing themes, integrating payment processing, managing store data via APIs, or extending Shopify functionality.\n---\n\n# Shopify Development\n\nComprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.\n\n## Platform Overview\n\n**Core Components:**\n- **Shopify CLI** - Development workflow tool\n- **GraphQL Admin API** - Primary API for data operations (recommended)\n- **REST Admin API** - Legacy API (maintenance mode)\n- **Polaris UI** - Design system for consistent interfaces\n- **Liquid** - Template language for themes\n\n**Extension Points:**\n- Checkout UI - Customize checkout experience\n- Admin UI - Extend admin dashboard\n- POS UI - Point of Sale customization\n- Customer Account - Post-purchase pages\n- Theme App Extensions - Embedded theme functionality\n\n## Quick Start\n\n### Prerequisites\n\n```bash\n# Install Shopify CLI\nnpm install -g @shopify\u002Fcli@latest\n\n# Verify installation\nshopify version\n```\n\n### Create New App\n\n```bash\n# Initialize app\nshopify app init\n\n# Start development server\nshopify app dev\n\n# Generate extension\nshopify app generate extension --type checkout_ui_extension\n\n# Deploy\nshopify app deploy\n```\n\n### Theme Development\n\n```bash\n# Initialize theme\nshopify theme init\n\n# Start local preview\nshopify theme dev\n\n# Pull from store\nshopify theme pull --live\n\n# Push to store\nshopify theme push --development\n```\n\n## Development Workflow\n\n### 1. App Development\n\n**Setup:**\n```bash\nshopify app init\ncd my-app\n```\n\n**Configure Access Scopes** (`shopify.app.toml`):\n```toml\n[access_scopes]\nscopes = \"read_products,write_products,read_orders\"\n```\n\n**Start Development:**\n```bash\nshopify app dev  # Starts local server with tunnel\n```\n\n**Add Extensions:**\n```bash\nshopify app generate extension --type checkout_ui_extension\n```\n\n**Deploy:**\n```bash\nshopify app deploy  # Builds and uploads to Shopify\n```\n\n### 2. Extension Development\n\n**Available Types:**\n- Checkout UI - `checkout_ui_extension`\n- Admin Action - `admin_action`\n- Admin Block - `admin_block`\n- POS UI - `pos_ui_extension`\n- Function - `function` (discounts, payment, delivery, validation)\n\n**Workflow:**\n```bash\nshopify app generate extension\n# Select type, configure\nshopify app dev  # Test locally\nshopify app deploy  # Publish\n```\n\n### 3. Theme Development\n\n**Setup:**\n```bash\nshopify theme init\n# Choose Dawn (reference theme) or start fresh\n```\n\n**Local Development:**\n```bash\nshopify theme dev\n# Preview at localhost:9292\n# Auto-syncs to development theme\n```\n\n**Deployment:**\n```bash\nshopify theme push --development  # Push to dev theme\nshopify theme publish --theme=123  # Set as live\n```\n\n## When to Build What\n\n### Build an App When:\n- Integrating external services\n- Adding functionality across multiple stores\n- Building merchant-facing admin tools\n- Managing store data programmatically\n- Implementing complex business logic\n- Charging for functionality\n\n### Build an Extension When:\n- Customizing checkout flow\n- Adding fields\u002Ffeatures to admin pages\n- Creating POS actions for retail\n- Implementing discount\u002Fpayment\u002Fshipping rules\n- Extending customer account pages\n\n### Build a Theme When:\n- Creating custom storefront design\n- Building unique shopping experiences\n- Customizing product\u002Fcollection pages\n- Implementing brand-specific layouts\n- Modifying homepage\u002Fcontent pages\n\n### Combination Approach:\n**App + Theme Extension:**\n- App handles backend logic and data\n- Theme extension provides storefront UI\n- Example: Product reviews, wishlists, size guides\n\n## Essential Patterns\n\n### GraphQL Product Query\n\n```graphql\nquery GetProducts($first: Int!) {\n  products(first: $first) {\n    edges {\n      node {\n        id\n        title\n        handle\n        variants(first: 5) {\n          edges {\n            node {\n              id\n              price\n              inventoryQuantity\n            }\n          }\n        }\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n```\n\n### Checkout Extension (React)\n\n```javascript\nimport { reactExtension, BlockStack, TextField, Checkbox } from '@shopify\u002Fui-extensions-react\u002Fcheckout';\n\nexport default reactExtension('purchase.checkout.block.render', () => \u003CExtension \u002F>);\n\nfunction Extension() {\n  const [message, setMessage] = useState('');\n\n  return (\n    \u003CBlockStack>\n      \u003CTextField label=\"Gift Message\" value={message} onChange={setMessage} \u002F>\n    \u003C\u002FBlockStack>\n  );\n}\n```\n\n### Liquid Product Display\n\n```liquid\n{% for product in collection.products %}\n  \u003Cdiv class=\"product-card\">\n    \u003Cimg src=\"{{ product.featured_image | img_url: 'medium' }}\" alt=\"{{ product.title }}\">\n    \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n    \u003Cp>{{ product.price | money }}\u003C\u002Fp>\n    \u003Ca href=\"{{ product.url }}\">View Details\u003C\u002Fa>\n  \u003C\u002Fdiv>\n{% endfor %}\n```\n\n## Best Practices\n\n**API Usage:**\n- Prefer GraphQL over REST for new development\n- Request only needed fields to reduce costs\n- Implement pagination for large datasets\n- Use bulk operations for batch processing\n- Respect rate limits (cost-based for GraphQL)\n\n**Security:**\n- Store API credentials in environment variables\n- Verify webhook signatures\n- Use OAuth for public apps\n- Request minimal access scopes\n- Implement session tokens for embedded apps\n\n**Performance:**\n- Cache API responses when appropriate\n- Optimize images in themes\n- Minimize Liquid logic complexity\n- Use async loading for extensions\n- Monitor query costs in GraphQL\n\n**Testing:**\n- Use development stores for testing\n- Test across different store plans\n- Verify mobile responsiveness\n- Check accessibility (keyboard, screen readers)\n- Validate GDPR compliance\n\n## Reference Documentation\n\nDetailed guides for advanced topics:\n\n- **[App Development](references\u002Fapp-development.md)** - OAuth, APIs, webhooks, billing\n- **[Extensions](references\u002Fextensions.md)** - Checkout, Admin, POS, Functions\n- **[Themes](references\u002Fthemes.md)** - Liquid, sections, deployment\n\n## Scripts\n\n**[shopify_init.py](scripts\u002Fshopify_init.py)** - Initialize Shopify projects interactively\n```bash\npython scripts\u002Fshopify_init.py\n```\n\n## Troubleshooting\n\n**Rate Limit Errors:**\n- Monitor `X-Shopify-Shop-Api-Call-Limit` header\n- Implement exponential backoff\n- Use bulk operations for large datasets\n\n**Authentication Failures:**\n- Verify access token validity\n- Check required scopes granted\n- Ensure OAuth flow completed\n\n**Extension Not Appearing:**\n- Verify extension target correct\n- Check extension published\n- Ensure app installed on store\n\n**Webhook Not Receiving:**\n- Verify webhook URL accessible\n- Check signature validation\n- Review logs in Partner Dashboard\n\n## Resources\n\n**Official Documentation:**\n- Shopify Docs: https:\u002F\u002Fshopify.dev\u002Fdocs\n- GraphQL API: https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fadmin-graphql\n- Shopify CLI: https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fshopify-cli\n- Polaris: https:\u002F\u002Fpolaris.shopify.com\n\n**Tools:**\n- GraphiQL Explorer (Admin → Settings → Apps → Develop apps)\n- Partner Dashboard (app management)\n- Development stores (free testing)\n\n**API Versioning:**\n- Quarterly releases (YYYY-MM format)\n- Current: 2025-01\n- 12-month support per version\n- Test before version updates\n\n---\n\n**Note:** This skill covers Shopify platform as of January 2025. Refer to official documentation for latest updates.\n","# Shopify Development\n\nComprehensive guide for building on Shopify platform: apps, extensions, themes, and API integrations.\n\n## Platform Overview\n\n**Core Components:**\n- **Shopify CLI** - Development workflow tool\n- **GraphQL Admin API** - Primary API for data operations (recommended)\n- **REST Admin API** - Legacy API (maintenance mode)\n- **Polaris UI** - Design system for consistent interfaces\n- **Liquid** - Template language for themes\n\n**Extension Points:**\n- Checkout UI - Customize checkout experience\n- Admin UI - Extend admin dashboard\n- POS UI - Point of Sale customization\n- Customer Account - Post-purchase pages\n- Theme App Extensions - Embedded theme functionality\n\n## Quick Start\n\n### Prerequisites\n\n```bash\n# Install Shopify CLI\nnpm install -g @shopify\u002Fcli@latest\n\n# Verify installation\nshopify version\n```\n\n### Create New App\n\n```bash\n# Initialize app\nshopify app init\n\n# Start development server\nshopify app dev\n\n# Generate extension\nshopify app generate extension --type checkout_ui_extension\n\n# Deploy\nshopify app deploy\n```\n\n### Theme Development\n\n```bash\n# Initialize theme\nshopify theme init\n\n# Start local preview\nshopify theme dev\n\n# Pull from store\nshopify theme pull --live\n\n# Push to store\nshopify theme push --development\n```\n\n## Development Workflow\n\n### 1. App Development\n\n**Setup:**\n```bash\nshopify app init\ncd my-app\n```\n\n**Configure Access Scopes** (`shopify.app.toml`):\n```toml\n[access_scopes]\nscopes = \"read_products,write_products,read_orders\"\n```\n\n**Start Development:**\n```bash\nshopify app dev  # Starts local server with tunnel\n```\n\n**Add Extensions:**\n```bash\nshopify app generate extension --type checkout_ui_extension\n```\n\n**Deploy:**\n```bash\nshopify app deploy  # Builds and uploads to Shopify\n```\n\n### 2. Extension Development\n\n**Available Types:**\n- Checkout UI - `checkout_ui_extension`\n- Admin Action - `admin_action`\n- Admin Block - `admin_block`\n- POS UI - `pos_ui_extension`\n- Function - `function` (discounts, payment, delivery, validation)\n\n**Workflow:**\n```bash\nshopify app generate extension\n# Select type, configure\nshopify app dev  # Test locally\nshopify app deploy  # Publish\n```\n\n### 3. Theme Development\n\n**Setup:**\n```bash\nshopify theme init\n# Choose Dawn (reference theme) or start fresh\n```\n\n**Local Development:**\n```bash\nshopify theme dev\n# Preview at localhost:9292\n# Auto-syncs to development theme\n```\n\n**Deployment:**\n```bash\nshopify theme push --development  # Push to dev theme\nshopify theme publish --theme=123  # Set as live\n```\n\n## When to Build What\n\n### Build an App When:\n- Integrating external services\n- Adding functionality across multiple stores\n- Building merchant-facing admin tools\n- Managing store data programmatically\n- Implementing complex business logic\n- Charging for functionality\n\n### Build an Extension When:\n- Customizing checkout flow\n- Adding fields\u002Ffeatures to admin pages\n- Creating POS actions for retail\n- Implementing discount\u002Fpayment\u002Fshipping rules\n- Extending customer account pages\n\n### Build a Theme When:\n- Creating custom storefront design\n- Building unique shopping experiences\n- Customizing product\u002Fcollection pages\n- Implementing brand-specific layouts\n- Modifying homepage\u002Fcontent pages\n\n### Combination Approach:\n**App + Theme Extension:**\n- App handles backend logic and data\n- Theme extension provides storefront UI\n- Example: Product reviews, wishlists, size guides\n\n## Essential Patterns\n\n### GraphQL Product Query\n\n```graphql\nquery GetProducts($first: Int!) {\n  products(first: $first) {\n    edges {\n      node {\n        id\n        title\n        handle\n        variants(first: 5) {\n          edges {\n            node {\n              id\n              price\n              inventoryQuantity\n            }\n          }\n        }\n      }\n    }\n    pageInfo {\n      hasNextPage\n      endCursor\n    }\n  }\n}\n```\n\n### Checkout Extension (React)\n\n```javascript\nimport { reactExtension, BlockStack, TextField, Checkbox } from '@shopify\u002Fui-extensions-react\u002Fcheckout';\n\nexport default reactExtension('purchase.checkout.block.render', () => \u003CExtension \u002F>);\n\nfunction Extension() {\n  const [message, setMessage] = useState('');\n\n  return (\n    \u003CBlockStack>\n      \u003CTextField label=\"Gift Message\" value={message} onChange={setMessage} \u002F>\n    \u003C\u002FBlockStack>\n  );\n}\n```\n\n### Liquid Product Display\n\n```liquid\n{% for product in collection.products %}\n  \u003Cdiv class=\"product-card\">\n    \u003Cimg src=\"{{ product.featured_image | img_url: 'medium' }}\" alt=\"{{ product.title }}\">\n    \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n    \u003Cp>{{ product.price | money }}\u003C\u002Fp>\n    \u003Ca href=\"{{ product.url }}\">View Details\u003C\u002Fa>\n  \u003C\u002Fdiv>\n{% endfor %}\n```\n\n## Best Practices\n\n**API Usage:**\n- Prefer GraphQL over REST for new development\n- Request only needed fields to reduce costs\n- Implement pagination for large datasets\n- Use bulk operations for batch processing\n- Respect rate limits (cost-based for GraphQL)\n\n**Security:**\n- Store API credentials in environment variables\n- Verify webhook signatures\n- Use OAuth for public apps\n- Request minimal access scopes\n- Implement session tokens for embedded apps\n\n**Performance:**\n- Cache API responses when appropriate\n- Optimize images in themes\n- Minimize Liquid logic complexity\n- Use async loading for extensions\n- Monitor query costs in GraphQL\n\n**Testing:**\n- Use development stores for testing\n- Test across different store plans\n- Verify mobile responsiveness\n- Check accessibility (keyboard, screen readers)\n- Validate GDPR compliance\n\n## Reference Documentation\n\nDetailed guides for advanced topics:\n\n- **[App Development](references\u002Fapp-development.md)** - OAuth, APIs, webhooks, billing\n- **[Extensions](references\u002Fextensions.md)** - Checkout, Admin, POS, Functions\n- **[Themes](references\u002Fthemes.md)** - Liquid, sections, deployment\n\n## Scripts\n\n**[shopify_init.py](scripts\u002Fshopify_init.py)** - Initialize Shopify projects interactively\n```bash\npython scripts\u002Fshopify_init.py\n```\n\n## Troubleshooting\n\n**Rate Limit Errors:**\n- Monitor `X-Shopify-Shop-Api-Call-Limit` header\n- Implement exponential backoff\n- Use bulk operations for large datasets\n\n**Authentication Failures:**\n- Verify access token validity\n- Check required scopes granted\n- Ensure OAuth flow completed\n\n**Extension Not Appearing:**\n- Verify extension target correct\n- Check extension published\n- Ensure app installed on store\n\n**Webhook Not Receiving:**\n- Verify webhook URL accessible\n- Check signature validation\n- Review logs in Partner Dashboard\n\n## Resources\n\n**Official Documentation:**\n- Shopify Docs: https:\u002F\u002Fshopify.dev\u002Fdocs\n- GraphQL API: https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fadmin-graphql\n- Shopify CLI: https:\u002F\u002Fshopify.dev\u002Fdocs\u002Fapi\u002Fshopify-cli\n- Polaris: https:\u002F\u002Fpolaris.shopify.com\n\n**Tools:**\n- GraphiQL Explorer (Admin → Settings → Apps → Develop apps)\n- Partner Dashboard (app management)\n- Development stores (free testing)\n\n**API Versioning:**\n- Quarterly releases (YYYY-MM format)\n- Current: 2025-01\n- 12-month support per version\n- Test before version updates\n\n---\n\n**Note:** This skill covers Shopify platform as of January 2025. Refer to official documentation for latest updates.\n",{"name":5,"description":7},"main","b0fa28db5a831028e418b3335a5654dd75fcb95b","source\u002F.agent\u002Fskills\u002Fshopify","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit","https:\u002F\u002Fgithub.com\u002Fldanh270","https:\u002F\u002Fldanh270.vercel.app\u002F","Software engineer with an algorithmic foundation, focused on building scalable, performant, and impactful web applications.","2026-03-26 11:23:48",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add ldanh270\u002Fcreate-skills-kit --skill shopify",{"tool":57,"command":58},"bunx","bunx skills add ldanh270\u002Fcreate-skills-kit --skill shopify",{"tool":60,"command":61},"pnpm","pnpm dlx skills add ldanh270\u002Fcreate-skills-kit --skill shopify","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002FSKILL.md",true,[65,71,75,79,83,89,93,97,100],{"path":66,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"README.md","REFERENCE","参考文档",1687,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002FREADME.md",{"path":72,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":73,"sourceHtmlUrl":74},"references\u002Fapp-development.md",9657,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Freferences\u002Fapp-development.md",{"path":76,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":77,"sourceHtmlUrl":78},"references\u002Fextensions.md",10544,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Freferences\u002Fextensions.md",{"path":80,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fthemes.md",10324,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Freferences\u002Fthemes.md",{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"scripts\u002F.coverage","SCRIPT","脚本",53248,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Fscripts\u002F.coverage",{"path":90,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":91,"sourceHtmlUrl":92},"scripts\u002Frequirements.txt",452,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Fscripts\u002Frequirements.txt",{"path":94,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":95,"sourceHtmlUrl":96},"scripts\u002Fshopify_init.py",12585,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Fscripts\u002Fshopify_init.py",{"path":98,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":99},"scripts\u002Ftests\u002F.coverage","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Fscripts\u002Ftests\u002F.coverage",{"path":101,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":102,"sourceHtmlUrl":103},"scripts\u002Ftests\u002Ftest_shopify_init.py",13319,"https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fshopify\u002Fscripts\u002Ftests\u002Ftest_shopify_init.py",[105,129,162,185,200,225],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":38},"01M6J6RSG4FR9B5FG3R8BGM9YH","web-frameworks","Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined\u002Ffilled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[112,113,114,115,20,116,117,26,118,119,120,121,122,123,124,125,126,127,35,128],"web frameworks","web","frameworks","projects","Server Components","remote","shared","strategies","caching","up","router","monorepo","server","packages","libraries","react","performance",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":145,"publishedAt":38},"01M6J6RDB5RPFA1C39JC4XHSS7","ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fui-styling\u002FSKILL.md",[135,140],{"categoryNo":136,"categoryName":137,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":141,"categoryName":142,"taxonomyType":143,"taxonomyTypeDesc":144},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[31,146,147,148,149,150,151,152,153,154,155,156,35,157,158,159,23,20,160,161],"styling","ui styling","design systems","patterns","forms","across","Tailwind","responsive","shadcn","tables","create","canvas","css","design","mode","utility",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":168,"publishedAt":38},"01M6J6R697SCC1P1AFRZ0KZJ72","threejs","Build immersive 3D web experiences with Three.js - WebGL\u002FWebGPU library for scenes, cameras, geometries, materials, lights, animations, loaders, post-processing, shaders (including node-based TSL), compute, physics, VR\u002FXR, and advanced rendering. Use when creating 3D visualizations, games, interactive graphics, data viz, product configurators, architectural walkthroughs, or WebGL\u002FWebGPU applications. Covers OrbitControls, GLTF\u002FFBX loading, PBR materials, shadow mapping, post-processing effects (bloom, SSAO, SSR), custom shaders, instancing, LOD, animation systems, and WebXR.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fthreejs\u002FSKILL.md",[],[164,169,170,171,172,32,173,22,174,175,176,177,178,179,29,180,181,182,183,184],"bloom","post-processing","advanced","mapping","rendering","animation systems","physics","data viz","node","3D","Animation","library","loading","shaders","ssr","webgpu",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":194,"publishedAt":38},"01M6J6R2Z8VBZ6NV4341JZZNQC","template-skill","Replace with description of the skill and when Claude should use it.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Ftemplate-skill\u002FSKILL.md",[191],{"categoryNo":192,"categoryName":193,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000023","Skill与智能体开发",[195,196,197,198,199],"template","template skill","with","it","use",{"skillNo":201,"name":202,"nameZh":6,"description":203,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":206,"publishedAt":38},"01M6J6QKMCVT5VJE498JZ3WQKZ","sequential-thinking","Apply structured, reflective problem-solving for complex tasks requiring multi-step analysis, revision capability, and hypothesis verification. Use for complex problem decomposition, adaptive planning, analysis needing course correction, problems with unclear scope, multi-step solutions, and hypothesis-driven work.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fsequential-thinking\u002FSKILL.md",[],[207,208,209,210,211,212,213,214,215,216,199,217,218,197,219,220,221,222,223,224],"thinking","sequential thinking","hypothesis","multi","problem","scope","driven","decomposition","structured","problem-solving","work","analysis","verification","planning","tasks","for","revision","course",{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":229,"categories":230,"keywords":234,"publishedAt":38},"01M6J6QGB52QCFEFZ07B89BD1S","research","Use when you need to research, analyze, and plan technical solutions that are scalable, secure, and maintainable.","https:\u002F\u002Fgithub.com\u002Fldanh270\u002Fcreate-skills-kit\u002Fblob\u002Fmain\u002Fsource\u002F.agent\u002Fskills\u002Fresearch\u002FSKILL.md",[231],{"categoryNo":232,"categoryName":233,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000021","资料检索与研究",[227,235,236,199,237,238,239,240],"you","Scalable","technical","analyze","plan","secure"]