michaelalber/design-an-interface
skills/design-an-interface/SKILL.md
Applies "Design It Twice" from APOSD: generates two radically different interface designs for the same problem, then compares them on information hiding, complexity, and cohesion before recommending one. Use when designing a new API, module boundary, or class interface, or asked to "design the interface", "apply design it twice", or "compare interface designs". Ported from https://github.com/mattpocock/skills (Matt Pocock).
development
Updated Apr 26, 2026
$ install --global
skillsauthnpx skillsauth add michaelalber/ai-toolkit design-an-interfaceInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 26, 2026, 12:52 PM106.2s3 files scanned
SKILL.md
- name:
- design-an-interface
- description:
- >
- Applies "Design It Twice" from APOSD:
- generates two radically different interface
- Ported from https:
- //github.com/mattpocock/skills (Matt Pocock).
Apply the "Design It Twice" principle from A Philosophy of Software Design (Ousterhout).
Protocol
1. Clarify the problem
Confirm:
- What does this interface need to do?
- Who are the consumers? How will they call it?
- What complexity must it hide from callers?
2. Generate Design A — narrow and deep:
- Expose only what consumers absolutely need
- Push complexity down into the implementation
- Few methods, each with a clear, complete purpose
3. Generate Design B — different decomposition:
- Choose a meaningfully different abstraction boundary
- May be more explicit, more composable, or more granular
- Must not be a minor variation of Design A
4. Compare on these dimensions:
| Dimension | Design A | Design B | |-----------|----------|----------| | Information hiding (1–5, higher=better) | | | | Method count (lower=simpler) | | | | Conceptual complexity (1–5, lower=better) | | | | Cohesion (1–5, higher=better) | | | | Error surface (1–5, lower=better) | | | | Total | | |
See references/aposd-principles.md for scoring guidance on each dimension.
5. Recommend — state which design is better and why, citing specific APOSD principles. If scores are close, propose a hybrid that takes the best of each.
6. Validate — ask: "Any constraint or use case I missed that would change this?"
Related Skills
michaelalber/security-review-federal
development
VerifiedTrustedCommunity
Federal / government security overlay applied ON TOP OF a base language security review (dotnet/python/php/rust/react). Language-agnostic: adds NIST SP 800-53 control mapping, FIPS 140-2/3 cryptographic compliance (with a per-language crypto table), CUI handling, EO 14028 supply-chain requirements, and DOE Order 205.1B, and emits POA&M-ready findings with FIPS 199 impact levels. Use for federal/DOE/DOD/national-laboratory systems. Triggers on "federal security review", "NIST compliance", "NIST 800-53", "FISMA", "CUI", "FIPS audit", "DOE security", "POA&M", "ATO review". Do NOT use alone — run the matching <lang>-security-review FIRST; this overlay maps and extends it.
SKILL.mdUpdated Jun 4, 2026
michaelalber/react-security-review
tools
VerifiedTrustedCommunity
OWASP-based security review of React / TypeScript front-end applications. Detects the framework (Vite/CRA/Next), entry points, and data flows, scans against the OWASP Top 10 (2025) mapped to React client-side patterns (XSS via raw HTML, URL/protocol injection, secrets in the bundle, insecure token storage, dependency CVEs, missing CSP, open redirects), and produces a manager-friendly executive summary plus a graded technical findings table. Use to audit React code for vulnerabilities. Triggers on "react security review", "frontend security audit", "audit react for vulnerabilities", "owasp react", "react xss", "react security posture", "npm audit review". For federal / gov / DOE / NIST / FIPS / CUI context, run security-review-federal after this base review. Do NOT use to grade architecture/structure — use react-architecture-checklist.
SKILL.mdUpdated Jun 4, 2026
michaelalber/react-modernization-analyzer
tools
VerifiedTrustedCommunity
Analyzes legacy React codebases and produces actionable modernization plans. Primary migration paths include class components to function components + hooks, Create React App to Vite, React 16/17 to 18 to 19, JavaScript to TypeScript, Enzyme to React Testing Library, legacy Redux to Redux Toolkit / Zustand / Context, and deprecated lifecycle/API removal. Does NOT perform the migration — assesses, quantifies risk, and plans. Triggers on phrases like "modernize react", "class to hooks", "upgrade react", "migrate CRA to vite", "react legacy migration", "react 17 to 18", "react js to typescript", "react technical debt", "enzyme to RTL".
SKILL.mdUpdated Jun 4, 2026
michaelalber/react-feature-slice
development
VerifiedTrustedCommunity
Scaffolds feature-based React / TypeScript architecture using feature folders, presentational + container components, custom hooks, a typed data layer, and structural CQRS (query hooks vs mutation hooks). React analog of dotnet-vertical-slice and python-feature-slice — no DI framework; uses props/context for dependency injection and a query cache for server state. Use when creating feature-based React projects, adding React features, organizing components by feature rather than by technical type, or scaffolding a feature's data layer. Triggers on phrases like "scaffold react feature", "create react slice", "react feature folder", "react vertical slice", "add react feature", "react feature architecture", "organize react by feature".
SKILL.mdUpdated Jun 4, 2026