@atlashub/smartstack-cli 4.80.0 → 5.0.0

package/templates/skills/review-code/steps/step-02-detailed-review.md

@@ -1,80 +0,0 @@
-# Detailed Review Categories & Metrics
-
-## Review Categories
-
-### Security (Critical Priority)
-**Must check in every review:**
-- No hardcoded credentials (search: `password.*=.*['"]`, `api[_-]?key.*=`)
-- Input validation on all user data
-- Parameterized queries (no string concatenation for SQL)
-- Authorization checks on every endpoint
-- No `eval()`, `exec()`, dangerous functions
-
-See [references/security-checklist.md](../references/security-checklist.md) for OWASP Top 10 patterns.
-See [references/owasp-api-top10.md](../references/owasp-api-top10.md) for OWASP API Security Top 10.
-
-### Logic (Critical Priority)
-**Verify correctness:**
-- Business logic matches requirements
-- Edge cases handled (null, empty, boundary values)
-- Error handling present and appropriate
-- Race conditions in async code
-- Resource cleanup (connections, file handles)
-
-### Clean Code (High Priority)
-**Check for code smells:**
-- Large functions (>50 lines) - violate Single Responsibility
-- Deep nesting (>3 levels) - extract to functions
-- Long parameter lists (>3 params) - use objects
-- Duplicated code - extract to shared functions
-- Magic numbers/strings - use named constants
-
-See [references/clean-code-principles.md](../references/clean-code-principles.md) for SOLID principles.
-
-### Maintainability (Medium Priority)
-**Assess long-term health:**
-- Cognitive complexity <15 per function
-- Clear naming that reveals intent
-- Appropriate abstractions (not over-engineered)
-- Test coverage for critical paths
-
-## Code Quality Metrics
-
-### Cognitive Complexity
-- Target: <15 per function, <50 per module
-- Each nesting level adds complexity
-- Prefer early returns over deep nesting
-
-### Function Size
-- Target: <50 lines, ideally <20
-- Should fit on one screen
-- One function = one responsibility
-
-### Cyclomatic Complexity
-- Target: <10 per function
-- Count: 1 + (if + while + for + case + catch + && + ||)
-- High complexity = hard to test
-
-See [references/code-quality-metrics.md](../references/code-quality-metrics.md) for detailed calculations.
-
-## Anti-Patterns to Flag
-
-### Nitpicking
-**Problem**: Excessive minor comments bury critical issues
-**Impact**: Developers become defensive, stop reading feedback
-**Solution**: Automate style with linters; focus humans on logic/security
-
-### Vague Criticism
-**Problem**: "This is wrong" without explanation
-**Impact**: Developer doesn't know how to fix; creates friction
-**Solution**: Always include What + Why + How
-
-### Blocking on Preferences
-**Problem**: Blocking merge for subjective style preferences
-**Impact**: Delays delivery; damages team trust
-**Solution**: Reserve blocking for security/correctness only
-
-### Reviewing Unchanged Code
-**Problem**: Commenting on code outside the PR diff
-**Impact**: Scope creep; unfair to author
-**Solution**: Focus only on changed lines; file separate issues for existing problems

package/templates/skills/review-code/steps/step-03-react.md

@@ -1,44 +0,0 @@
-# React/Next.js Review
-
-## Codebase Detection
-
-**When reviewing a React or Next.js project**, launch an additional parallel agent for Vercel React best practices.
-
-**Detect React/Next.js codebase by checking:**
-- `package.json` contains `"next"` or `"react"` dependencies
-- Files with `.tsx`, `.jsx` extensions in changes
-- `next.config.js` or `next.config.ts` exists
-- `app/` or `pages/` directory structure (Next.js)
-
-## Parallel Agent
-
-**If React/Next.js detected, launch parallel agent:**
-
-```yaml
-agent:
-  type: code-reviewer
-  focus: "vercel-react-best-practices"
-  task: |
-    Review the recent code changes using Vercel React best practices.
-    Focus on:
-    - Eliminating waterfalls (async patterns, Promise.all)
-    - Bundle size optimization (dynamic imports, barrel files)
-    - Server-side performance (caching, serialization)
-    - Re-render optimization (memoization, state management)
-    - Rendering performance patterns
-
-    Use the /vercel-react-best-practices skill as reference.
-    Report findings with [BLOCKING], [SUGGESTION], or [NIT] labels.
-```
-
-**Execution:**
-1. Check for React/Next.js in `package.json`
-2. If detected, use Task tool to launch parallel agent:
-   ```
-   Task tool with subagent_type="code-reviewer":
-   "Review recent changes against Vercel React best practices from /vercel-react-best-practices skill.
-   Focus on: async patterns, bundle optimization, server performance, re-renders.
-   Check changed files for violations of rules like async-parallel, bundle-barrel-imports,
-   server-cache-react, rerender-memo. Report with priority labels."
-   ```
-3. Merge findings into main review output

package/templates/skills/sketch/SKILL.md

@@ -1,34 +0,0 @@
----
-name: sketch
-description: |
-  DEPRECATED — Redirects to /business-analyse-quick.
-  Use /business-analyse-quick instead for Mini-BA with PRD generation.
-model: sonnet
-argument-hint: "<use /business-analyse-quick instead>"
----
-
-<objective>
-This skill has been renamed to `/business-analyse-quick`. Redirect the user.
-</objective>
-
-<algorithm>
-
-Display:
-```
-═══════════════════════════════════════════════════════════
-  /sketch has been renamed to /business-analyse-quick
-═══════════════════════════════════════════════════════════
-
-  /business-analyse-quick provides:
-  - Interactive Mini-BA (12-15 questions)
-  - Structured Mini-PRD output for /apex -d
-  - Entity, rules, use cases, permissions, screens specs
-```
-
-Then immediately invoke the new skill with the user's original arguments:
-
-```
-Skill("business-analyse-quick", args: "{original user arguments}")
-```
-
-</algorithm>

package/templates/skills/ui-components/accessibility.md

@@ -1,170 +0,0 @@
-# Accessibility & Best Practices
-
-## TYPESCRIPT INTERFACES (MANDATORY)
-
-**ALWAYS define explicit TypeScript interfaces for component props.**
-
-```typescript
-// CORRECT - Explicit interface with all props typed
-interface UserCardProps {
-  user: User;
-  onSelect?: (user: User) => void;
-  isSelected?: boolean;
-  variant?: 'default' | 'compact';
-}
-
-export const UserCard: React.FC<UserCardProps> = ({
-  user,
-  onSelect,
-  isSelected = false,
-  variant = 'default'
-}) => {
-  // ...
-};
-
-// WRONG - Missing interface, inline types, or any
-export const UserCard = ({ user, onSelect }: any) => { ... }
-export const UserCard = (props: { user: any }) => { ... }
-```
-
-### State Typing
-```typescript
-// CORRECT - Explicit state types
-const [users, setUsers] = useState<User[]>([]);
-const [selectedId, setSelectedId] = useState<string | null>(null);
-const [status, setStatus] = useState<'idle' | 'loading' | 'error'>('idle');
-
-// WRONG - Implicit or missing types
-const [users, setUsers] = useState([]);
-const [data, setData] = useState();
-```
-
-## SEMANTIC HTML (ACCESSIBILITY)
-
-**ALWAYS use semantic HTML elements instead of divs with roles.**
-
-```tsx
-// CORRECT - Native button element
-<button type="button" onClick={handleClick} disabled={isDisabled}>
-  Click me
-</button>
-
-// WRONG - div with role (S6819)
-<div role="button" onClick={handleClick} tabIndex={0}>
-  Click me
-</div>
-```
-
-### Interactive Elements Mapping
-
-| Use Case | Correct Element | Wrong Pattern |
-|----------|----------------|---------------|
-| Clickable action | `<button type="button">` | `<div role="button">` |
-| Navigation link | `<a href="...">` or `<Link>` | `<div onClick={navigate}>` |
-| Form submission | `<button type="submit">` | `<div onClick={submit}>` |
-| Expandable section | `<details><summary>` | `<div onClick={toggle}>` |
-| List of items | `<ul><li>` with `<button>` inside | `<div role="listitem">` |
-
-### Clickable Cards Pattern
-```tsx
-// CORRECT - Card with button inside
-<div className="rounded-[var(--radius-card)] border ...">
-  <div className="p-4">
-    <h3>{title}</h3>
-    <p>{description}</p>
-  </div>
-  <button
-    type="button"
-    onClick={() => onSelect(item)}
-    className="w-full px-4 py-2 border-t ..."
-  >
-    Select
-  </button>
-</div>
-
-// CORRECT - Entire card as link
-<Link to={`/items/${item.id}`} className="block rounded-[var(--radius-card)] ...">
-  <div className="p-4">...</div>
-</Link>
-
-// WRONG - div with click handler
-<div onClick={() => onSelect(item)} className="cursor-pointer ...">
-  ...
-</div>
-```
-
-## PERFORMANCE OPTIMIZATION
-
-### React.memo for Pure Components
-```tsx
-import { memo, useCallback, useMemo } from 'react';
-
-// CORRECT - Memoized component for lists
-export const UserCard = memo(({ user, onSelect }: UserCardProps) => {
-  return (
-    <div className="...">
-      <h3>{user.name}</h3>
-      <button onClick={() => onSelect(user)}>Select</button>
-    </div>
-  );
-});
-UserCard.displayName = 'UserCard';
-```
-
-### useCallback for Event Handlers
-```tsx
-// CORRECT - Stable callback reference
-const handleSelect = useCallback((item: Item) => {
-  onSelect?.(item);
-  setSelectedId(item.id);
-}, [onSelect]);
-
-// WRONG - New function on every render
-const handleSelect = (item: Item) => {
-  onSelect?.(item);
-};
-```
-
-### useMemo for Expensive Computations
-```tsx
-// CORRECT - Memoized filtered list
-const filteredItems = useMemo(() =>
-  items.filter(item => item.status === filter),
-  [items, filter]
-);
-
-// WRONG - Recomputed on every render
-const filteredItems = items.filter(item => item.status === filter);
-```
-
-## LIST RENDERING (UNIQUE KEYS)
-
-**NEVER use array index as React key. ALWAYS use unique identifiers.**
-
-```tsx
-// CORRECT - Unique ID from data
-{items.map(item => (
-  <EntityCard key={item.id} {...mapToCardProps(item)} />
-))}
-
-// CORRECT - Composite key when needed
-{items.map(item => (
-  <Row key={`${item.tenantId}-${item.id}`} data={item} />
-))}
-
-// WRONG - Array index as key (S6479)
-{items.map((item, index) => (
-  <EntityCard key={index} {...mapToCardProps(item)} />
-))}
-
-// WRONG - Random key
-{items.map(item => (
-  <EntityCard key={Math.random()} {...mapToCardProps(item)} />
-))}
-```
-
-### Why Index Keys Are Problematic
-- Causes unnecessary re-renders when list order changes
-- Breaks component state (inputs, animations)
-- Causes visual glitches with drag-and-drop
-- Makes reconciliation inefficient

package/templates/skills/ui-components/patterns/dashboard-chart.md

@@ -1,327 +0,0 @@
-# Dashboard & Chart Patterns
-
-> **Library:** Recharts (standardized for SmartStack)
-> **Install:** `npm install recharts` (add to package.json if absent)
-> **Reference:** https://recharts.org/
-
-## CRITICAL RULES
-
-1. **NEVER hardcode chart colors** - Use CSS variables (`--chart-1` to `--chart-5`)
-2. **NEVER hardcode text** - Use `useTranslation()` for all labels, tooltips, legends
-3. **ALWAYS use ResponsiveContainer** - Charts must be responsive
-4. **ALWAYS provide loading/error states** - Skeleton loaders for charts
-5. **ALWAYS use CSS variables** for backgrounds, borders, text (see style-guide.md)
-
----
-
-## KPI CARD (StatCard)
-
-Use for single-value metrics with trend indicator.
-
-```tsx
-import { LucideIcon } from 'lucide-react';
-
-interface StatCardProps {
-  label: string;
-  value: string | number;
-  icon: LucideIcon;
-  trend?: { value: number; direction: 'up' | 'down' | 'flat' };
-  format?: 'number' | 'currency' | 'percent' | 'duration';
-}
-
-function StatCard({ label, value, icon: Icon, trend, format = 'number' }: StatCardProps) {
-  const formattedValue = formatValue(value, format);
-
-  return (
-    <div className="rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-6">
-      <div className="flex items-center justify-between">
-        <span className="text-sm font-medium text-[var(--text-muted)]">{label}</span>
-        <Icon className="h-5 w-5 text-[var(--color-primary-500)]" />
-      </div>
-      <div className="mt-2 text-2xl font-bold text-[var(--text-primary)]">
-        {formattedValue}
-      </div>
-      {trend && (
-        <div className={`mt-1 flex items-center text-sm ${
-          trend.direction === 'up' ? 'text-[var(--success-text)]' :
-          trend.direction === 'down' ? 'text-[var(--error-text)]' :
-          'text-[var(--text-muted)]'
-        }`}>
-          {trend.direction === 'up' ? '↑' : trend.direction === 'down' ? '↓' : '→'}
-          <span className="ml-1">{Math.abs(trend.value)}%</span>
-        </div>
-      )}
-    </div>
-  );
-}
-```
-
-### KPI Card with Thresholds
-
-```tsx
-function getThresholdColor(value: number, thresholds?: { warning: number; critical: number }) {
-  if (!thresholds) return 'text-[var(--text-primary)]';
-  if (value >= thresholds.critical) return 'text-[var(--error-text)]';
-  if (value >= thresholds.warning) return 'text-[var(--warning-text)]';
-  return 'text-[var(--success-text)]';
-}
-```
-
----
-
-## CHART WRAPPER (ChartCard)
-
-Wraps any Recharts chart in a consistent card layout.
-
-```tsx
-interface ChartCardProps {
-  title: string;
-  subtitle?: string;
-  children: React.ReactNode;
-  height?: number;
-  loading?: boolean;
-}
-
-function ChartCard({ title, subtitle, children, height = 300, loading }: ChartCardProps) {
-  if (loading) {
-    return (
-      <div className="rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-6">
-        <div className="h-4 w-1/3 bg-[var(--bg-tertiary)] rounded animate-pulse mb-4" />
-        <div className="bg-[var(--bg-tertiary)] rounded animate-pulse" style={{ height }} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] p-6">
-      <h3 className="text-base font-semibold text-[var(--text-primary)]">{title}</h3>
-      {subtitle && (
-        <p className="text-sm text-[var(--text-muted)] mt-1">{subtitle}</p>
-      )}
-      <div className="mt-4" style={{ height }}>
-        {children}
-      </div>
-    </div>
-  );
-}
-```
-
----
-
-## CHART TYPES
-
-### Shared Tooltip Style
-
-```tsx
-const TOOLTIP_STYLE = {
-  contentStyle: {
-    backgroundColor: 'var(--bg-secondary)',
-    border: '1px solid var(--border-color)',
-    borderRadius: 'var(--radius-card)',
-    color: 'var(--text-primary)',
-    fontSize: '0.875rem',
-  },
-  labelStyle: {
-    color: 'var(--text-primary)',
-    fontWeight: 600,
-  },
-};
-```
-
-### Chart Color Palette
-
-```tsx
-const CHART_COLORS = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-];
-```
-
-### Bar Chart
-
-```tsx
-import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
-
-<ChartCard title={t('charts.itemsByMonth')}>
-  <ResponsiveContainer width="100%" height="100%">
-    <BarChart data={data}>
-      <CartesianGrid strokeDasharray="3 3" stroke="var(--border-color)" />
-      <XAxis dataKey="name" stroke="var(--text-muted)" fontSize={12} />
-      <YAxis stroke="var(--text-muted)" fontSize={12} />
-      <Tooltip {...TOOLTIP_STYLE} />
-      <Bar dataKey="value" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
-    </BarChart>
-  </ResponsiveContainer>
-</ChartCard>
-```
-
-### Stacked Bar Chart
-
-```tsx
-<ResponsiveContainer width="100%" height="100%">
-  <BarChart data={data}>
-    <CartesianGrid strokeDasharray="3 3" stroke="var(--border-color)" />
-    <XAxis dataKey="month" stroke="var(--text-muted)" fontSize={12} />
-    <YAxis stroke="var(--text-muted)" fontSize={12} />
-    <Tooltip {...TOOLTIP_STYLE} />
-    <Bar dataKey="active" stackId="a" fill="var(--chart-1)" />
-    <Bar dataKey="pending" stackId="a" fill="var(--chart-2)" />
-    <Bar dataKey="closed" stackId="a" fill="var(--chart-3)" radius={[4, 4, 0, 0]} />
-  </BarChart>
-</ResponsiveContainer>
-```
-
-### Line Chart
-
-```tsx
-import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
-
-<ChartCard title={t('charts.trendOverTime')}>
-  <ResponsiveContainer width="100%" height="100%">
-    <LineChart data={data}>
-      <CartesianGrid strokeDasharray="3 3" stroke="var(--border-color)" />
-      <XAxis dataKey="date" stroke="var(--text-muted)" fontSize={12} />
-      <YAxis stroke="var(--text-muted)" fontSize={12} />
-      <Tooltip {...TOOLTIP_STYLE} />
-      <Line type="monotone" dataKey="value" stroke="var(--chart-1)" strokeWidth={2} dot={false} />
-      <Line type="monotone" dataKey="target" stroke="var(--chart-2)" strokeWidth={2} strokeDasharray="5 5" dot={false} />
-    </LineChart>
-  </ResponsiveContainer>
-</ChartCard>
-```
-
-### Pie / Donut Chart
-
-```tsx
-import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';
-
-<ChartCard title={t('charts.distributionByStatus')}>
-  <ResponsiveContainer width="100%" height="100%">
-    <PieChart>
-      <Pie
-        data={data}
-        cx="50%"
-        cy="50%"
-        innerRadius={60}  // 0 for pie, >0 for donut
-        outerRadius={100}
-        dataKey="value"
-        nameKey="name"
-        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
-      >
-        {data.map((_, index) => (
-          <Cell key={index} fill={CHART_COLORS[index % CHART_COLORS.length]} />
-        ))}
-      </Pie>
-      <Tooltip {...TOOLTIP_STYLE} />
-      <Legend />
-    </PieChart>
-  </ResponsiveContainer>
-</ChartCard>
-```
-
-### Area Chart
-
-```tsx
-import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
-
-<ChartCard title={t('charts.volumeOverTime')}>
-  <ResponsiveContainer width="100%" height="100%">
-    <AreaChart data={data}>
-      <CartesianGrid strokeDasharray="3 3" stroke="var(--border-color)" />
-      <XAxis dataKey="date" stroke="var(--text-muted)" fontSize={12} />
-      <YAxis stroke="var(--text-muted)" fontSize={12} />
-      <Tooltip {...TOOLTIP_STYLE} />
-      <Area type="monotone" dataKey="value" stroke="var(--chart-1)" fill="var(--chart-1)" fillOpacity={0.2} />
-    </AreaChart>
-  </ResponsiveContainer>
-</ChartCard>
-```
-
----
-
-## DASHBOARD LAYOUT
-
-### Standard Dashboard Grid
-
-```tsx
-interface DashboardLayoutProps {
-  kpis: StatCardProps[];
-  charts: ChartCardProps[];
-  filters?: React.ReactNode;
-  loading?: boolean;
-}
-
-function DashboardLayout({ kpis, charts, filters, loading }: DashboardLayoutProps) {
-  return (
-    <div className="space-y-6">
-      {/* Filters */}
-      {filters && (
-        <div className="flex flex-wrap items-center gap-4">
-          {filters}
-        </div>
-      )}
-
-      {/* KPI Row - 1 col mobile, 2 col tablet, 4 col desktop */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {kpis.map((kpi, i) => (
-          <StatCard key={i} {...kpi} />
-        ))}
-      </div>
-
-      {/* Charts Row - 1 col mobile, 2 col desktop */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {charts.map((chart, i) => (
-          <ChartCard key={i} {...chart} loading={loading} />
-        ))}
-      </div>
-    </div>
-  );
-}
-```
-
-### Period Filter
-
-```tsx
-import { useTranslation } from 'react-i18next';
-
-function PeriodFilter({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  const { t } = useTranslation();
-  const periods = [
-    { value: 'day', label: t('common:periods.day') },
-    { value: 'week', label: t('common:periods.week') },
-    { value: 'month', label: t('common:periods.month') },
-    { value: 'quarter', label: t('common:periods.quarter') },
-    { value: 'year', label: t('common:periods.year') },
-  ];
-
-  return (
-    <select
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      className="rounded-[var(--radius-button)] bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[var(--text-primary)] px-3 py-1.5 text-sm"
-    >
-      {periods.map(p => (
-        <option key={p.value} value={p.value}>{p.label}</option>
-      ))}
-    </select>
-  );
-}
-```
-
----
-
-## ABSOLUTE RULES
-
-| DO | DON'T |
-|----|-------|
-| CSS variables for ALL chart colors (`--chart-1` to `--chart-5`) | Hardcoded hex colors (`fill="#8884d8"`) |
-| CSS variables for backgrounds/borders/text | Hardcoded Tailwind (`bg-blue-500`) |
-| `ResponsiveContainer width="100%" height="100%"` | Fixed pixel dimensions |
-| `useTranslation()` for labels and tooltips | Hardcoded text strings |
-| Skeleton loading states for charts | Blank space during loading |
-| Separate `StatCard` for KPI values | Inline divs with numbers |
-| `ChartCard` wrapper for consistent styling | Naked charts without card wrapper |
-| `memo()` for chart components in lists | Re-rendering charts on every state change |