skillstore-cli 1.0.0

package/data/shared/framework/skills/security-audit/references/vulnerability-remediation.md

@@ -0,0 +1,331 @@
+# Vulnerability Remediation
+
+Tools, processes, and standards for identifying, prioritizing, and remediating security vulnerabilities across the development lifecycle.
+
+---
+
+## Dependency Scanning Pipeline
+
+### npm audit (Node.js)
+```bash
+# Check for known vulnerabilities
+npm audit
+
+# Only fail on high/critical (CI-friendly)
+npm audit --audit-level=high
+
+# Auto-fix where possible
+npm audit fix
+
+# Force major version updates (review carefully)
+npm audit fix --force
+```
+
+### Snyk
+```bash
+# Test project dependencies
+snyk test --severity-threshold=high
+
+# Monitor for new vulnerabilities (ongoing)
+snyk monitor
+
+# Test container image
+snyk container test node:20-alpine
+
+# Generate SBOM
+snyk sbom --format=cyclonedx1.4+json
+```
+
+### Trivy (Container Images & Filesystem)
+```bash
+# Scan container image
+trivy image --severity HIGH,CRITICAL myapp:latest
+
+# Scan project filesystem
+trivy fs --severity HIGH,CRITICAL .
+
+# Scan IaC (Terraform, CloudFormation)
+trivy config --severity HIGH,CRITICAL ./infrastructure/
+
+# Output as JSON for CI integration
+trivy image --format json --output results.json myapp:latest
+```
+
+### OWASP Dependency-Check
+```bash
+# Scan project (Java, .NET, Node.js, Python, Ruby)
+dependency-check --project "MyApp" --scan ./src --format JSON --out ./reports
+
+# Fail build on CVSS >= 7
+dependency-check --project "MyApp" --scan ./src --failOnCVSS 7
+```
+
+---
+
+## Static Application Security Testing (SAST)
+
+### Semgrep
+```bash
+# Run default security rules
+semgrep --config=auto .
+
+# Run OWASP Top 10 ruleset
+semgrep --config=p/owasp-top-ten .
+
+# CI mode — output SARIF for GitHub Security tab
+semgrep --config=auto --sarif --output=semgrep.sarif .
+```
+
+#### Custom Semgrep Rule Example
+```yaml
+# .semgrep/custom-rules.yml
+rules:
+  - id: no-hardcoded-secrets
+    patterns:
+      - pattern-either:
+          - pattern: |
+              const $KEY = "sk_live_..."
+          - pattern: |
+              const $KEY = "AKIA..."
+          - pattern: |
+              password = "..."
+    message: "Hardcoded secret detected. Use environment variables or a secrets manager."
+    severity: ERROR
+    languages: [javascript, typescript, python]
+
+  - id: no-sql-string-concat
+    patterns:
+      - pattern: |
+          $DB.query(`... ${$USER_INPUT} ...`)
+      - pattern: |
+          $DB.query("..." + $USER_INPUT + "...")
+    message: "SQL query with string concatenation. Use parameterized queries."
+    severity: ERROR
+    languages: [javascript, typescript]
+```
+
+### CodeQL
+```yaml
+# .github/workflows/codeql.yml
+name: CodeQL Analysis
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    permissions:
+      security-events: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: github/codeql-action/init@v3
+        with:
+          languages: javascript
+          queries: security-extended
+      - uses: github/codeql-action/analyze@v3
+```
+
+### SonarQube
+- Integrates SAST + code quality in one platform
+- Security hotspots require manual triage (potential issues that need human review)
+- Quality gates: block merge if new security hotspots or vulnerabilities introduced
+
+---
+
+## Dynamic Application Security Testing (DAST)
+
+### OWASP ZAP (Automated)
+```bash
+# Quick baseline scan
+docker run --rm owasp/zap2docker-stable zap-baseline.py -t https://staging.example.com
+
+# Full active scan (aggressive — only run against test environments)
+docker run --rm owasp/zap2docker-stable zap-full-scan.py -t https://staging.example.com
+
+# API scan with OpenAPI spec
+docker run --rm -v $(pwd):/zap/wrk owasp/zap2docker-stable zap-api-scan.py \
+  -t https://staging.example.com/api/openapi.json -f openapi
+```
+
+### Burp Suite (Manual Penetration Testing)
+- Use for pre-pentest preparation: identify attack surface, test complex auth flows
+- Key features: Repeater (manual request crafting), Intruder (fuzzing), Scanner (automated)
+- Export findings in HTML/XML format for inclusion in audit reports
+
+---
+
+## CVSS v3.1 Scoring
+
+### How to Read CVSS Scores
+
+| Severity | Score Range | Example |
+|---|---|---|
+| **Critical** | 9.0 – 10.0 | Remote code execution, unauthenticated SQL injection |
+| **High** | 7.0 – 8.9 | XSS with session hijack, IDOR on sensitive data |
+| **Medium** | 4.0 – 6.9 | CSRF on non-critical action, verbose error messages |
+| **Low** | 0.1 – 3.9 | Missing security headers, information disclosure (non-sensitive) |
+| **None** | 0.0 | Informational finding, best practice suggestion |
+
+### CVSS Vector Breakdown
+```
+CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H = 9.8 (Critical)
+
+AV (Attack Vector):     N=Network, A=Adjacent, L=Local, P=Physical
+AC (Attack Complexity):  L=Low, H=High
+PR (Privileges Required): N=None, L=Low, H=High
+UI (User Interaction):   N=None, R=Required
+S  (Scope):             U=Unchanged, C=Changed
+C  (Confidentiality):   N=None, L=Low, H=High
+I  (Integrity):         N=None, L=Low, H=High
+A  (Availability):      N=None, L=Low, H=High
+```
+
+### Prioritization Strategy
+1. **CVSS score** determines severity band
+2. **Exploitability** determines urgency within band (is there a known exploit? is it actively exploited?)
+3. **Business context** adjusts priority (customer-facing vs internal, PII involved, compliance scope)
+
+---
+
+## Remediation SLA by Severity
+
+| Severity | SLA | Escalation |
+|---|---|---|
+| **Critical** (9.0-10.0) | Fix within 24 hours | Immediate page to on-call; hotfix deployment |
+| **High** (7.0-8.9) | Fix within 7 days | Engineering lead notified; scheduled in current sprint |
+| **Medium** (4.0-6.9) | Fix within 30 days | Added to backlog; prioritized in upcoming sprint |
+| **Low** (0.1-3.9) | Fix within 90 days | Added to backlog; addressed opportunistically |
+
+### SLA Exceptions
+- If a Critical/High cannot be fixed within SLA, a documented risk acceptance must be approved by security lead and engineering director
+- Compensating controls (WAF rules, network restrictions) can extend SLA but not replace the fix
+
+---
+
+## Vulnerability Disclosure Process
+
+1. **Internal Triage** (Day 0): Security team validates finding, assigns CVSS score, determines affected versions
+2. **Fix Development** (Day 1-7): Patch developed, reviewed, and tested in isolation
+3. **CVE Assignment**: Request CVE ID from CNA (MITRE or relevant authority) if applicable
+4. **Coordinated Disclosure**: Notify affected parties 30 days before public disclosure (if external dependency)
+5. **Patch Release**: Deploy fix, publish security advisory, notify users
+6. **Post-Disclosure**: Monitor for exploitation, update detection rules
+
+---
+
+## Security Incident Response Checklist
+
+### Phase 1: Contain
+- [ ] Isolate affected systems (network segmentation, disable compromised credentials)
+- [ ] Preserve evidence (logs, memory dumps, disk images) before remediation
+- [ ] Activate incident response team; assign incident commander
+
+### Phase 2: Investigate
+- [ ] Determine attack vector and scope of compromise
+- [ ] Identify affected data and users
+- [ ] Timeline reconstruction from logs
+- [ ] Determine if attacker still has access
+
+### Phase 3: Remediate
+- [ ] Patch vulnerability that was exploited
+- [ ] Rotate all potentially compromised credentials
+- [ ] Review and harden related systems
+- [ ] Verify remediation through re-testing
+
+### Phase 4: Communicate
+- [ ] Notify affected users per regulatory requirements (GDPR: 72h, HIPAA: 60 days)
+- [ ] File regulatory notifications if required
+- [ ] Update status page and customer communications
+
+### Phase 5: Postmortem
+- [ ] Blameless incident review within 5 business days
+- [ ] Document root cause, timeline, and remediation steps
+- [ ] Identify systemic improvements (detection, prevention, response)
+- [ ] Track action items to completion
+
+---
+
+## Security Testing in CI/CD
+
+### Pipeline Integration Points
+
+```
+┌─────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────────┐
+│  Pre-Commit  │ →  │   PR Check    │ →  │  Build/Test   │ →  │  Deploy Gate  │
+│              │    │              │    │              │    │              │
+│ detect-secrets│    │ Semgrep SAST  │    │ npm audit     │    │ Trivy image   │
+│ gitleaks     │    │ CodeQL        │    │ Unit tests    │    │ DAST (staging)│
+│ eslint-security│  │ License check │    │ Snyk test     │    │ Smoke tests   │
+└─────────────┘    └──────────────┘    └──────────────┘    └──────────────┘
+```
+
+### Pre-Commit Hooks
+```yaml
+# .pre-commit-config.yaml
+repos:
+  - repo: https://github.com/Yelp/detect-secrets
+    rev: v1.4.0
+    hooks:
+      - id: detect-secrets
+        args: ['--baseline', '.secrets.baseline']
+
+  - repo: https://github.com/gitleaks/gitleaks
+    rev: v8.18.0
+    hooks:
+      - id: gitleaks
+```
+
+### Deploy Gate Example
+```yaml
+# Block deployment if critical vulnerabilities found in container image
+- name: Trivy Container Scan
+  uses: aquasecurity/trivy-action@master
+  with:
+    image-ref: '${{ env.IMAGE_TAG }}'
+    severity: 'CRITICAL'
+    exit-code: '1'
+    format: 'sarif'
+    output: 'trivy-results.sarif'
+
+- name: Upload Trivy results
+  uses: github/codeql-action/upload-sarif@v3
+  with:
+    sarif_file: 'trivy-results.sarif'
+```
+
+---
+
+## Compliance Mapping
+
+### SOC 2 Trust Service Criteria → Code Practices
+
+| Control | Code Practice |
+|---|---|
+| CC6.1 — Logical access security | RBAC middleware, authentication on all endpoints |
+| CC6.3 — Role-based access | Authorization checks, principle of least privilege |
+| CC6.6 — Security for external threats | WAF, rate limiting, input validation |
+| CC7.2 — Monitoring | Security event logging, anomaly alerting |
+| CC8.1 — Change management | PR reviews, CI/CD gates, deployment approvals |
+
+### HIPAA Technical Safeguards → Code Practices
+
+| Safeguard | Code Practice |
+|---|---|
+| Access Control (§164.312(a)) | Role-based access, session management, automatic logout |
+| Audit Controls (§164.312(b)) | Comprehensive audit logging, tamper-evident log storage |
+| Integrity Controls (§164.312(c)) | Input validation, checksums, digital signatures |
+| Transmission Security (§164.312(e)) | TLS 1.2+, certificate pinning, encrypted API communication |
+
+### PCI-DSS v4.0 Requirements → Code Practices
+
+| Requirement | Code Practice |
+|---|---|
+| Req 2 — Secure configurations | Security hardening checklist, no default credentials |
+| Req 3 — Protect stored data | Encryption at rest (AES-256), tokenization for card data |
+| Req 6 — Secure development | SAST in CI, code review, security training |
+| Req 8 — Strong authentication | MFA, strong passwords, session timeout |
+| Req 10 — Logging and monitoring | Audit trail for all access to cardholder data |
+| Req 11 — Security testing | Quarterly vulnerability scans, annual penetration test |

package/data/shared/framework/skills/ui-generation/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: ui-generation
+description: Generate production-quality UI components from descriptions, wireframes, or screenshots — React, Vue, HTML/CSS with accessibility and responsive design
+---
+
+# UI Generation
+
+## Triggers
+
+Activate this skill when:
+- Creating UI components from text descriptions or mockups
+- Converting wireframes or screenshots into code
+- Building responsive layouts from design specs
+- Generating accessible, design-system-aligned components
+- Prototyping UI quickly for stakeholder review
+- Building compound components (Tabs, Accordion, Select) with shared state
+- Setting up or extending a design system with tokens and theming
+- Configuring Storybook for component documentation or visual testing
+- Creating component variant matrices or interaction tests
+
+## Process
+
+### 1. Input Analysis
+- Parse description for component type (form, card, table, dashboard, nav, modal)
+- Identify framework target: React (JSX + Tailwind), Vue (SFC), or HTML/CSS
+- Extract design constraints: colors, spacing, typography, breakpoints
+- Detect design system tokens if project has one (check for tailwind.config, theme files)
+
+### 2. Component Architecture
+Load: `references/generation-patterns.md`
+
+- Determine component granularity (single component vs. composition)
+- Define props/slots interface for reusability
+- Plan state requirements (controlled vs uncontrolled, form state)
+- Identify shared subcomponents (Button, Input, Badge, etc.)
+
+### 3. Generation
+- Generate semantic HTML structure first
+- Apply styling with project's approach (Tailwind, CSS Modules, styled-components)
+- Add responsive breakpoints (mobile-first: 640px, 768px, 1024px, 1280px)
+- Wire up interactions (hover, focus, active states)
+- Include loading, empty, and error states
+
+### 4. Accessibility & Responsiveness
+Load: `references/accessibility-responsive.md`
+
+- Enforce WCAG 2.1 AA compliance
+- Add semantic landmarks and ARIA attributes
+- Ensure keyboard navigation (Tab, Enter, Escape, Arrow keys)
+- Verify color contrast ratios (4.5:1 text, 3:1 large text/UI)
+- Set touch targets minimum 44×44px
+- Test layout at all breakpoints
+
+### 5. Output & Verification
+- Present generated code with inline comments for key decisions
+- List accessibility features included
+- Note any assumptions made about design intent
+- Suggest variants or improvements if applicable
+
+## References
+
+- [Generation Patterns](references/generation-patterns.md) — description parsing, component mapping, design tokens, state design
+- [Accessibility & Responsive](references/accessibility-responsive.md) — WCAG 2.1 AA, ARIA patterns, keyboard nav, responsive strategies
+- [Compound Components](references/compound-components.md) — compound pattern, headless UI libs, slot composition, design tokens
+- [Storybook & Design System](references/storybook-design-system.md) — CSF3, Chromatic visual testing, play functions, a11y addon
+- [Troubleshooting](references/troubleshooting.md) — design mismatch, WCAG failures, responsive issues, dark mode, cross-browser, z-index
+
+## Assets
+
+- [Sample Output](assets/sample-output.md) — dashboard card component in React + Tailwind

package/data/shared/framework/skills/ui-generation/assets/sample-output.md

@@ -0,0 +1,139 @@
+# Sample Output: Dashboard Stats Card — React + Tailwind
+
+## Input Description
+"Create a stats card component showing a metric with label, value, trend indicator (up/down), and sparkline chart area. Should work in a dashboard grid."
+
+## Generated Component
+
+```tsx
+interface StatsCardProps {
+  label: string;
+  value: string | number;
+  trend: {
+    direction: 'up' | 'down' | 'neutral';
+    percentage: number;
+  };
+  sparklineData?: number[];
+  loading?: boolean;
+}
+
+export function StatsCard({ label, value, trend, sparklineData, loading = false }: StatsCardProps) {
+  if (loading) {
+    return (
+      <div className="rounded-xl border border-gray-200 bg-white p-6 animate-pulse dark:border-gray-700 dark:bg-gray-800">
+        <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+        <div className="mt-3 h-8 w-32 rounded bg-gray-200 dark:bg-gray-700" />
+        <div className="mt-4 h-12 w-full rounded bg-gray-200 dark:bg-gray-700" />
+      </div>
+    );
+  }
+
+  const trendColor = {
+    up: 'text-emerald-600 dark:text-emerald-400',
+    down: 'text-red-600 dark:text-red-400',
+    neutral: 'text-gray-500 dark:text-gray-400',
+  }[trend.direction];
+
+  const trendIcon = {
+    up: '↑',
+    down: '↓',
+    neutral: '→',
+  }[trend.direction];
+
+  return (
+    <article
+      className="rounded-xl border border-gray-200 bg-white p-6 transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
+      aria-label={`${label}: ${value}`}
+    >
+      {/* Label */}
+      <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+        {label}
+      </p>
+
+      {/* Value + Trend */}
+      <div className="mt-2 flex items-baseline gap-3">
+        <span className="text-3xl font-bold text-gray-900 dark:text-white">
+          {value}
+        </span>
+        <span className={`inline-flex items-center gap-1 text-sm font-medium ${trendColor}`}>
+          <span aria-hidden="true">{trendIcon}</span>
+          <span>{trend.percentage}%</span>
+          <span className="sr-only">
+            {trend.direction === 'up' ? 'increase' : trend.direction === 'down' ? 'decrease' : 'no change'}
+          </span>
+        </span>
+      </div>
+
+      {/* Sparkline area */}
+      {sparklineData && sparklineData.length > 0 && (
+        <div className="mt-4 h-12" role="img" aria-label={`Trend chart for ${label}`}>
+          <svg viewBox={`0 0 ${sparklineData.length * 10} 48`} className="h-full w-full" preserveAspectRatio="none">
+            <polyline
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              className="text-blue-500 dark:text-blue-400"
+              points={sparklineData.map((v, i) => {
+                const max = Math.max(...sparklineData);
+                const min = Math.min(...sparklineData);
+                const range = max - min || 1;
+                const x = i * 10;
+                const y = 48 - ((v - min) / range) * 44 - 2;
+                return `${x},${y}`;
+              }).join(' ')}
+            />
+          </svg>
+        </div>
+      )}
+    </article>
+  );
+}
+```
+
+## Usage
+
+```tsx
+<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+  <StatsCard
+    label="Total Revenue"
+    value="$45,231"
+    trend={{ direction: 'up', percentage: 12.5 }}
+    sparklineData={[20, 25, 30, 28, 35, 42, 45]}
+  />
+  <StatsCard
+    label="Active Users"
+    value="2,341"
+    trend={{ direction: 'up', percentage: 8.2 }}
+    sparklineData={[180, 200, 195, 210, 230, 225, 234]}
+  />
+  <StatsCard
+    label="Bounce Rate"
+    value="24.3%"
+    trend={{ direction: 'down', percentage: 3.1 }}
+    sparklineData={[30, 28, 27, 25, 26, 24, 24]}
+  />
+  <StatsCard
+    label="Avg. Session"
+    value="4m 32s"
+    trend={{ direction: 'neutral', percentage: 0.5 }}
+  />
+</div>
+```
+
+## Accessibility Features
+
+- `<article>` with `aria-label` for screen reader context
+- Screen-reader-only text for trend direction interpretation
+- `aria-hidden` on decorative trend icons
+- `role="img"` with `aria-label` on sparkline SVG
+- Skeleton loading state with `animate-pulse`
+- Dark mode support throughout
+- Focus-visible compatible (no custom focus overrides)
+
+## Responsive Behavior
+
+| Breakpoint | Layout |
+|------------|--------|
+| Mobile (< 640px) | Single column stack |
+| Tablet (≥ 640px) | 2-column grid |
+| Desktop (≥ 1024px) | 4-column grid |

package/data/shared/framework/skills/ui-generation/references/accessibility-responsive.md

@@ -0,0 +1,127 @@
+# Accessibility & Responsive Design
+
+## WCAG 2.1 AA Compliance
+
+### Semantic HTML First
+- Use `<main>`, `<nav>`, `<header>`, `<footer>`, `<aside>`, `<section>`, `<article>` for landmarks
+- Use heading hierarchy (`h1` → `h6`) without skipping levels
+- Use `<button>` for actions, `<a>` for navigation — never reverse
+- Use `<ul>`/`<ol>` for lists, `<table>` for tabular data
+- Use `<label>` with `for` attribute for every form input
+
+### ARIA Patterns
+
+#### Dialog / Modal
+```html
+<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
+  <h2 id="dialog-title">Title</h2>
+  <!-- content -->
+  <button>Close</button>
+</div>
+```
+- Trap focus inside dialog
+- Return focus to trigger on close
+- Close on Escape key
+
+#### Tabs
+```html
+<div role="tablist" aria-label="Section tabs">
+  <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
+  <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
+</div>
+<div role="tabpanel" id="panel-1">Content 1</div>
+<div role="tabpanel" id="panel-2" hidden>Content 2</div>
+```
+- Arrow keys navigate between tabs
+- Tab key moves to panel content
+
+#### Accordion
+```html
+<h3>
+  <button aria-expanded="true" aria-controls="section-1">Section Title</button>
+</h3>
+<div id="section-1" role="region" aria-labelledby="...">Content</div>
+```
+
+#### Combobox / Autocomplete
+```html
+<input role="combobox" aria-expanded="false" aria-autocomplete="list"
+       aria-controls="listbox-1" aria-activedescendant="">
+<ul role="listbox" id="listbox-1">
+  <li role="option" id="opt-1">Option 1</li>
+</ul>
+```
+- Arrow keys navigate options
+- Enter selects, Escape closes
+
+### Keyboard Navigation
+- All interactive elements must be focusable (native elements or `tabindex="0"`)
+- Focus order follows visual layout (no `tabindex` > 0)
+- Custom components implement expected key patterns:
+  - `Enter`/`Space`: activate buttons and links
+  - `Escape`: close overlays, cancel actions
+  - `Arrow keys`: navigate within composite widgets (tabs, menus, grids)
+  - `Home`/`End`: jump to first/last item in lists
+
+### Color & Contrast
+- Text on background: minimum 4.5:1 contrast ratio
+- Large text (18px+ or 14px+ bold): minimum 3:1
+- UI components and graphical objects: minimum 3:1
+- Never convey information by color alone — add icons, patterns, or text labels
+- Test with: WebAIM Contrast Checker, axe DevTools
+
+### Focus Indicators
+- Visible focus ring on all interactive elements (minimum 2px)
+- Focus ring color must have 3:1 contrast against adjacent colors
+- Never remove outline without providing alternative indicator
+
+## Responsive Strategy
+
+### Mobile-First Breakpoints
+
+| Name | Width | Target |
+|------|-------|--------|
+| `sm` | 640px | Large phones (landscape) |
+| `md` | 768px | Tablets |
+| `lg` | 1024px | Small laptops |
+| `xl` | 1280px | Desktops |
+| `2xl` | 1536px | Large screens |
+
+### Layout Patterns
+
+#### Stack → Grid
+```css
+/* Mobile: stack vertically */
+.container { display: flex; flex-direction: column; gap: 1rem; }
+
+/* Tablet+: switch to grid */
+@media (min-width: 768px) {
+  .container { display: grid; grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Desktop+: 3 columns */
+@media (min-width: 1024px) {
+  .container { grid-template-columns: repeat(3, 1fr); }
+}
+```
+
+#### Sidebar Collapse
+- Desktop: sidebar visible, content fills remaining space
+- Tablet: sidebar as overlay with toggle button
+- Mobile: sidebar hidden, accessible via hamburger menu
+
+#### Table → Cards
+- Desktop: full table with all columns
+- Tablet: hide non-essential columns, add horizontal scroll
+- Mobile: transform rows into stacked cards
+
+### Touch Targets
+- Minimum touch target size: 44×44px (WCAG) / 48×48px (Material)
+- Minimum spacing between targets: 8px
+- Use `padding` to increase touch area without growing visual size
+
+### Typography Scaling
+- Base font size: 16px (never below on mobile)
+- Use `rem` for font sizes, `em` for component-relative spacing
+- Line length: 45–75 characters for readability
+- Line height: 1.5 for body text, 1.2–1.3 for headings