feat: Enterprise DSS architecture implementation

Complete implementation of enterprise design system validation:

Phase 1 - @dss/rules npm package:
- CLI with validate and init commands
- 16 rules across 5 categories (colors, spacing, typography, components, a11y)
- dss-ignore support (inline and next-line)
- Break-glass [dss-skip] for emergency merges
- CI workflow templates (Gitea, GitHub, GitLab)

Phase 2 - Metrics dashboard:
- FastAPI metrics API with SQLite storage
- Portfolio-wide metrics aggregation
- Project drill-down with file:line:column violations
- Trend charts and history tracking

Phase 3 - Local analysis cache:
- LocalAnalysisCache for offline-capable validation
- Mode detection (LOCAL/REMOTE/CI)
- Stale cache warnings with recommendations

Phase 4 - Project onboarding:
- dss-init command for project setup
- Creates ds.config.json, .dss/ folder structure
- Updates .gitignore and package.json scripts
- Optional CI workflow setup

Architecture decisions:
- No commit-back: CI uploads to dashboard, not git
- Three-tier: Dashboard (read-only) → CI (authoritative) → Local (advisory)
- Pull-based rules via npm for version control

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/dss-rules/rules/accessibility.json

@@ -3,22 +3,20 @@
   "id": "accessibility",
   "version": "1.0.0",
   "name": "Accessibility Rules",
-  "description": "WCAG 2.1 AA compliance rules for accessible design",
+  "description": "WCAG 2.1 AA compliance rules (token-based, not computed)",
   "category": "accessibility",
   "severity": "error",
   "rules": [
     {
       "id": "images-have-alt",
       "name": "Images Must Have Alt Text",
-      "description": "All img elements must have meaningful alt text or be marked decorative",
+      "description": "All img elements must have alt attribute",
       "severity": "error",
       "wcag": "1.1.1",
       "validation": {
         "type": "attribute-required",
         "element": "img",
-        "attribute": "alt",
-        "allowEmpty": true,
-        "emptyMeansDecorative": true
+        "attribute": "alt"
       }
     },
     {
@@ -29,8 +27,7 @@
       "wcag": "4.1.2",
       "validation": {
         "type": "accessible-name",
-        "elements": ["button", "[role=button]"],
-        "sources": ["text content", "aria-label", "aria-labelledby"]
+        "elements": ["button", "[role=button]"]
       }
     },
     {
@@ -41,71 +38,38 @@
       "wcag": "1.3.1",
       "validation": {
         "type": "label-association",
-        "elements": ["input", "select", "textarea"],
-        "methods": ["for/id", "aria-labelledby", "aria-label", "wrapper"]
+        "elements": ["input", "select", "textarea"]
       }
     },
     {
-      "id": "focus-visible",
-      "name": "Focus Must Be Visible",
-      "description": "Interactive elements must have visible focus indicators",
+      "id": "no-focus-outline-none",
+      "name": "Do Not Remove Focus Outline",
+      "description": "Never use outline: none on focusable elements",
       "severity": "error",
       "wcag": "2.4.7",
-      "validation": {
-        "type": "focus-style",
-        "minContrastRatio": 3.0,
-        "forbiddenPatterns": ["outline: none", "outline: 0", ":focus { outline: none }"]
+      "patterns": {
+        "forbidden": [
+          "outline:\\s*none",
+          "outline:\\s*0(?![0-9])",
+          ":focus\\s*\\{[^}]*outline:\\s*none"
+        ]
       }
     },
-    {
-      "id": "color-not-only",
-      "name": "Color Not Only Indicator",
-      "description": "Information must not be conveyed by color alone",
-      "severity": "warning",
-      "wcag": "1.4.1",
-      "guidelines": [
-        "Error states need icon + color + text",
-        "Links in text need underline or other indicator",
-        "Status indicators need icon or pattern"
-      ]
-    },
     {
       "id": "touch-target-size",
       "name": "Minimum Touch Target Size",
-      "description": "Interactive elements must be at least 44x44 CSS pixels",
+      "description": "Interactive elements should be at least 44x44 CSS pixels",
       "severity": "warning",
       "wcag": "2.5.5",
-      "validation": {
-        "type": "size-check",
-        "minWidth": 44,
-        "minHeight": 44,
-        "elements": ["button", "a", "[role=button]", "input[type=checkbox]", "input[type=radio]"]
-      }
-    },
-    {
-      "id": "keyboard-navigation",
-      "name": "Keyboard Navigation",
-      "description": "All functionality must be accessible via keyboard",
-      "severity": "error",
-      "wcag": "2.1.1",
-      "validation": {
-        "type": "keyboard-accessible",
-        "requirements": [
-          "All interactive elements focusable",
-          "No keyboard traps",
-          "Logical tab order",
-          "Skip links for navigation"
-        ]
-      }
+      "guidelines": [
+        "Use Button component which ensures minimum size",
+        "Ensure clickable areas have sufficient padding"
+      ]
     }
   ],
   "compliance": {
     "level": "AA",
     "standards": ["WCAG 2.1"],
-    "testingTools": [
-      "axe-core",
-      "pa11y",
-      "lighthouse"
-    ]
+    "note": "Computed checks (contrast ratio) require runtime analysis"
   }
 }