⚗ Research & Roadmap

Testing Coverage Matrix

Orchestra-skills covers a strong baseline across the testing pyramid. The matrix below identifies what's covered, what's partially addressed, and what's missing.

Gap: Fuzz Testing

Gap: Load & Performance

Gap: Chaos & Resilience

Gap: Visual Regression

// e2e/tests/visual.spec.ts
test('dashboard looks correct', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveScreenshot('dashboard.png');
});

Gap: Security

UI/UX Prototyping: Current State

The designing-ui-ux skill is a production-first design loop — it audits, designs, implements, and verifies in the real app. This is the right scope for a production htmx app.

Prototyping is different: it explores and communicates ideas before committing to production code. Goals are speed (3 layouts in an hour), isolation (test a component without the full app), and stakeholder communication (interactive mockups without backend).

Proposed rapid prototyping workflow

1. Read docs/DESIGN.md and app.css for current tokens and palette
2. Generate standalone HTML mockup in docs/prototypes/YYYY-MM-DD-feature/index.html
3. Serve: python3 -m http.server 9999 --directory docs/prototypes/
4. Run screenshot-states.sh to capture stakeholder-share images
5. Iterate on feedback before touching production templates
6. When approved: port styles and structure to htmx templates

The Storybook + Claude Pattern

For JavaScript/React/Vue/Angular frontends (not this htmx repo specifically, but worth documenting for future stacks), the strongest 2026 pattern for UI prototyping is Storybook + Claude Code rather than external tools.

Why Storybook over Lovable / v0.dev / bolt.new

• Prototypes live in the codebase — CI/CD catches regressions automatically
• Uses real production components — no handoff gap between prototype and production
• CLAUDE.md documents the design system; Claude always uses real tokens
• @storybook/addon-mcp exposes list_components, get_component_props, get_component_source as MCP tools

The workflow

1. Install @storybook/addon-mcp — exposes component metadata to Claude as tools
2. Claude queries your component library: list_components, get_component_source
3. Claude writes a Story (ComponentName.stories.ts) with mock data and interaction tests
4. Visual regression testing runs automatically on each story via Playwright
5. Stakeholders view the deployed Storybook (Chromatic / self-hosted) for interactive review
6. When approved: Claude ports the Story's component usage directly to production routes

SPA Module Isolation Pattern

For SPAs, prototyping a new route or module in isolation before wiring it into the router:

1. Create src/prototypes/feature-name/ with a standalone React root (or similar)
2. Wire up Mock Service Worker (MSW) to intercept API calls with realistic fixture data
3. Use an in-memory router for multi-step flows (wizard, tabs, breadcrumb navigation)
4. Import design tokens from the same source as production
5. When approved: promote to src/routes/feature/, remove MSW stubs

This lets Claude Code generate an entire interactive module prototype in a single session, with the user providing feedback on the live prototype before any production routing is touched.

Tools Comparison

The 2026 consensus: prototypes should live in the codebase. External tools create a handoff gap that costs more engineering time than the initial speed gain.

Community Ecosystem

As of 2026, Claude Code skills follow the Agent Skills open standard, meaning skills written here also work (with minor adjustments) in Cursor, Gemini CLI, Codex CLI, and Antigravity IDE. Multiple "awesome" collections have emerged:

Notable Community Skills

Reference: The 24-Skill QA Suite

MiniKao's open-source QA toolkit (2026) is the most complete community testing skill collection. Organized into 8 categories, with three operation modes (full-MCP, partial-MCP, markdown-only):

Bold entries are skills that address gaps not yet covered in skills.

Authoring Best Practices

Naming & Descriptions

Name field

Description field — the most critical part

Claude uses the description to pick the right skill from potentially 100+ available. It must answer: what does it do AND when should I use it. Formula: [Action verb] [what] — Use when [trigger conditions].

✅ Good:
description: >
  Extracts text and tables from PDF files, fills forms, merges documents.
  Use when working with PDF files or when the user mentions PDFs, forms,
  or document extraction.

❌ Bad:
description: Helps with documents

• Always write in third person (injected into system prompt)
• Max 1 024 characters; no XML tags; no reserved words
• Include at least 2–3 specific trigger terms users might type

Anti-patterns to Avoid

Skill Composition Patterns

Skills compose by having explicit boundary rules — each skill states what it does and what it defers to other skills. This prevents overlap and ensures Claude routes to the right specialist.

Orchestra-skills demonstrates this well:

auditing-code-quality boundaries:
  Bugs / correctness         → /code-review (built-in)
  Mechanical simplification  → /simplify (built-in)
  Module structure           → improving-architecture
  Test quality               → hardening-tests

hardening-tests boundaries:
  Creates tests              → practicing-tdd, authoring-tests
  Attacks & strengthens them → this skill
  Product bugs found         → file via tracking system, fix with TDD

exploring-quality boundaries:
  Finds problems             → this skill
  Locks in a11y/visual fixes → authoring-tests
  Schedules filed bugs       → tracking issues

Recommended New Skills

Phased Roadmap

Skill count projection

External resources

• Claude Code Skills Documentation — official reference
• Agent Skills Best Practices — official authoring guide
• Claude Code Commands Reference — full command table
• travisvn/awesome-claude-skills — curated community list
• hesreallyhim/awesome-claude-code — comprehensive list
• rohitg00/awesome-claude-code-toolkit — 135 agents + toolkit
• flight505/storybook-assistant — Storybook + Claude Code
• jeffallan chaos-engineer skill — chaos engineering reference
• agentskills.io — open standard for cross-platform skills