@skilly-hand/skilly-hand 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -16,6 +16,38 @@ All notable changes to this project are documented in this file.
 ### Removed
 - _None._
 
+## [0.8.0] - 2026-04-04
+[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.8.0)
+
+### Added
+- Added portable skill `frontend-design` for project-aware UI component design that enforces stack detection before any design work.
+- Added portable skill `life-guard` for multi-perspective code and decision review using a committee + domain expert safety guard pattern.
+- Added portable skill `test-driven-development` for guiding the RED → GREEN → REFACTOR TDD cycle.
+
+### Changed
+- _None._
+
+### Fixed
+- _None._
+
+### Removed
+- _None._
+
+## [0.7.0] - 2026-04-04
+[View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.7.0)
+
+### Added
+- _None._
+
+### Changed
+- _None._
+
+### Fixed
+- _None._
+
+### Removed
+- _None._
+
 ## [0.6.1] - 2026-04-04
 [View on npm](https://www.npmjs.com/package/@skilly-hand/skilly-hand/v/0.6.1)
 

package/README.md

@@ -65,6 +65,7 @@ npx skilly-hand
 
 The catalog currently includes:
 
+- `accessibility-audit`
 - `agents-root-orchestrator`
 - `angular-guidelines`
 - `figma-mcp-0to1`

package/catalog/README.md

@@ -4,11 +4,15 @@ Published portable skills consumed by the `skilly-hand` CLI.
 
 | Skill | Description | Tags | Installs For |
 | ----- | ----------- | ---- | ------------ |
+| `accessibility-audit` | Audit web accessibility against W3C WCAG 2.2 Level AA using framework-agnostic checks, remediation patterns, and portable command-line scanning. | frontend, accessibility, workflow, quality | all |
 | `agents-root-orchestrator` | Author root AGENTS.md as a Where/What/When orchestrator that routes tasks and skill invocation clearly. | core, workflow, orchestration | all |
 | `angular-guidelines` | Guide Angular code generation and review using latest stable Angular verification and modern framework best practices. | angular, frontend, workflow, best-practices | all |
 | `figma-mcp-0to1` | Guide users from Figma MCP installation and authentication through first canvas creation, with function-level tool coverage and operational recovery patterns. | figma, mcp, workflow, design | all |
+| `frontend-design` | Project-aware frontend design skill that detects the existing tech stack, UI libraries, CSS variables, and design tokens before proposing any UI work. Never invents design decisions — reads the project first, confirms with the user, then designs. | frontend, design, workflow, ui | all |
+| `life-guard` | Review code, decisions, and artifacts through a multi-perspective committee and a domain expert safety guard, then synthesize a structured verdict. | core, review, workflow, quality | all |
 | `skill-creator` | Create and standardize AI skills with reusable structure, metadata rules, and templates. | core, workflow, authoring | all |
 | `spec-driven-development` | Plan, execute, and verify multi-step work through versioned specs with small, testable tasks. | core, workflow, planning | all |
+| `test-driven-development` | Guide implementation using the RED → GREEN → REFACTOR TDD cycle: write a failing test first, write the minimum code to pass, then refactor while tests stay green. | testing, workflow, quality, core | all |
 | `token-optimizer` | Classify task complexity and right-size reasoning depth, context gathering, and response detail to reduce wasted tokens. | core, workflow, efficiency | all |
 
 Legacy source remains under `source/legacy/agentic-structure` and is excluded from installation.

package/catalog/catalog-index.json

@@ -1,8 +1,12 @@
 [
+  "accessibility-audit",
   "agents-root-orchestrator",
   "angular-guidelines",
   "figma-mcp-0to1",
+  "frontend-design",
+  "life-guard",
   "skill-creator",
   "spec-driven-development",
+  "test-driven-development",
   "token-optimizer"
 ]

package/catalog/skills/accessibility-audit/SKILL.md

@@ -0,0 +1,154 @@
+# Accessibility Audit Guide
+
+## When to Use
+
+Use this skill when:
+
+- Auditing components or pages for WCAG conformance.
+- Reviewing pull requests that change templates, interactive UI, forms, or styles.
+- Defining accessibility acceptance criteria for frontend delivery.
+- Converting automated scanner findings into prioritized remediations.
+
+Do not use this skill for:
+
+- Product-specific visual token compliance.
+- Framework-only code style reviews unrelated to accessibility behavior.
+- Non-web formats that need a dedicated standard beyond WCAG web content checks.
+
+---
+
+## Baseline and Sources
+
+Default baseline:
+
+- **WCAG 2.2 Level AA**.
+
+W3C status notes (verified from W3C WCAG overview):
+
+- WCAG 2.2 was published on **5 October 2023** and updated on **12 December 2024**.
+- W3C encourages using the latest WCAG version.
+
+Use only W3C sources for decisions and remediation rationale.
+
+---
+
+## Critical Patterns
+
+### Pattern 1: Audit in POUR Order
+
+Audit checks in this order to reduce misses:
+
+1. **Perceivable**: text alternatives, structure, contrast.
+2. **Operable**: keyboard, focus, target size, predictable interaction.
+3. **Understandable**: labels, errors, language, clear behavior.
+4. **Robust**: semantic roles/states and assistive-technology compatibility.
+
+### Pattern 2: Prefer Native Semantics First
+
+- Use native controls (`button`, `a`, `input`, `select`, `textarea`) before ARIA-heavy custom widgets.
+- If custom widgets are necessary, define role, keyboard behavior, name, state, and relationship.
+- Never remove focus indicators without a visible replacement.
+
+### Pattern 3: Prioritize by User Impact
+
+Fix in this order:
+
+1. Keyboard and focus blockers.
+2. Missing names/labels for controls and media.
+3. Form errors and status announcements.
+4. Contrast and non-text contrast issues.
+
+### Pattern 4: Validate with W3C Tooling
+
+Use W3C validators as baseline technical checks, then complete manual WCAG behavior review:
+
+- Nu HTML Checker
+- CSS Validator
+
+---
+
+## Decision Tree
+
+```text
+Is this an interactive control?                       -> Verify keyboard access + visible focus + accessible name
+Is this non-text content (image/icon/media)?         -> Verify text alternative strategy
+Is this a form input or validation message?          -> Verify labels, instructions, errors, and status messaging
+Is this a custom widget pattern?                     -> Verify role/state/property model and keyboard model
+Does styling reduce legibility or discernibility?    -> Verify text + non-text contrast and target size
+Otherwise                                            -> Run checklist sweep and document residual risk
+```
+
+---
+
+## Code Examples
+
+### Example 1: Icon Button with Accessible Name and Focus Indicator
+
+```html
+<button type="button" aria-label="Close dialog" class="icon-button">
+  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+    <path d="M6 6l12 12M18 6L6 18" />
+  </svg>
+</button>
+```
+
+```css
+.icon-button:focus-visible {
+  outline: 2px solid #005a9c;
+  outline-offset: 2px;
+}
+```
+
+### Example 2: Labeled Input with Error Association
+
+```html
+<label for="email">Email address</label>
+<input
+  id="email"
+  type="email"
+  aria-invalid="true"
+  aria-describedby="email-error"
+/>
+<p id="email-error" role="alert">Enter a valid email address.</p>
+```
+
+### Example 3: Semantic Click Target Instead of Generic Container
+
+```html
+<button type="button" class="card-action">Open details</button>
+```
+
+```html
+<div role="button" tabindex="0" aria-label="Open details"></div>
+```
+
+---
+
+## Commands
+
+```bash
+# Run default scan on current directory
+bash catalog/skills/accessibility-audit/scripts/audit-a11y.sh
+
+# Scan a specific path
+bash catalog/skills/accessibility-audit/scripts/audit-a11y.sh src
+
+# Generate markdown report
+bash catalog/skills/accessibility-audit/scripts/audit-a11y.sh --report src
+
+# Generate JSON output for CI pipelines
+bash catalog/skills/accessibility-audit/scripts/audit-a11y.sh --json src
+```
+
+---
+
+## Resources
+
+- Full checklist: [references/w3c-wcag22-checklist.md](references/w3c-wcag22-checklist.md)
+- WCAG overview (WAI): https://www.w3.org/WAI/standards-guidelines/wcag/
+- WCAG 2.2 Recommendation: https://www.w3.org/TR/WCAG22/
+- How to Meet WCAG 2 (Quick Reference): https://www.w3.org/WAI/WCAG22/quickref/
+- Understanding WCAG 2: https://www.w3.org/WAI/WCAG22/Understanding/
+- W3C standards context: https://www.w3.org/standards/
+- W3C validators and tools: https://www.w3.org/developers/tools/
+- W3C homepage: https://www.w3.org/

package/catalog/skills/accessibility-audit/manifest.json

@@ -0,0 +1,37 @@
+{
+  "id": "accessibility-audit",
+  "title": "Accessibility Audit",
+  "description": "Audit web accessibility against W3C WCAG 2.2 Level AA using framework-agnostic checks, remediation patterns, and portable command-line scanning.",
+  "portable": true,
+  "tags": ["frontend", "accessibility", "workflow", "quality"],
+  "detectors": ["always"],
+  "detectionTriggers": ["manual"],
+  "installsFor": ["all"],
+  "agentSupport": ["codex", "claude", "cursor", "gemini", "copilot"],
+  "skillMetadata": {
+    "author": "skilly-hand",
+    "last-edit": "2026-04-04",
+    "license": "Apache-2.0",
+    "version": "1.0.0",
+    "changelog": "Added portable WCAG 2.2 Level AA accessibility auditing skill with W3C-only references and scanner script; enables consistent web accessibility review across frameworks; affects catalog skill coverage and install plans for stacks recommending accessibility-audit",
+    "auto-invoke": "Auditing, reviewing, or implementing web accessibility against WCAG 2.2 Level AA",
+    "allowed-tools": [
+      "Read",
+      "Edit",
+      "Write",
+      "Glob",
+      "Grep",
+      "Bash",
+      "WebFetch",
+      "WebSearch",
+      "Task",
+      "SubAgent"
+    ]
+  },
+  "files": [
+    { "path": "SKILL.md", "kind": "instruction" },
+    { "path": "references/w3c-wcag22-checklist.md", "kind": "reference" },
+    { "path": "scripts/audit-a11y.sh", "kind": "asset" }
+  ],
+  "dependencies": []
+}

package/catalog/skills/accessibility-audit/references/w3c-wcag22-checklist.md

@@ -0,0 +1,80 @@
+# W3C WCAG 2.2 Level AA Checklist (Web)
+
+Source basis:
+
+- WCAG 2 Overview: https://www.w3.org/WAI/standards-guidelines/wcag/
+- WCAG 2.2 Recommendation: https://www.w3.org/TR/WCAG22/
+- Quick Reference: https://www.w3.org/WAI/WCAG22/quickref/
+- Understanding WCAG 2: https://www.w3.org/WAI/WCAG22/Understanding/
+
+Default conformance target in this skill: **WCAG 2.2 Level AA**.
+
+## Principle 1: Perceivable
+
+| SC | Level | Audit Focus |
+| --- | --- | --- |
+| 1.1.1 Non-text Content | A | Images/icons/media alternatives (`alt`, labels, text alternatives) |
+| 1.3.1 Info and Relationships | A | Semantic headings, labels, table/form relationships |
+| 1.3.2 Meaningful Sequence | A | DOM reading order matches meaning |
+| 1.3.3 Sensory Characteristics | A | Instructions are not only shape/color/position |
+| 1.3.4 Orientation | AA | Content works in portrait and landscape unless essential |
+| 1.3.5 Identify Input Purpose | AA | Appropriate `autocomplete` tokens for user-data fields |
+| 1.4.1 Use of Color | A | Color is not the only information channel |
+| 1.4.3 Contrast (Minimum) | AA | Text contrast thresholds are met |
+| 1.4.4 Resize Text | AA | Content remains usable at 200% text resize |
+| 1.4.10 Reflow | AA | Reflow at narrow viewport without two-dimensional scroll |
+| 1.4.11 Non-text Contrast | AA | Component boundaries/icons/focus indicators are distinguishable |
+| 1.4.12 Text Spacing | AA | Increased spacing does not break content/function |
+| 1.4.13 Content on Hover or Focus | AA | Hover/focus content is dismissible, hoverable, persistent |
+
+## Principle 2: Operable
+
+| SC | Level | Audit Focus |
+| --- | --- | --- |
+| 2.1.1 Keyboard | A | All functionality operable via keyboard |
+| 2.1.2 No Keyboard Trap | A | Focus can enter and leave all components |
+| 2.1.4 Character Key Shortcuts | A | Single-character shortcuts are safe/controllable |
+| 2.4.1 Bypass Blocks | A | Mechanism exists to bypass repeated blocks |
+| 2.4.2 Page Titled | A | Document/page has descriptive title |
+| 2.4.3 Focus Order | A | Focus sequence follows meaningful operation |
+| 2.4.4 Link Purpose (In Context) | A | Link purpose is clear from text/context |
+| 2.4.6 Headings and Labels | AA | Headings/labels clearly describe purpose |
+| 2.4.7 Focus Visible | AA | Visible focus indicator for keyboard users |
+| 2.4.11 Focus Not Obscured (Minimum) | AA | Focused element is not fully hidden |
+| 2.5.3 Label in Name | A | Accessible name includes visible label text |
+| 2.5.7 Dragging Movements | AA | Drag interactions have non-drag alternatives |
+| 2.5.8 Target Size (Minimum) | AA | Pointer targets meet minimum size/spacing |
+
+## Principle 3: Understandable
+
+| SC | Level | Audit Focus |
+| --- | --- | --- |
+| 3.1.1 Language of Page | A | Correct `lang` on root document |
+| 3.1.2 Language of Parts | AA | Language changes are marked in content |
+| 3.2.1 On Focus | A | Focus alone does not trigger unexpected context change |
+| 3.2.2 On Input | A | Input alone does not trigger unexpected context change |
+| 3.2.3 Consistent Navigation | AA | Repeated navigation mechanisms are consistent |
+| 3.2.4 Consistent Identification | AA | Same functions are identified consistently |
+| 3.2.6 Consistent Help | AA | Repeated help mechanisms are consistently positioned |
+| 3.3.1 Error Identification | A | Errors are identified in text |
+| 3.3.2 Labels or Instructions | A | Inputs include labels/instructions |
+| 3.3.3 Error Suggestion | AA | Suggested correction is provided when possible |
+| 3.3.4 Error Prevention (Legal, Financial, Data) | AA | Reversible/confirmable/validated submissions |
+| 3.3.7 Redundant Entry | A | Re-entry burden reduced where possible |
+| 3.3.8 Accessible Authentication (Minimum) | AA | Authentication avoids inaccessible cognitive tests |
+
+## Principle 4: Robust
+
+| SC | Level | Audit Focus |
+| --- | --- | --- |
+| 4.1.2 Name, Role, Value | A | UI controls expose name, role, state/value correctly |
+| 4.1.3 Status Messages | AA | Dynamic status is conveyed programmatically |
+
+## W3C Tooling Complements
+
+Use W3C validators from https://www.w3.org/developers/tools/ as supporting checks:
+
+- Nu HTML Checker
+- CSS Validator
+
+These checks complement, but do not replace, manual WCAG behavior verification.