[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7ESRKX8HTV4QFE4B3FS1EFJ":3,"skill-same:01M7ESRKX8HTV4QFE4B3FS1EFJ":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":26,"repositoryHtmlUrl":27,"repositoryHomepageUrl":6,"ownerHtmlUrl":28,"ownerBlogUrl":29,"ownerDescription":6,"updatedAt":30,"install":31,"resources":44},"01M7ESRKX8HTV4QFE4B3FS1EFJ","ams-less-pro",null,"TanNhatCMS\u002Fjarvis","TanNhatCMS","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F113796420?v=4","01M753MV17KG5CD3152G3WQEQY","KietNT","01M7EKEDYVYQ6PWVJJMZ911VMX",0,"MIT","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fams-less-pro\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: less-pro\ndescription: Write and maintain Less stylesheets: variables, mixins, guards, imports, and build integration. Use when working with Less-based projects (e.g., Ant Design theming).\ncategory: development\n---\n\n# Less Pro\n\nA practical guide to Less: variables, mixins (parametric + guarded), operations, namespaced imports, and build integration — primarily for maintaining Less-based codebases and theming component libraries built on Less.\n\n## Overview\n\nLess is a CSS preprocessor in the Sass\u002FStylus family, notable for its JavaScript-based implementation and its role as the styling layer of major UI libraries (notably Ant Design, which themes via Less variables). New projects rarely choose Less today, but large existing codebases run on it — this skill is about working effectively in those codebases and customizing Less-based design systems.\n\n## When to use\n\n- Theming Ant Design or other Less-based component libraries (`@primary-color` overrides).\n- Maintaining existing Less stylesheets.\n- Build integration: `less-loader`, standalone `lessc`, or in-browser `less.js` (dev only).\n- Deciding whether to migrate Less → modern CSS\u002FSass.\n\n## Core concepts\n\n- **Variables.** `@primary-color: #1890ff;` — lazy-loaded (defined on last declaration wins, usable before definition). Referenced as `@var` in values and `@{var}` in selectors\u002FURLs.\n- **Mixins.** `.bordered() { border: 1px solid #ddd; }` then `.card { .bordered(); }`. Parametric: `.rounded(@radius: 4px) { border-radius: @radius; }`. Namespaced: `#bundle > .mixin()`.\n- **Guards.** Conditional mixins: `.mixin(@a) when (@a > 10) { ... }` — pattern matching by arity\u002Fguards, Less's version of control flow.\n- **Operations & functions.** `width: @base * 2;`, `color: lighten(@primary-color, 10%);`, `fade()`, `mix()`. Any numeric\u002Fcolor value can be computed.\n- **Nesting & `&`.** Standard nesting; `&` for parent reference (`&:hover`, `&__element`).\n- **`@import`.** `(reference)` imports without output (great for mixin libraries), `(inline)`, `(css)` passthrough. Import once semantics per file.\n- **Detached rulesets.** `@rules: { color: red; }; .x { @rules(); }` — reusable declaration blocks, useful for theming APIs.\n\n## Practical workflow\n\n**1. Theme a Less-based library (Ant Design example).**\n```js\n\u002F\u002F webpack less-loader options (or vite plugin-less)\n{\n  lessOptions: {\n    modifyVars: {\n      '@primary-color': '#7c3aed',\n      '@border-radius-base': '8px',\n      '@font-family': 'Inter, sans-serif',\n    },\n    javascriptEnabled: true,\n  },\n}\n```\n`modifyVars` overrides library defaults without forking — the sanctioned theming path.\n\n**2. Organize.**\n```\nstyles\u002F\n  variables.less   \u002F\u002F your tokens (@import (reference) libraries' vars if needed)\n  mixins.less      \u002F\u002F parametric mixins, guarded variants\n  base.less\n  components\u002F\n```\nOne entry `main.less` importing the rest; `(reference)` for mixin-only imports to avoid duplicate output.\n\n**3. Parametric + guarded mixins.**\n```less\n.button-variant(@bg; @color: #fff) {\n  background: @bg;\n  color: @color;\n  &:hover when (lightness(@bg) > 50%) { background: darken(@bg, 10%); }\n  &:hover when (lightness(@bg) \u003C= 50%) { background: lighten(@bg, 10%); }\n}\n```\n\n**4. Build.** `lessc src\u002Fmain.less dist\u002Fmain.css --source-map`; watch with `--watch` or bundler loaders. Never ship `less.js` in-browser compilation to production (slow, FOUC).\n\n## Common pitfalls\n\n- **Lazy variable gotcha.** Last declaration wins *everywhere*, even above it — redefining `@x` in an imported file silently changes earlier usages. Namespace your variables.\n- **`javascriptEnabled` security.** Less's inline JS evaluation (`` `...` ``) is off by default for good reason — enabling it for `modifyVars` math is normal, but don't evaluate untrusted input.\n- **In-browser less.js in prod.** Dev convenience only. Compile at build time; shipping the compiler + FOUC is a performance and UX bug.\n- **Import duplication.** Multiple `@import \"mixins.less\"` without `(reference)` emits the file's output repeatedly. Mixin libraries should be `(reference)` imports or output-free.\n- **Overriding library internals.** Reaching past `modifyVars` into a library's private mixins breaks on upgrade. Stay on the public theming API.\n- **Math precision.** `0.1 + 0.2`-style float artifacts in computed values; round where it matters (`round()`, `ceil()`).\n- **Migrating away blindly.** If the codebase themes Ant Design via Less, \"rewrite in Tailwind\" means reimplementing the theme layer. Cost it: often better to keep Less for the library theme and use modern CSS for app code.\n- **No sourcemaps.** Debugging compiled CSS without `--source-map` is miserable. Always generate them.\n","# Less Pro\n\nA practical guide to Less: variables, mixins (parametric + guarded), operations, namespaced imports, and build integration — primarily for maintaining Less-based codebases and theming component libraries built on Less.\n\n## Overview\n\nLess is a CSS preprocessor in the Sass\u002FStylus family, notable for its JavaScript-based implementation and its role as the styling layer of major UI libraries (notably Ant Design, which themes via Less variables). New projects rarely choose Less today, but large existing codebases run on it — this skill is about working effectively in those codebases and customizing Less-based design systems.\n\n## When to use\n\n- Theming Ant Design or other Less-based component libraries (`@primary-color` overrides).\n- Maintaining existing Less stylesheets.\n- Build integration: `less-loader`, standalone `lessc`, or in-browser `less.js` (dev only).\n- Deciding whether to migrate Less → modern CSS\u002FSass.\n\n## Core concepts\n\n- **Variables.** `@primary-color: #1890ff;` — lazy-loaded (defined on last declaration wins, usable before definition). Referenced as `@var` in values and `@{var}` in selectors\u002FURLs.\n- **Mixins.** `.bordered() { border: 1px solid #ddd; }` then `.card { .bordered(); }`. Parametric: `.rounded(@radius: 4px) { border-radius: @radius; }`. Namespaced: `#bundle > .mixin()`.\n- **Guards.** Conditional mixins: `.mixin(@a) when (@a > 10) { ... }` — pattern matching by arity\u002Fguards, Less's version of control flow.\n- **Operations & functions.** `width: @base * 2;`, `color: lighten(@primary-color, 10%);`, `fade()`, `mix()`. Any numeric\u002Fcolor value can be computed.\n- **Nesting & `&`.** Standard nesting; `&` for parent reference (`&:hover`, `&__element`).\n- **`@import`.** `(reference)` imports without output (great for mixin libraries), `(inline)`, `(css)` passthrough. Import once semantics per file.\n- **Detached rulesets.** `@rules: { color: red; }; .x { @rules(); }` — reusable declaration blocks, useful for theming APIs.\n\n## Practical workflow\n\n**1. Theme a Less-based library (Ant Design example).**\n```js\n\u002F\u002F webpack less-loader options (or vite plugin-less)\n{\n  lessOptions: {\n    modifyVars: {\n      '@primary-color': '#7c3aed',\n      '@border-radius-base': '8px',\n      '@font-family': 'Inter, sans-serif',\n    },\n    javascriptEnabled: true,\n  },\n}\n```\n`modifyVars` overrides library defaults without forking — the sanctioned theming path.\n\n**2. Organize.**\n```\nstyles\u002F\n  variables.less   \u002F\u002F your tokens (@import (reference) libraries' vars if needed)\n  mixins.less      \u002F\u002F parametric mixins, guarded variants\n  base.less\n  components\u002F\n```\nOne entry `main.less` importing the rest; `(reference)` for mixin-only imports to avoid duplicate output.\n\n**3. Parametric + guarded mixins.**\n```less\n.button-variant(@bg; @color: #fff) {\n  background: @bg;\n  color: @color;\n  &:hover when (lightness(@bg) > 50%) { background: darken(@bg, 10%); }\n  &:hover when (lightness(@bg) \u003C= 50%) { background: lighten(@bg, 10%); }\n}\n```\n\n**4. Build.** `lessc src\u002Fmain.less dist\u002Fmain.css --source-map`; watch with `--watch` or bundler loaders. Never ship `less.js` in-browser compilation to production (slow, FOUC).\n\n## Common pitfalls\n\n- **Lazy variable gotcha.** Last declaration wins *everywhere*, even above it — redefining `@x` in an imported file silently changes earlier usages. Namespace your variables.\n- **`javascriptEnabled` security.** Less's inline JS evaluation (`` `...` ``) is off by default for good reason — enabling it for `modifyVars` math is normal, but don't evaluate untrusted input.\n- **In-browser less.js in prod.** Dev convenience only. Compile at build time; shipping the compiler + FOUC is a performance and UX bug.\n- **Import duplication.** Multiple `@import \"mixins.less\"` without `(reference)` emits the file's output repeatedly. Mixin libraries should be `(reference)` imports or output-free.\n- **Overriding library internals.** Reaching past `modifyVars` into a library's private mixins breaks on upgrade. Stay on the public theming API.\n- **Math precision.** `0.1 + 0.2`-style float artifacts in computed values; round where it matters (`round()`, `ceil()`).\n- **Migrating away blindly.** If the codebase themes Ant Design via Less, \"rewrite in Tailwind\" means reimplementing the theme layer. Cost it: often better to keep Less for the library theme and use modern CSS for app code.\n- **No sourcemaps.** Debugging compiled CSS without `--source-map` is miserable. Always generate them.\n",{},"main","af388a77c2fe5e0b4fd879cca4300a0ffa9a6579","skills\u002Fams-less-pro",1,"https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis","https:\u002F\u002Fgithub.com\u002FTanNhatCMS","https:\u002F\u002Fmrkiet.name.vn","2026-11-07 14:23:08",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add TanNhatCMS\u002Fjarvis --skill ams-less-pro",{"tool":37,"command":38},"bunx","bunx skills add TanNhatCMS\u002Fjarvis --skill ams-less-pro",{"tool":40,"command":41},"pnpm","pnpm dlx skills add TanNhatCMS\u002Fjarvis --skill ams-less-pro","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fams-less-pro\u002FSKILL.md",true,[],[46,53,61,68,75,82],{"skillNo":47,"name":48,"nameZh":6,"description":49,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":50,"categories":51,"keywords":52,"publishedAt":18},"01M7EWYJR0J8DARY7E59Z6Y9MV","web-scrape","Turn web pages into LLM-ready markdown via the Firecrawl API (renders JS, anti-bot handling). Use when browser_open\u002Ffetch fails on JS-heavy pages, or when you need clean markdown\u002Fstructured extraction from a site. Requires FIRECRAWL_API_KEY.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fweb-scrape\u002FSKILL.md",[],[],{"skillNo":54,"name":55,"nameZh":6,"description":56,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":57,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":18},"01M7EWYBN5P6F2AJG3FR24T9BP","design-taste-frontend","tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML\u002FCSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, \"AI-made\", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Ftaste-design\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Ftaste-design\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":18},"01M7EWY8FQFNQ2GB7NZZWGSSDX","test-driven-development","Use when implementing any feature or bugfix, before writing implementation code","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-tdd\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":18},"01M7EWY5SHBFRH1HDHVWM9K7TV","systematic-debugging","Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-debugging\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":18},"01M7EWY3NM0Z0JAKS7HDZ24K66","requesting-code-review","Use when completing tasks, implementing major features, or before merging to verify work meets requirements","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-code-review\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":18},"01M7EWY0WRMWX4M9ZFY0WKC593","brainstorming","You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or planning anything new, in software or out of it (a talk, a business, a renovation).","https:\u002F\u002Fgithub.com\u002FTanNhatCMS\u002Fjarvis\u002Fblob\u002Fmain\u002Fskills\u002Fsuperpowers-brainstorming\u002FSKILL.md",[],[]]