[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719TBY6327Z3MC239P9XC08":3,"skill-same:01M719TBY6327Z3MC239P9XC08":72},{"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":25,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":13,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M719TBY6327Z3MC239P9XC08","tailwindcss-development",null,"Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex\u002Fgrid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3\u002Fv4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML\u002FCSS component, CSS file audits, build tool configuration, and vanilla CSS.","cunlim\u002Fembed","cunlim","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F58944047?v=4","01M719SX0BQP2RA7SBSCGKAFVP","01M719SX10PPXCS2H85KTGTFFS",0,"MIT","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.agents\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000010","后端与接口",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"tailwindcss","development","tailwindcss development","when","writing","invoke","variants","mode","utility","card","database queries","message","work","laravel","Tailwind","api","database","component","components","css","2026-11-10 10:12:30",false,"---\nname: tailwindcss-development\ndescription: \"Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex\u002Fgrid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3\u002Fv4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML\u002FCSS component, CSS file audits, build tool configuration, and vanilla CSS.\"\nlicense: MIT\nmetadata:\n  author: laravel\n---\n\n# Tailwind CSS Development\n\n## Documentation\n\nUse `search-docs` for detailed Tailwind CSS v4 patterns and documentation.\n\n## Basic Usage\n\n- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.\n- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).\n- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.\n\n## Tailwind CSS v4 Specifics\n\n- Always use Tailwind CSS v4 and avoid deprecated utilities.\n- `corePlugins` is not supported in Tailwind v4.\n\n### CSS-First Configuration\n\nIn Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:\n\n\u003C!-- CSS-First Config -->\n```css\n@theme {\n  --color-brand: oklch(0.72 0.11 178);\n}\n```\n\n### Import Syntax\n\nIn Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:\n\n\u003C!-- v4 Import Syntax -->\n```diff\n- @tailwind base;\n- @tailwind components;\n- @tailwind utilities;\n+ @import \"tailwindcss\";\n```\n\n### Replaced Utilities\n\nTailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.\n\n| Deprecated | Replacement |\n|------------|-------------|\n| bg-opacity-* | bg-black\u002F* |\n| text-opacity-* | text-black\u002F* |\n| border-opacity-* | border-black\u002F* |\n| divide-opacity-* | divide-black\u002F* |\n| ring-opacity-* | ring-black\u002F* |\n| placeholder-opacity-* | placeholder-black\u002F* |\n| flex-shrink-* | shrink-* |\n| flex-grow-* | grow-* |\n| overflow-ellipsis | text-ellipsis |\n| decoration-slice | box-decoration-slice |\n| decoration-clone | box-decoration-clone |\n\n## Spacing\n\nUse `gap` utilities instead of margins for spacing between siblings:\n\n\u003C!-- Gap Utilities -->\n```html\n\u003Cdiv class=\"flex gap-8\">\n    \u003Cdiv>Item 1\u003C\u002Fdiv>\n    \u003Cdiv>Item 2\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n## Dark Mode\n\nIf existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:\n\n\u003C!-- Dark Mode -->\n```html\n\u003Cdiv class=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n    Content adapts to color scheme\n\u003C\u002Fdiv>\n```\n\n## Common Patterns\n\n### Flexbox Layout\n\n\u003C!-- Flexbox Layout -->\n```html\n\u003Cdiv class=\"flex items-center justify-between gap-4\">\n    \u003Cdiv>Left content\u003C\u002Fdiv>\n    \u003Cdiv>Right content\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Grid Layout\n\n\u003C!-- Grid Layout -->\n```html\n\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    \u003Cdiv>Card 1\u003C\u002Fdiv>\n    \u003Cdiv>Card 2\u003C\u002Fdiv>\n    \u003Cdiv>Card 3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n## Common Pitfalls\n\n- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)\n- Using `@tailwind` directives instead of `@import \"tailwindcss\"`\n- Trying to use `tailwind.config.js` instead of CSS `@theme` directive\n- Using margins for spacing between siblings instead of gap utilities\n- Forgetting to add dark mode variants when the project uses dark mode","# Tailwind CSS Development\n\n## Documentation\n\nUse `search-docs` for detailed Tailwind CSS v4 patterns and documentation.\n\n## Basic Usage\n\n- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.\n- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).\n- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.\n\n## Tailwind CSS v4 Specifics\n\n- Always use Tailwind CSS v4 and avoid deprecated utilities.\n- `corePlugins` is not supported in Tailwind v4.\n\n### CSS-First Configuration\n\nIn Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:\n\n\u003C!-- CSS-First Config -->\n```css\n@theme {\n  --color-brand: oklch(0.72 0.11 178);\n}\n```\n\n### Import Syntax\n\nIn Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:\n\n\u003C!-- v4 Import Syntax -->\n```diff\n- @tailwind base;\n- @tailwind components;\n- @tailwind utilities;\n+ @import \"tailwindcss\";\n```\n\n### Replaced Utilities\n\nTailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.\n\n| Deprecated | Replacement |\n|------------|-------------|\n| bg-opacity-* | bg-black\u002F* |\n| text-opacity-* | text-black\u002F* |\n| border-opacity-* | border-black\u002F* |\n| divide-opacity-* | divide-black\u002F* |\n| ring-opacity-* | ring-black\u002F* |\n| placeholder-opacity-* | placeholder-black\u002F* |\n| flex-shrink-* | shrink-* |\n| flex-grow-* | grow-* |\n| overflow-ellipsis | text-ellipsis |\n| decoration-slice | box-decoration-slice |\n| decoration-clone | box-decoration-clone |\n\n## Spacing\n\nUse `gap` utilities instead of margins for spacing between siblings:\n\n\u003C!-- Gap Utilities -->\n```html\n\u003Cdiv class=\"flex gap-8\">\n    \u003Cdiv>Item 1\u003C\u002Fdiv>\n    \u003Cdiv>Item 2\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n## Dark Mode\n\nIf existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:\n\n\u003C!-- Dark Mode -->\n```html\n\u003Cdiv class=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\">\n    Content adapts to color scheme\n\u003C\u002Fdiv>\n```\n\n## Common Patterns\n\n### Flexbox Layout\n\n\u003C!-- Flexbox Layout -->\n```html\n\u003Cdiv class=\"flex items-center justify-between gap-4\">\n    \u003Cdiv>Left content\u003C\u002Fdiv>\n    \u003Cdiv>Right content\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n### Grid Layout\n\n\u003C!-- Grid Layout -->\n```html\n\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    \u003Cdiv>Card 1\u003C\u002Fdiv>\n    \u003Cdiv>Card 2\u003C\u002Fdiv>\n    \u003Cdiv>Card 3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n## Common Pitfalls\n\n- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)\n- Using `@tailwind` directives instead of `@import \"tailwindcss\"`\n- Trying to use `tailwind.config.js` instead of CSS `@theme` directive\n- Using margins for spacing between siblings instead of gap utilities\n- Forgetting to add dark mode variants when the project uses dark mode",{"name":5,"license":14,"metadata":51,"description":7},{"author":39},"main","e9c25e4863c62fe5db448cb999264370704926af","laravel\u002F.agents\u002Fskills\u002Ftailwindcss-development","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed","https:\u002F\u002Fgithub.com\u002Fcunlim","2026-07-24 18:59:29",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add cunlim\u002Fembed --skill tailwindcss-development",{"tool":64,"command":65},"bunx","bunx skills add cunlim\u002Fembed --skill tailwindcss-development",{"tool":67,"command":68},"pnpm","pnpm dlx skills add cunlim\u002Fembed --skill tailwindcss-development","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.agents\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",true,[],[73,80,106,130,155,161],{"skillNo":74,"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":75,"categories":76,"keywords":79,"publishedAt":46},"01M719TT1P662RG2JNMBC437BM","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.claude\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",[77,78],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[26,28,27,45,40,35,33,32,36,30,34,31,42,29,44,39,41,38,43,37],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":89,"publishedAt":46},"01M719TQ6WG02TC2VD7MHXR4CK","socialite-development","Manages OAuth social authentication with Laravel Socialite. Activate when adding social login providers; configuring OAuth redirect\u002Fcallback flows; retrieving authenticated user details; customizing scopes or parameters; setting up community providers; testing with Socialite fakes; or when the user mentions social login, OAuth, Socialite, or third-party authentication.","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.claude\u002Fskills\u002Fsocialite-development\u002FSKILL.md",[86],{"categoryNo":87,"categoryName":88,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",[27,90,91,92,93,94,95,96,97,29,98,39,99,100,101,102,103,104,105],"socialite development","community","authentication","flows","testing","social","up","OAuth","activate","with","callback","login","party","third-party","Providers","user",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":113,"publishedAt":46},"01M719TKPQ1K82KN64HJVRSCG4","pest-testing","Use this skill for Pest PHP testing in Laravel projects only. Trigger whenever any test is being written, edited, fixed, or refactored — including fixing tests that broke after a code change, adding assertions, converting PHPUnit to Pest, adding datasets, and TDD workflows. Always activate when the user asks how to write something in Pest, mentions test files or directories (tests\u002FFeature, tests\u002FUnit, tests\u002FBrowser), or needs browser testing, smoke testing multiple pages for JS errors, or architecture tests. Covers: test()\u002Fit()\u002Fexpect() syntax, datasets, mocking, browser testing (visit\u002Fclick\u002Ffill), smoke testing, arch(), Livewire component tests, RefreshDatabase, and all Pest 4 features. Do not use for factories, seeders, migrations, controllers, models, or non-test PHP code.","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.claude\u002Fskills\u002Fpest-testing\u002FSKILL.md",[112],{"categoryNo":87,"categoryName":88,"taxonomyType":20,"taxonomyTypeDesc":21},[114,94,115,116,117,118,119,120,121,122,123,124,29,125,98,39,126,127,128,129],"pest testing","unit","projects","click","directories","browser testing","errors","how to","only","files","workflows","code","architecture","livewire","browser","change",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":137,"publishedAt":46},"01M719TF7KBQ2T3JM71TWYER8C","laravel-best-practices","Apply this skill whenever writing, reviewing, or refactoring Laravel PHP code. This includes creating or modifying controllers, models, migrations, form requests, policies, jobs, scheduled commands, service classes, and Eloquent queries. Triggers for N+1 and query performance issues, caching strategies, authorization and security patterns, validation, error handling, queue and job configuration, route definitions, and architectural decisions. Also use for Laravel code reviews and refactoring existing Laravel code to follow best practices. Covers any task involving Laravel backend PHP code patterns.","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.claude\u002Fskills\u002Flaravel-best-practices\u002FSKILL.md",[136],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[39,138,139,140,141,142,143,30,144,145,146,147,125,148,149,150,151,152,153,154],"best practices","laravel best practices","error","reviews","performance","issues","scheduled","caching","query","code patterns","route","strategies","refactoring","commands","security","security patterns","eloquent",{"skillNo":156,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":160,"publishedAt":46},"01M719T9PEXG8SNP0N4DEHGF8Q","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.agents\u002Fskills\u002Fsocialite-development\u002FSKILL.md",[159],{"categoryNo":87,"categoryName":88,"taxonomyType":20,"taxonomyTypeDesc":21},[27,90,91,92,93,94,95,96,97,29,98,39,99,100,101,102,103,104,105],{"skillNo":162,"name":108,"nameZh":6,"description":109,"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":166,"publishedAt":46},"01M719T6BQXBVGYRB3HJAYAVJA","https:\u002F\u002Fgithub.com\u002Fcunlim\u002Fembed\u002Fblob\u002Fmain\u002Flaravel\u002F.agents\u002Fskills\u002Fpest-testing\u002FSKILL.md",[165],{"categoryNo":87,"categoryName":88,"taxonomyType":20,"taxonomyTypeDesc":21},[114,94,115,116,117,118,119,120,121,122,123,124,29,125,98,39,126,127,128,129]]