Design and audit UI/UX with wireframing, user journey mapping, design system token management, accessibility compliance checks, responsive layout planning, micro-interaction specs, and developer-ready handoff specs.
Design for accessibility following WCAG 2.1 AA standards — color contrast (4.5:1 minimum), focus management, screen reader flow, ARIA landmarks, keyboard navigation, form labeling, and error identification. Use when building inclusive interfaces or auditing existing pages.
Create developer-ready handoff specs with component measurements, design token mapping, interaction states (default/hover/active/disabled/focus), assets export guidelines, animation timing, and implementation notes. Use when a design is approved and ready for development.
Define or extend a design system with tokens (colors, spacing, typography, shadows, radii), component variants, naming conventions, and documentation. Use when establishing visual consistency, onboarding new designers, or auditing token usage across a codebase.
Design micro-interactions including loading states (skeleton, spinner, progress), transitions, hover/focus feedback, empty states, success/error feedback, and animation specs. Use when polishing UX details, defining component behaviors, or specifying animation timing.
Plan responsive layouts with mobile-first approach, breakpoint strategy, touch targets, navigation patterns (hamburger vs tabs vs sidebar), content reflow, image handling, and typography scaling. Use when designing for multiple device sizes or auditing mobile usability.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
105 structured skills for development teams — from planning to release.
Every skill comes with step-by-step guides, flow diagrams, checklists, templates, and anti-patterns.
This repo is a native Claude Code plugin. Install individual packs directly from within Claude Code:
/install-plugin and point it to this repo, or add to your settings.json:{
"plugins": [
{ "source": "https://github.com/heaptracetechnology/heaptrace-skills", "plugin": "heaptrace-dev" },
{ "source": "https://github.com/heaptracetechnology/heaptrace-skills", "plugin": "heaptrace-architect" }
]
}
Install only the packs your team needs. Each plugin is listed in .claude-plugin/marketplace.json.
Clone and copy individual plugin skills to your tool's skills directory.
git clone https://github.com/heaptracetechnology/heaptrace-skills.git
# Copy a specific plugin's skills (e.g. developer pack)
cp -r heaptrace-skills/plugins/heaptrace-dev/skills/* your-project/.claude/skills/
# Copy all plugins at once
for plugin in heaptrace-skills/plugins/*/; do
cp -r "$plugin/skills/"* your-project/.claude/skills/
done
Path: .claude/skills/<skill-name>/SKILL.md
# Copy a specific plugin's skills
cp -r heaptrace-skills/plugins/heaptrace-dev/skills/* your-project/.cursor/skills/
Path: .cursor/skills/<skill-name>/skill.md
Skills are personal tools — don't commit them to your project repo:
echo ".claude/skills/" >> .gitignore
echo ".cursor/skills/" >> .gitignore
Skills are structured instruction files that guide AI coding assistants through specific development tasks. Instead of writing prompts from scratch, skills give consistent, battle-tested processes your entire team can follow.
Client gives a task
→ /suggest (what's missing? what can we add?)
→ /feature-plan (break it down, plan it)
→ /feature-work (build it end-to-end)
→ /code-review (catch issues before PR)
→ /smart-commit (clean commit message)
→ /release-notes (client-ready changelog)
The daily toolkit for every developer.
| Skill | What It Does |
|---|---|
feature-plan | Break requirements into tasks, mockups, and flow diagrams |
feature-work | Build end-to-end: DB → API → UI → Test |
find-fix | Trace bugs: reproduce → isolate → root cause → fix → verify |
smart-commit | Generate semantic commit messages (WHY, not WHAT) |
suggest | Spot gaps and suggest improvements clients didn't ask for |
code-review | 8-pass review: logic, security, perf, naming, tests |
test-gen | Generate tests that catch real bugs, not just pass |
explain | Understand any code before you touch it |
sec-audit | OWASP Top 10, secrets scan, dependency check |
release-notes | Turn git history into client-ready changelogs |
quick-plan | Rapid planning for small, well-scoped tasks |
quick-work | Fast execution mode for clearly defined tasks |
code-standards | Enforce and document team coding standards |
For tech leads managing teams and making architectural decisions.
| Skill | What It Does |
|---|---|
sprint-plan | Break epics into sprints with estimates and assignments |
arch-review | Audit architecture for scalability, coupling, SPOFs |
tech-debt-audit | Find and prioritize tech debt across the codebase |
incident-response | Structured triage, root cause analysis, postmortem |
pr-strategy | Split large features into reviewable PRs |
onboard-dev | Generate onboarding guide for new team members |
perf-audit | Profile slow endpoints, N+1 queries, memory leaks |
decision-doc | Write Architecture Decision Records (ADRs) |
message-craft | Craft clear technical messages and stakeholder updates |
System design, API contracts, and infrastructure planning.
Compliance and security skills for HIPAA, GDPR, SOC2, PCI-DSS audits, infrastructure hardening, incident planning, and secrets management.
Mobile development skills for app releases, mobile APIs, authentication, CI/CD, debugging, offline support, performance, and state management.
QA skills for test planning, E2E testing, API testing, regression checks, bug reporting, load testing, accessibility audits, and test data generation.
Core developer skills for feature planning, code review, testing, commits, and daily development workflows.
Automation QA skills for Cypress testing, CI test pipelines, contract testing, mock services, and visual regression.
npx claudepluginhub heaptracetechnology/heaptrace-skills --plugin heaptrace-designerDesign workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
Design engineering skill + system for AI coding agents: anti-slop UI, outcome recipes, spec-driven design, design-review + a11y agents, MCP quality gates.
Build, document, and maintain scalable design systems — from tokens and components to accessibility and theming.
Design & UX skills: UX Research Plan, Design Critique, Accessibility Audit. Create research plans with discussion guides, critique designs using JTBD and Gestalt principles, and audit for WCAG 2.2 compliance.