code-ai-installer 1.2.0 → 1.3.0

package/locales/en/.agents/state_zustand_beast_practices/agents/claude.json

@@ -1,13 +1,13 @@
 {
   "name": "state_zustand_beast_practices",
   "display_name": "Zustand Beast Practices",
-  "description": "Zustand: simple global state without prop drilling, store modularity, selectors, avoiding unnecessary rerenders.",
+  "description": "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders. Patterns creation slice-stores, middleware (immer, persist, devtools), TypeScript typing, testing. Activate with creation new store, refactoring state management, or with questions «how correctly organize Zustand».",
   "default_prompt": "Use $state_zustand_beast_practices when the task matches the \"Zustand Beast Practices\" skill.",
   "triggers": [
     "state_zustand_beast_practices",
     "state zustand beast practices",
     "Zustand Beast Practices",
-    "Zustand"
+    "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders"
   ],
   "capabilities": [
     "state",

package/locales/en/.agents/state_zustand_beast_practices/agents/copilot.json

@@ -1,13 +1,13 @@
 {
   "name": "state_zustand_beast_practices",
   "display_name": "Zustand Beast Practices",
-  "description": "Zustand: simple global state without prop drilling, store modularity, selectors, avoiding unnecessary rerenders.",
+  "description": "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders. Patterns creation slice-stores, middleware (immer, persist, devtools), TypeScript typing, testing. Activate with creation new store, refactoring state management, or with questions «how correctly organize Zustand».",
   "default_prompt": "Use $state_zustand_beast_practices when the task matches the \"Zustand Beast Practices\" skill.",
   "triggers": [
     "state_zustand_beast_practices",
     "state zustand beast practices",
     "Zustand Beast Practices",
-    "Zustand"
+    "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders"
   ],
   "capabilities": [
     "state",

package/locales/en/.agents/state_zustand_beast_practices/agents/gemini.json

@@ -1,13 +1,13 @@
 {
   "name": "state_zustand_beast_practices",
   "display_name": "Zustand Beast Practices",
-  "description": "Zustand: simple global state without prop drilling, store modularity, selectors, avoiding unnecessary rerenders.",
+  "description": "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders. Patterns creation slice-stores, middleware (immer, persist, devtools), TypeScript typing, testing. Activate with creation new store, refactoring state management, or with questions «how correctly organize Zustand».",
   "default_prompt": "Use $state_zustand_beast_practices when the task matches the \"Zustand Beast Practices\" skill.",
   "triggers": [
     "state_zustand_beast_practices",
     "state zustand beast practices",
     "Zustand Beast Practices",
-    "Zustand"
+    "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders"
   ],
   "capabilities": [
     "state",

package/locales/en/.agents/state_zustand_beast_practices/agents/openai.yaml

@@ -1,6 +1,6 @@
 interface:
   display_name: "Zustand Beast Practices"
-  short_description: "Zustand: simple global state without prop drilling, store modularity, selectors, avoiding unnec…"
+  short_description: "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra re…"
   default_prompt: "Use $state_zustand_beast_practices when the task matches the \"Zustand Beast Practices\" skill."
 dependencies:
   tools: []

package/locales/en/.agents/state_zustand_beast_practices/agents/qwen.json

@@ -1,13 +1,13 @@
 {
   "name": "state_zustand_beast_practices",
   "display_name": "Zustand Beast Practices",
-  "description": "Zustand: simple global state without prop drilling, store modularity, selectors, avoiding unnecessary rerenders.",
+  "description": "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders. Patterns creation slice-stores, middleware (immer, persist, devtools), TypeScript typing, testing. Activate with creation new store, refactoring state management, or with questions «how correctly organize Zustand».",
   "default_prompt": "Use $state_zustand_beast_practices when the task matches the \"Zustand Beast Practices\" skill.",
   "triggers": [
     "state_zustand_beast_practices",
     "state zustand beast practices",
     "Zustand Beast Practices",
-    "Zustand"
+    "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders"
   ],
   "capabilities": [
     "state",

package/locales/en/.agents/state_zustand_beast_practices/agents/skill.yaml

@@ -1,13 +1,13 @@
 version: 1
 name: "state_zustand_beast_practices"
 display_name: "Zustand Beast Practices"
-description: "Zustand: simple global state without prop drilling, store modularity, selectors, avoiding unnecessary rerenders."
+description: "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders. Patterns creation slice-stores, middleware (immer, persist, devtools), TypeScript typing, testing. Activate with creation new store, refactoring state management, or with questions «how correctly organize Zustand»."
 default_prompt: "Use $state_zustand_beast_practices when the task matches the \"Zustand Beast Practices\" skill."
 triggers:
   - "state_zustand_beast_practices"
   - "state zustand beast practices"
   - "Zustand Beast Practices"
-  - "Zustand"
+  - "Zustand — simple global state without prop drilling, module store, selectors, avoiding extra rerenders"
 capabilities:
   - "state"
   - "zustand"

package/locales/en/.agents/styling_css_stack/SKILL.md

@@ -1,12 +1,558 @@
----
-name: styling_css_stack
-description: CSS practices: pure CSS + preprocessors (Less/Sass) + Tailwind; agreements, availability, predictability and maintainability.
----
-
-# Skill: Styling (CSS/Less/Sass/Tailwind)
-
-## Rules
-- Tailwind by default (if the project is designed that way)
-- If CSS/Less/Sass is used - uniform naming conventions and structure
-- UI must match UX/a11y: contrast, focus styles, states
-- Avoid “random” global styles that break neighboring components
+---
+name: styling_css_stack
+description: CSS practices — custom properties (design tokens), naming (BEM / CSS Modules), responsive, transitions, z-index scale, dark mode, a11y (focus-visible, prefers-reduced-motion, forced-colors). DO/DON'T examples. Activate with writing or review CSS/Less/Sass, with refactoring styles, or with questions «how correctly style X».
+---
+
+# Skill: Styling (CSS Stack) Beast Practices
+
+Concrete DO/DON'T patterns for CSS — from design tokens to a11y.
+
+**Sections:**
+1. [Design Tokens (CSS Custom Properties)](#1-design-tokens)
+2. [Naming: BEM vs CSS Modules](#2-naming)
+3. [Responsive and Media Queries](#3-responsive)
+4. [Dark Mode](#4-dark-mode)
+5. [Transitions and Animations](#5-transitions-and-animations)
+6. [Z-index Scale](#6-z-index-scale)
+7. [Accessibility (a11y)](#7-accessibility)
+8. [Organization files](#8-organize)
+9. [Anti-patterns](#9-anti-patterns)
+
+---
+
+## 1. Design Tokens
+
+### ✅ DO: CSS custom properties how unified source truth
+
+```css
+/* tokens.css — global design tokens */
+:root {
+  /* Colors */
+  --color-primary: hsl(220, 90%, 56%);
+  --color-primary-hover: hsl(220, 90%, 46%);
+  --color-secondary: hsl(280, 70%, 50%);
+  --color-surface: hsl(0, 0%, 100%);
+  --color-surface-elevated: hsl(0, 0%, 98%);
+  --color-text: hsl(220, 20%, 12%);
+  --color-text-muted: hsl(220, 10%, 50%);
+  --color-border: hsl(220, 15%, 88%);
+  --color-error: hsl(0, 80%, 55%);
+  --color-success: hsl(145, 70%, 40%);
+
+  /* Spacing (4px grid) */
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-12: 3rem;     /* 48px */
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 1rem;     /* 16px */
+  --text-lg: 1.125rem;   /* 18px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+
+  /* Borders */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.05);
+  --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
+  --shadow-lg: 0 10px 25px hsl(0 0% 0% / 0.1);
+
+  /* Transitions */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 400ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+```
+
+### ? DON'T: hardcode values in components
+
+```css
+/* ❌ Magic values — impossible support, no dark mode */
+.card {
+  padding: 17px;
+  color: #333;
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* ? Tokens ? consistent, supports theming */
+.card {
+  padding: var(--space-4);
+  color: var(--color-text);
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+```
+
+---
+
+## 2. Naming
+
+### ✅ DO: BEM for vanilla CSS
+
+```css
+/* Block */
+.coupon-card { }
+
+/* Element */
+.coupon-card__title { }
+.coupon-card__code { }
+.coupon-card__actions { }
+
+/* Modifier */
+.coupon-card--active { }
+.coupon-card--expired { }
+
+/* State (JS-driven) */
+.coupon-card.is-selected { }
+.coupon-card.is-loading { }
+```
+
+```html
+<div class="coupon-card coupon-card--active is-selected">
+  <h3 class="coupon-card__title">SAVE20</h3>
+  <span class="coupon-card__code">20% off</span>
+  <div class="coupon-card__actions">
+    <button>Apply</button>
+  </div>
+</div>
+```
+
+### ✅ DO: CSS Modules for React (scoped by default)
+
+```css
+/* CouponCard.module.css */
+.card {
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.card.active {
+  border-color: var(--color-primary);
+}
+
+.title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+}
+
+.code {
+  font-family: var(--font-mono);
+  color: var(--color-text-muted);
+}
+```
+
+```jsx
+import styles from './CouponCard.module.css';
+import clsx from 'clsx';
+
+function CouponCard({ coupon }) {
+  return (
+    <div className={clsx(styles.card, coupon.active && styles.active)}>
+      <h3 className={styles.title}>{coupon.code}</h3>
+      <span className={styles.code}>{coupon.discount}%</span>
+    </div>
+  );
+}
+```
+
+### When what
+
+| Approach | When ✅ | When ❌ |
+|--------|---------|---------|
+| **BEM** | Vanilla CSS/HTML, widgets, legacy | Large SPA (no scoping) |
+| **CSS Modules** | React/Vue SPA, component architecture | Static sites |
+| **Tailwind** | Rapid prototyping, utility-first commands | Wix widgets, complex animations |
+
+---
+
+## 3. Responsive
+
+### ✅ DO: mobile-first with min-width breakpoints
+
+```css
+/* ? Mobile-first: basic styles for mobile, then extend upward */
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-4);
+}
+
+@media (min-width: 640px) {  /* sm */
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) { /* lg */
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+```
+
+### ✅ DO: breakpoint tokens
+
+```css
+/* Breakpoints (not custom properties — media queries not support var()) */
+/* sm:  640px  — phone landscape / small tablet */
+/* md:  768px  — tablet portrait */
+/* lg:  1024px — tablet landscape / small desktop */
+/* xl:  1280px — desktop */
+/* 2xl: 1536px — wide desktop */
+```
+
+### ✅ DO: container queries for components
+
+```css
+/* ? Component adapts to the CONTAINER size, not the screen */
+.card-container {
+  container-type: inline-size;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+}
+
+@container (min-width: 400px) {
+  .card {
+    flex-direction: row; /* Horizontal layout with enough space */
+  }
+}
+```
+
+### ❌ DON'T: fixed width for layout
+
+```css
+/* ? Breaks on non-standard screens */
+.container {
+  width: 1200px;
+}
+
+/* ? Adaptive width */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+}
+```
+
+---
+
+## 4. Dark Mode
+
+### ✅ DO: dark mode via override tokens
+
+```css
+/* ✅ Automatic dark mode via media query */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-surface: hsl(220, 20%, 10%);
+    --color-surface-elevated: hsl(220, 20%, 14%);
+    --color-text: hsl(220, 15%, 90%);
+    --color-text-muted: hsl(220, 10%, 60%);
+    --color-border: hsl(220, 15%, 25%);
+    --color-primary: hsl(220, 90%, 65%);
+    --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.3);
+  }
+}
+
+/* ✅ Or via class toggle (JS-controlled) */
+[data-theme="dark"] {
+  --color-surface: hsl(220, 20%, 10%);
+  --color-text: hsl(220, 15%, 90%);
+  /* ... */
+}
+```
+
+### ? DON'T: invert colors or hardcode them
+
+```css
+/* ? filter ? breaks images, icons, video */
+.dark-mode {
+  filter: invert(1);
+}
+
+/* ❌ Duplication styles instead of overrides tokens */
+.dark-mode .card {
+  background: #1a1a2e;
+  color: #eee;
+  border-color: #333;
+}
+```
+
+---
+
+## 5. Transitions and Animations
+
+### ✅ DO: transition on concrete properties
+
+```css
+/* ✅ Explicit properties — performance, predictably */
+.button {
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.button:hover {
+  background-color: var(--color-primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.button:active {
+  transform: translateY(0);
+  box-shadow: var(--shadow-sm);
+}
+
+/* ? transition: all ? animates everything in a row, including width/height (layout thrashing) */
+.button {
+  transition: all 0.3s ease;  /* ❌ */
+}
+```
+
+### ? DO: animate only transform and opacity (GPU-accelerated)
+
+```css
+/* ? GPU: transform + opacity ? do not trigger layout/paint */
+.fade-in {
+  animation: fadeIn var(--duration-normal) var(--ease-out);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ? Animating width/height/top/left ? triggers layout recalculation */
+@keyframes bad {
+  from { width: 0; height: 0; }
+  to   { width: 100px; height: 100px; }
+}
+```
+
+---
+
+## 6. Z-index Scale
+
+### ? DO: predictable fixed scale
+
+```css
+:root {
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+  --z-tooltip: 700;
+  --z-max: 9999;      /* only for critical overlays (fullscreen loader) */
+}
+
+/* Usage */
+.dropdown { z-index: var(--z-dropdown); }
+.modal-backdrop { z-index: var(--z-overlay); }
+.modal { z-index: var(--z-modal); }
+.toast { z-index: var(--z-toast); }
+```
+
+### ❌ DON'T: z-index wars
+
+```css
+/* ❌ Escalation z-index — impossible support */
+.header   { z-index: 100; }
+.dropdown { z-index: 999; }
+.modal    { z-index: 9999; }
+.toast    { z-index: 99999; }   /* someday 999999 will be needed */
+```
+
+---
+
+## 7. Accessibility
+
+### ✅ DO: focus-visible, not focus
+
+```css
+/* ✅ focus-visible — shows focus only with navigation keyboard */
+.button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* ? focus ? shows outline on mouse click (annoys users) */
+.button:focus {
+  outline: 2px solid blue;
+}
+
+/* ? Remove outline completely ? breaks keyboard navigation */
+*:focus {
+  outline: none;  /* ❌ Never */
+}
+```
+
+### ✅ DO: prefers-reduced-motion
+
+```css
+/* ✅ disable animations when user asks */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### ✅ DO: forced-colors for Windows High Contrast
+
+```css
+/* ✅ Support Windows High Contrast Mode */
+@media (forced-colors: active) {
+  .button {
+    border: 1px solid ButtonText;         /* System color */
+  }
+  .button:hover {
+    background: Highlight;
+    color: HighlightText;
+  }
+  .icon {
+    forced-color-adjust: auto;            /* Let the system recolor */
+  }
+}
+```
+
+### ? DO: sufficient contrast
+
+```css
+/* Minimal requirements WCAG 2.1 AA */
+/* Regular text: contrast ≥ 4.5:1 */
+/* Large text (? 18px bold or ? 24px): contrast ? 3:1 */
+/* interactive elements: contrast ≥ 3:1 */
+
+/* ✅ Check via: https://webaim.org/resources/contrastchecker/ */
+```
+
+---
+
+## 8. Organization files
+
+```
+src/
+├── styles/
+│   ├── tokens.css          # Design tokens (custom properties)
+│   ├── reset.css           # CSS reset / normalize
+│   ├── base.css            # Typography, base elements
+│   ├── utilities.css       # Utility classes (.sr-only, .truncate)
+│   └── z-index.css         # Z-index scale
+├── components/
+│   ├── Button/
+│   │   ├── Button.jsx
+│   │   └── Button.module.css
+│   └── CouponCard/
+│       ├── CouponCard.jsx
+│       └── CouponCard.module.css
+└── index.css               # Imports: tokens → reset → base → utilities
+```
+
+### index.css (entry point)
+
+```css
+/* Order important! */
+@import './styles/tokens.css';
+@import './styles/reset.css';
+@import './styles/base.css';
+@import './styles/utilities.css';
+@import './styles/z-index.css';
+```
+
+### Utility classes
+
+```css
+/* utilities.css ? reusable utilities */
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Truncate text */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Line clamp */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+```
+
+---
+
+## 9. Anti-patterns
+
+| ❌ Anti-pattern | ✅ Decision |
+|----------------|-----------|
+| `!important` for layout | Increase specificity via selectors |
+| `transition: all` | List concrete properties |
+| `outline: none` without replace | `focus-visible` + visible outline |
+| Hardcode colors (`#333`, `red`) | CSS custom properties |
+| `px` for font-size | `rem` (accessibility: respects user settings) |
+| Global selectors (`div { }`) | Scoped: CSS Modules, BEM, or layer |
+| Nested > 3 level (Sass) | Flat selectors, BEM |
+| `@import` in runtime CSS | Bundler (Vite) or `@layer` |
+| Animation of `width`/`height` | `transform: scale()` or `clip-path` |
+| Magic numbers (`margin: 17px`) | Spacing tokens (`var(--space-4)`) |
+
+---
+
+## See also
+- `$design_systems` — integration design systems (shadcn/ui, WDS)
+- `$a11y_baseline` — full a11y checklist
+- `$tailwind_beast_practices` — Tailwind-specific patterns
+- `$design_parity_review` — comparison implementation with design

package/locales/en/.agents/styling_css_stack/agents/claude.json

@@ -1,13 +1,13 @@
 {
   "name": "styling_css_stack",
-  "display_name": "Styling (CSS/Less/Sass/Tailwind)",
-  "description": "CSS practices: pure CSS + preprocessors (Less/Sass) + Tailwind; agreements, availability, predictability and maintainability.",
-  "default_prompt": "Use $styling_css_stack when the task matches the \"Styling (CSS/Less/Sass/Tailwind)\" skill.",
+  "display_name": "Styling (CSS Stack) Beast Practices",
+  "description": "CSS practices — custom properties (design tokens), naming (BEM / CSS Modules), responsive, transitions, z-index scale, dark mode, a11y (focus-visible, prefers-reduced-motion, forced-colors). DO/DON'T examples. Activate with writing or review CSS/Less/Sass, with refactoring styles, or with questions «how correctly style X».",
+  "default_prompt": "Use $styling_css_stack when the task matches the \"Styling (CSS Stack) Beast Practices\" skill.",
   "triggers": [
     "styling_css_stack",
     "styling css stack",
-    "Styling (CSS/Less/Sass/Tailwind)",
-    "CSS practices"
+    "Styling (CSS Stack) Beast Practices",
+    "CSS practices — custom properties (design tokens), naming (BEM / CSS Modules), responsive, transitions, z-index scale, dark mode, a11y (focus-visible, prefers-reduced-motion, forced-colors)"
   ],
   "capabilities": [
     "styling",