Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By mukiwu
Enforce a disciplined full-cycle development workflow in Claude Code: plan features step-by-step, implement via TDD with 80%+ coverage and auto-improved React/Vue unit tests (Vitest/Jest), run Playwright E2E tests, conduct security-aware code reviews, learn from bugs to prevent recurrence, and apply frontend patterns/standards.
npx claudepluginhub mukiwu/muki-ai-plugins --plugin shipshape-skillsDiagnose and incrementally fix build and type errors with minimal changes. Use when the build is broken, TypeScript reports errors, or CI fails due to compilation issues.
Generate and run end-to-end tests with Playwright. Creates test journeys, runs tests, captures screenshots/videos/traces, and uploads artifacts.
Full development workflow for new features — 10 stages from brainstorming to code review. Use when the user wants to build a new feature, add functionality, or implement a user story. Each stage has its own detailed skill file.
Initialize project for shipshape-skills — generate CLAUDE.md and project-specific skills structure through interactive questions.
Restate requirements, assess risks, and create step-by-step implementation plan. WAIT for user CONFIRM before touching any code.
Build and TypeScript error resolution specialist. Use PROACTIVELY when build fails or type errors occur. Fixes build/type errors only with minimal diffs, no architectural edits. Focuses on getting the build green quickly.
Expert code review specialist. Proactively reviews code for quality, security, and maintainability. Use immediately after writing or modifying code. MUST BE USED for all code changes.
End-to-end testing specialist using Vercel Agent Browser (preferred) with Playwright fallback. Use PROACTIVELY for generating, maintaining, and running E2E tests. Manages test journeys, quarantines flaky tests, uploads artifacts (screenshots, videos, traces), and ensures critical user flows work.
Expert planning specialist for complex features and refactoring. Use PROACTIVELY when users request feature implementation, architectural changes, or complex refactoring. Automatically activated for planning tasks.
Test-Driven Development specialist enforcing write-tests-first methodology. Use PROACTIVELY when writing new features, fixing bugs, or refactoring code. Ensures 80%+ test coverage.
Iteratively write, review, and improve frontend unit tests until quality score >= 9.2. Supports Vue 3 (Vitest + @vue/test-utils) and React (Vitest/Jest + React Testing Library). Auto-triggers when writing or improving unit tests.
當使用者描述程式行為與預期不符時觸發 — 不論是明確說「有 bug」,還是隱含的「為什麼會這樣」「明明應該 X 卻 Y」「這裡怪怪的」。修復後判斷根因是否值得沉澱到 cookbook、memory 或 workflow,防止同類錯誤再次發生。只要使用者的描述暗示了「現狀 ≠ 預期」,就應該考慮觸發此 skill。
Universal coding standards for TypeScript, JavaScript, React, and Node.js. Use when reviewing code quality, enforcing naming and structural conventions, refactoring for maintainability, or setting up a new module. Also triggers when code smells like deep nesting, magic numbers, or unclear naming are detected.
Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies. Use when writing, debugging, or improving end-to-end tests with Playwright. Triggers for any E2E testing task even if Playwright is not explicitly mentioned.
React 前端開發模式,涵蓋 Hooks、狀態管理、Custom Hooks、效能優化與常見反模式。當建構 React 元件、撰寫自定義 Hook、管理狀態或優化效能時觸發。即使使用者沒有明確提到 React patterns,只要涉及 React 開發就應該使用此 skill。
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Visual regression testing — compare Figma designs against live web pages with pixel-level diff and AI vision.
Shared Claude Code plugin for frontend teams, including frontend skills, subagents, hooks, and MCP integration for Figma/Sketch/MasterGo/Pixso/墨刀/摹客. All reports auto-saved as Markdown files.
Visual diff testing with Percy, Chromatic, BackstopJS - catch unintended UI changes
Structured development skills for any project. Provides brainstorming, planning, parallel agent development, browser testing, systematic debugging, and self-improvement workflows.
Focused agentic engineering workflow: design-doc, spec, plan, implement, tdd, refactor, review, address-pr-feedback, browser-verify, explain-visually, compress, branch, and commit.
5つの専門エージェント(backend-reviewer, frontend-reviewer, test-reviewer, security-reviewer, ux-reviewer)がチームでコードレビューするスキル。
Visual regression testing — compare Figma designs against live web pages with pixel-level diff and AI vision.
Channel server for Hyday — bridges note and journal events to Claude Code sessions. When users read or write in their Hyday note-taking app, events are pushed to Claude Code for real-time analysis and response.
Agent skills for Hyday — teach an external CLI agent to correctly read, write, search, and organize notes in a Hyday vault. Covers Hyday-flavored Markdown (frontmatter / inline tags / entities / backlinks), the five Life Log marks for journals, vault folder convention with Step 0 vault-root resolution, and whiteboard operations via a bundled MCP server.
A collection of Claude Code plugins for disciplined development workflows and visual quality assurance.
| Plugin | Description |
|---|---|
| shipshape-skills | Disciplined development workflow — TDD, planning, code review, UIUX review |
| figma-visual-reviewer | Visual regression testing — compare Figma designs against live web pages |
# Add the marketplace
/plugin marketplace add mukiwu/muki-ai-plugins
# Install individual plugins
/plugin install shipshape-skills
/plugin install figma-visual-reviewer
You can install one or both plugins. They work independently but integrate seamlessly — shipshape's /feature workflow automatically uses figma-visual-reviewer for Stage 6 (UIUX Review) when it's installed and a Figma design is available.
Full development lifecycle plugin with TDD enforcement, planning agents, code review, and UIUX review.
/init — Interactive project setup/feature — 10-stage development workflow (brainstorming → code review)/tdd — Test-Driven Development/plan — Implementation planning/build-fix — Build error diagnosis/e2e — Playwright E2E testsPixel-level visual comparison between Figma designs and live web implementations.
/review — Interactive visual reviewWhen both plugins are installed, shipshape's /feature workflow (Stage 6: UIUX Review) automatically selects the best available review mode:
| Priority | Mode | Condition | Review Method |
|---|---|---|---|
| 1 | Figma Diff | figma-visual-reviewer installed + Figma design available | Pixel-level diff + AI vision |
| 2 | Visual Review | claude-in-chrome available | AI 5-dimension visual review |
| 3 | Skip | Neither available | Notifies user, proceeds to next stage |
MIT