[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7DS6BC3AW7HTPRHE2TTVKWM":3,"skill-same:01M7DS6BC3AW7HTPRHE2TTVKWM":47},{"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":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":6,"ownerHtmlUrl":31,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":32,"install":33,"resources":46},"01M7DS6BC3AW7HTPRHE2TTVKWM","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.","Hazek-dc\u002FPresensiGuru_FaceNet_EMAR","Hazek-dc","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F75208960?v=4","01M7DEQV5B4YGS86A81DYH81DR","Hazek","01M7DEQV5XP4TM0C6NTHXCXCHR",1,"MIT","https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",[],[],"2026-11-15 14:19:17",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 v3 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 v3 Specifics\n\n- Always use Tailwind CSS v3 and verify you're using only classes it supports.\n- Configuration is done in the `tailwind.config.js` file.\n- Import using `@tailwind` directives:\n\n\u003C!-- v3 Import Syntax -->\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n## Spacing\n\nWhen listing items, use gap utilities for spacing; don't use margins.\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## Verification\n\n1. Check browser for visual rendering\n2. Test responsive breakpoints\n3. Verify dark mode if project uses it\n\n## Common Pitfalls\n\n- Using margins for spacing between siblings instead of gap utilities\n- Forgetting to add dark mode variants when the project uses dark mode\n- Not checking existing project conventions before adding new utilities\n- Overusing inline styles when Tailwind classes would suffice\n","# Tailwind CSS Development\n\n## Documentation\n\nUse `search-docs` for detailed Tailwind CSS v3 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 v3 Specifics\n\n- Always use Tailwind CSS v3 and verify you're using only classes it supports.\n- Configuration is done in the `tailwind.config.js` file.\n- Import using `@tailwind` directives:\n\n\u003C!-- v3 Import Syntax -->\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n## Spacing\n\nWhen listing items, use gap utilities for spacing; don't use margins.\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## Verification\n\n1. Check browser for visual rendering\n2. Test responsive breakpoints\n3. Verify dark mode if project uses it\n\n## Common Pitfalls\n\n- Using margins for spacing between siblings instead of gap utilities\n- Forgetting to add dark mode variants when the project uses dark mode\n- Not checking existing project conventions before adding new utilities\n- Overusing inline styles when Tailwind classes would suffice\n",{"name":5,"license":15,"metadata":24,"description":7},{"author":25},"laravel","main","b1e4ffadb4f933bbbcaa03a83f8b9929171ac28b","attendance-web\u002F.claude\u002Fskills\u002Ftailwindcss-development",0,"https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR","https:\u002F\u002Fgithub.com\u002FHazek-dc","2026-10-22 08:36:44",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add Hazek-dc\u002FPresensiGuru_FaceNet_EMAR --skill tailwindcss-development",{"tool":39,"command":40},"bunx","bunx skills add Hazek-dc\u002FPresensiGuru_FaceNet_EMAR --skill tailwindcss-development",{"tool":42,"command":43},"pnpm","pnpm dlx skills add Hazek-dc\u002FPresensiGuru_FaceNet_EMAR --skill tailwindcss-development","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Ftailwindcss-development\u002FSKILL.md",true,[],[48,55,62,69,76,83],{"skillNo":49,"name":50,"nameZh":6,"description":51,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":52,"categories":53,"keywords":54,"publishedAt":19},"01M7DS6GGYRZAYD33PFPS8Z2T3","testing-best-practices","Laravel test design and review. Use when selecting coverage, naming or structuring tests, choosing assertions or test data, isolating dependencies, testing HTTP or security boundaries, improving suite performance, or reviewing test value. Use framework guidance or search-docs for Pest and PHPUnit syntax.","https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Ftesting-best-practices\u002FSKILL.md",[],[],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":19},"01M7DS66GE6B11MYJDVC74HXM4","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\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Flaravel-best-practices\u002FSKILL.md",[],[],{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M7DS5ZW717DMS6P1E90AQCKV","infer-conventions","Use this skill to analyze how a Laravel application is actually written and record its conventions as shared rules. Trigger when the user wants to detect, infer, document, or standardize project conventions or coding style, set up or grow `.ai\u002Frules`, resolve mixed or conflicting patterns (e.g. \"are we using Form Requests or inline validation?\"), or onboard agents and teammates to \"how we do things here\". Covers: a systematic sweep of ~49 Laravel convention dimensions (validation, models, architecture, testing, frontend, database, console), open-ended house-pattern discovery, conflict reporting, and recording rules scoped to the right paths via the Boost `record-rule` MCP tool. Only run this skill when the user explicitly asks for it; never start a sweep as part of another task. Do not use for one-off code review, enforcing formatting a linter already handles, or editing `.ai\u002Frules` files by hand.","https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Finfer-conventions\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M7DS5W12RGCVJTFQJ1N0GB8E","inertia-react-development","Develops Inertia.js v2 React client-side applications. Activates when creating React pages, forms, or navigation; using \u003CLink>, \u003CForm>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.","https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Finertia-react-development\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":19},"01M7DS5PVDPMPCWSK2RXPDC9BB","deploying-to-cloud","Deploys and manages Laravel applications on Laravel Cloud using the `cloud` CLI. Use when the user wants to deploy an app, ship to Cloud, create or manage applications, environments, databases, caches, object storage, queues, domains, instances, background processes, secrets, compute, scheduled tasks, or Laravel Cloud infrastructure; or check billing, usage, or spend. Triggers on deployment, shipping, Cloud management, environment setup, database provisioning, billing or usage queries, the `cloud` CLI, and Laravel Cloud deployment troubleshooting.","https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002Fattendance-web\u002F.claude\u002Fskills\u002Fdeploying-to-cloud\u002FSKILL.md",[],[],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":19},"01M7DS41ESZNXXY2VRZYH3FN17","youtube-transcript","Fetch YouTube transcripts through DeepAPI or local fallback tooling and save clean text output.","https:\u002F\u002Fgithub.com\u002FHazek-dc\u002FPresensiGuru_FaceNet_EMAR\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fyoutube-transcript\u002FSKILL.md",[],[]]