[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KB6VQJKK5NW620MADC7FW1":3,"skill-same:01M6KB6VQJKK5NW620MADC7FW1":74},{"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":26,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":14,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":6,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6KB6VQJKK5NW620MADC7FW1","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.","imbasri\u002FlaraAI","imbasri","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F106748835?v=4","01M6KB1J0Q7VQ71CT93QS9FEMJ","Imam Basri","01M6KB1J4P9RQ4WZ6MNBW43X28",0,"MIT","https:\u002F\u002Fgithub.com\u002Fimbasri\u002FlaraAI\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"tailwindcss","development","tailwindcss development","laravel","mode","utility","card","database queries","message","forms","mobile","work","writing","Tailwind","api","database","product","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":15,"metadata":52,"description":7},{"author":30},"master","79beae0642932e7449e542b7e907f8283936ebb1",".agents\u002Fskills\u002Ftailwindcss-development","https:\u002F\u002Fgithub.com\u002Fimbasri\u002FlaraAI","https:\u002F\u002Fgithub.com\u002Fimbasri","\r\njust a fan of a cat 😸, and a coffee lover☕","2026-04-01 15:02:20",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add imbasri\u002FlaraAI --skill tailwindcss-development",{"tool":66,"command":67},"bunx","bunx skills add imbasri\u002FlaraAI --skill tailwindcss-development",{"tool":69,"command":70},"pnpm","pnpm dlx skills add imbasri\u002FlaraAI --skill tailwindcss-development","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fimbasri\u002FlaraAI\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",true,[],[75,101,127,151],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":82,"publishedAt":47},"01M6KB70J2FTRT2V9YYXJ3ND6X","wayfinder-development","Use this skill for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes. ALWAYS use this skill when frontend code needs to call backend routes or controller actions. Trigger when: connecting any React\u002FVue\u002FSvelte\u002FInertia frontend to Laravel controllers, routes, building end-to-end features with both frontend and backend, wiring up forms or links to backend endpoints, fixing route-related TypeScript errors, importing from @\u002Factions or @\u002Froutes, or running wayfinder:generate. Use Wayfinder route functions instead of hardcoded URLs. Covers: wayfinder() vite plugin, .url()\u002F.get()\u002F.post()\u002F.form(), query params, route model binding, tree-shaking. Do not use for backend-only task","https:\u002F\u002Fgithub.com\u002Fimbasri\u002FlaraAI\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fwayfinder-development\u002FSKILL.md",[81],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[83,28,84,85,86,87,30,88,89,90,91,92,93,94,95,96,97,98,99,100],"wayfinder development","wayfinder","frontend","code","actions","model","auto","only","up","query","get","svelte","end","inertia","URL","errors","which","wiring",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":110,"publishedAt":47},"01M6KB6PYE5N83TBVPYJ5T1YA6","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: it()\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\u002Fimbasri\u002FlaraAI\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fpest-testing\u002FSKILL.md",[107],{"categoryNo":108,"categoryName":109,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[111,112,113,114,98,115,116,117,118,119,120,90,121,30,122,123,86,124,125,126],"testing","pest testing","projects","directories","unit","how to","click","arch","activate","files","livewire","browser testing","browser","architecture","change","workflows",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":134,"publishedAt":47},"01M6KB6EH4RJA9FH2ZMCT25Y8W","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\u002Fimbasri\u002FlaraAI\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Flaravel-best-practices\u002FSKILL.md",[133],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[135,30,136,39,137,138,86,139,140,141,142,143,144,145,146,147,148,149,150,92],"laravel best practices","best practices","refactoring","issues","performance","security","patterns","code patterns","scheduled","reviews","security patterns","error","commands","strategies","caching","route",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":158,"publishedAt":47},"01M6KB6AE2CKSB1HPPMW5K6WV5","inertia-react-development","Develops Inertia.js v3 React client-side applications. Activates when creating React pages, forms, or navigation; using \u003CLink>, \u003CForm>, useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.","https:\u002F\u002Fgithub.com\u002Fimbasri\u002FlaraAI\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Finertia-react-development\u002FSKILL.md",[157],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[159,160,96,28,161,162,30,163,164,165,36,166,167,168,169,170,171,172,173],"react","inertia react development","applications","js","user","router","navigation","updates","with","pages","form","client","link","instant","v3"]