claude

[email protected]

Extends developer with the w-task workflow skill (v2 with browser verify) — adds Phase 4c browser-based localhost verification between TDD green and commit. Claude starts the local dev server, uses Chrome DevTools MCP (evaluate_script + screenshots) to verify UI changes at localhost only, then gates on developer review before committing. Requires chrome-devtools-mcp and project.dev_server_command in workflow.yaml. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. v0.4.0 adds the f-setup command (required by f-extract/f-implement — they read .claude/figma.yaml); previously missing so /f-extract could not be configured. v0.5.0 extends the `figma` preset — official Figma MCP suite, four Figma subagents and the always-on figma-fidelity rule — and picks up w-task's engine-aware Phase 3 with its new 3.4 visual parity gate. The f-* skills stay installed as the REST-server fallback.

0 on GitHubby phantien133v0.5.0MITupdated 2 months agoworkflow
/

Plugin [email protected] from marketplace dotclaude in phantien133/dotclaude. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (33)

  • ai-regression-testing

    Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots where the same model writes and reviews code.

  • coding-standards

    Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.

  • continuous-learning-v2

    Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.

  • doc-coauthoring

    Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc

  • f-extract

    Extract all Figma design data (nodes, components, tokens, assets) in one MCP round and write a persistent figma-snapshot.md. Run once per task — downstream steps read the snapshot, never call MCP again.

  • f-implement

    Implement UI components and screens from a figma-snapshot.md file. Never calls Figma MCP. Never generates SVG or approximates icons. Tracks missing assets in figma-assets.md and gates on human export before completing.

  • figma-code-connect-components

    Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code impl

  • figma-create-design-system-rules

    Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma

  • figma-create-new-file

    Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteb

  • figma-generate-design

    Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in

  • figma-generate-library

    Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT

  • figma-implement-design

    Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma ca

  • figma-use

    **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requ

  • figma-verify-parity

    Verify that an implemented screen matches its Figma design 1:1 by rendering it in a real browser and diffing computed styles and assets against the Figma spec. Use after implementing UI from Figma, before opening a PR, or whenever someone says the build "looks a bit off" from the design.

  • figma

    Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

  • github-ops

    GitHub repository operations, automation, and management. Issue triage, PR management, CI/CD operations, release management, and security monitoring using the gh CLI. Use when the user wants to manage GitHub issues, PRs, CI status, releases, contributors, stale items, or any GitHub operational task

  • skill-creator

    Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better t

  • dotclaude-component-picker

    Use when picking, vendoring, porting, or syncing agents, skills, commands, hooks, or rules from any upstream source (ECC = everything-claude-code, anthropic-skills, mcp-servers, wshobson/agents, or other external repos) into this dotclaude project's claudekit/ directory. Trigger on phrases like "pic

  • tdd-workflow

    Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.

  • w-adr

    Phase 2 helper for w-task — append a new Architecture Decision Record entry to the project's ADR doc when impact analysis surfaces a new decision. Generic version of streaming-adr.

  • w-api-doc

    Phase 5 helper for w-task — append/update module api.md with new API operations (GraphQL queries/mutations/subscriptions or REST endpoints) introduced or changed in the current task.

  • w-checkpoint

    Create a standardized TDD checkpoint commit (RED or GREEN) during w-task Phase 4. Updates state.yaml with checkpoint timestamp.

  • w-context-load

    Phase 0b helper for w-task — load module-aware context by reading module README + features/*.md + workflow-links, then write context.md. Generic version of dev-task's streaming-docs-aware context load.

  • w-db-doc

    Phase 5 helper for w-task — write database/<NN>-<module>.md + sub-ERD .puml when DB changes occur. MANDATORY syncs the master ERD on every sub-ERD change — a stale master ERD is considered worse than none.

  • w-doc-gate

    Phase 6 pre-PR gate — verify that every module touched in the current branch has a corresponding doc commit (module README / features / api.md / DB docs / master ERD). Blocks /w-pr if docs lag code. Replaces a post-merge sync hook by enforcing the invariant before PR creation.

  • w-document-build-up

    Bootstrap streaming-docs-style documentation from an existing codebase. 4-phase state machine (Discover → Skeleton → ADR/OQ → Refinement) producing module READMEs, feature records, api.md, database schema docs, sub-ERDs, master ERD, ADR table, and OQ list. Run ONCE per project, BEFORE /w-setup, when

  • w-feature-record

    Phase 5 helper for w-task — create or append features/<feature-name>.md inside the current module doc folder. Tracks per-feature history, design decisions, schema/API, diagrams, and constraints for future features.

  • w-fix

    Lightweight workflow for bug fixes and small changes (1-3 files, <2h). Reads project config from .claude/workflow.yaml. Pass a GitHub issue URL, #N, or free description to start.

  • w-impact-analyzer

    Phase 2 helper for w-task — auto-generate domain-specific impact.md sections (DB / GraphQL / queue / cache) by inspecting schema files referenced in workflow.yaml. Replaces hand-written generic Affected-Files-only impact.md with layer-aware analysis.

  • w-oq-check

    Phase 0b helper for w-task — scan the project's Open Questions doc and surface OQs relevant to the current task. Flags blockers prominently. Generic version of streaming-oq-check.

  • w-task

    Orchestrate a full feature dev workflow with browser verification (intake → context → plan → impact → UI → TDD → browser-verify → docs → PR). Adds Phase 4c localhost browser verification via Chrome DevTools MCP after TDD green. Reads project config from .claude/workflow.yaml.

  • w-test-stubs

    Phase 4 helper for w-task — generate test file skeletons with layer-aware import boilerplate (unit / integration / graphql / bullmq / nestjs / nextjs) from impact.md, so TDD starts with structured RED, not blank files.

  • workflow-setup

    One-time setup wizard that creates .claude/workflow.yaml — the project config consumed by dev-task, quick-fix, and all workflow skills. Run once per project before using any workflow skill.

Slash commands (8)

  • /[email protected]:f-setup
  • /[email protected]:feature-dev

    Guided feature development with codebase understanding and architecture focus

  • /[email protected]:prp-plan

    Create comprehensive feature implementation plan with codebase analysis and pattern extraction

  • /[email protected]:setup-dotclaude-preset-hooks

    Wire or unwire hooks for the installed dotclaude preset. Run when you want to enable or disable individual hooks in settings.json.

  • /[email protected]:w-pr

    Create a GitLab merge request for one repo (main workspace or a submodule) using glab CLI. Reads MR settings + per-repo default branch from .claude/workflow.yaml. Pass a task slug to use plan.md as MR body, --repo/--target to scope a submodule. Runs w-doc-gate first to enforce docs-with-code invaria

  • /[email protected]:w-reset

    Reset a w-task workflow back to phase 0, or wipe the task folder entirely. Reads state root from .claude/workflow.yaml.

  • /[email protected]:w-setup

    One-time setup wizard that creates .claude/workflow.yaml — the project config consumed by w-task, w-fix, and all workflow skills. Spawns code-explorer to survey project structure before asking questions, so suggestions are accurate. Run once per project before using any workflow skill.

  • /[email protected]:w-status

    Show the current w-task workflow state for one or all tasks without advancing it.

Subagents (10)

  • code-architect

    Designs feature architectures by analyzing existing codebase patterns and conventions, then providing implementation blueprints with concrete files, interfaces, data flow, and build order.

  • code-explorer

    Deeply analyzes existing codebase features by tracing execution paths, mapping architecture layers, and documenting dependencies to inform new development.

  • code-reviewer

    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.

  • code-simplifier

    Simplifies and refines code for clarity, consistency, and maintainability while preserving behavior. Focus on recently modified code unless instructed otherwise.

  • figma-asset-fetcher

    Downloads every icon, image, vector and illustration referenced by a Figma spec from the Figma MCP asset endpoint into the project, and writes an asset manifest. Use before or during any Figma-driven UI implementation. Never generates or approximates an asset.

  • figma-context-extractor

    Pulls design context, metadata, variables and screenshots from the official Figma MCP server and writes a compact, exact design spec to disk. Use whenever a task needs Figma data — the raw MCP payloads stay in this agent's context, the caller only gets a file path and a short summary.

  • figma-design-system-mapper

    Maps Figma variables, text styles and components onto the project's existing design tokens and component library, and reports which Figma values have no equivalent. Use before implementing a Figma design so the implementer reuses real components instead of rebuilding them with hardcoded values.

  • figma-visual-verifier

    Renders the implemented UI in a real browser, screenshots it, and compares it against the Figma reference screenshot to produce a concrete defect list (spacing, colour, font size, border, radius, background, icon, asset). Use after any Figma-driven UI implementation, before calling it done.

  • planner

    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.

  • tdd-guide

    Test-Driven Development specialist enforcing write-tests-first methodology. Use PROACTIVELY when writing new features, fixing bugs, or refactoring code. Ensures 80%+ test coverage.

View source on GitHub

More from phantien133/dotclaude

All 31 plugins →

Full-stack NestJS + Next.js development workflow — TDD, Figma design integration, browser verification, and doc governance. Combines the full w-task workflow suite (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the f-* Figma skill suite and Chrome DevTools MCP for localhost UI verification. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. DEPRECATED as of v0.4.0 — superseded by `nextjs-combo`, which is the maintained successor (official Figma MCP suite, Figma subagents, visual parity gate, infra security review). v0.4.0 only extends the `figma` preset so existing installs keep working with w-task's engine-aware Phase 3; no further features will land here. v0.5.0 is likewise a compatibility bump only — it installs the two skills workflow v3 added (`w-codegraph`, `w-acceptance-verify`) so existing installs keep working with the updated w-task. New work belongs in `nextjs-combo`.

48 skills · 8 commands · 11 agents

0

Full-stack NestJS + Next.js development workflow. Combines the w-task state machine (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the official Figma design-to-code suite: figma-context-extractor absorbs the MCP payloads into an exact figma-spec.md, figma-asset-fetcher downloads real icons and images instead of generating them, figma-design-system-mapper resolves Figma values against the project's own tokens and components, and a Phase 3.4 visual parity gate blocks the task until computed styles match the design. Includes Chrome DevTools MCP for localhost verification, the cloud-infrastructure security review checklist, and the terraform MCP server for IaC. Supersedes the deprecated `nestjs-nextjs` preset. v1.1.0 workflow v3: a CodeGraph fast path (`w-codegraph`) lets Phases 0b/2/4 query a code knowledge graph instead of grepping the tree; Phase 4c splits its non-run outcomes and waits out a busy browser MCP before asking the operator rather than self-recording a skip; new Phase 5b (`w-acceptance-verify`) traces every ticket requirement to evidence and compares the UI against the Figma export, fixing findings in at most three committed and re-documented iterations; and Phase 6.3 commits and pushes the final task state into the PR so a finished run never leaves a dirty tree. Requires workflow.yaml v3 — `/w-setup` migrates.

48 skills · 8 commands · 11 agents

0

Full-stack NestJS + Next.js development workflow — TDD, Figma design integration, browser verification, and doc governance. Combines the full w-task workflow suite (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the f-* Figma skill suite and Chrome DevTools MCP for localhost UI verification. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. DEPRECATED as of v0.4.0 — superseded by `nextjs-combo`, which is the maintained successor (official Figma MCP suite, Figma subagents, visual parity gate, infra security review). v0.4.0 only extends the `figma` preset so existing installs keep working with w-task's engine-aware Phase 3; no further features will land here.

46 skills · 8 commands · 11 agents

0

Full-stack NestJS + Next.js development workflow. Combines the w-task state machine (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the official Figma design-to-code suite: figma-context-extractor absorbs the MCP payloads into an exact figma-spec.md, figma-asset-fetcher downloads real icons and images instead of generating them, figma-design-system-mapper resolves Figma values against the project's own tokens and components, and a Phase 3.4 visual parity gate blocks the task until computed styles match the design. Includes Chrome DevTools MCP for localhost verification, the cloud-infrastructure security review checklist, and the terraform MCP server for IaC. Supersedes the deprecated `nestjs-nextjs` preset.

46 skills · 8 commands · 11 agents

0

Extends developer with the w-task workflow skill (v2 with browser verify) — adds Phase 4c browser-based localhost verification between TDD green and commit. Claude starts the local dev server, uses Chrome DevTools MCP (evaluate_script + screenshots) to verify UI changes at localhost only, then gates on developer review before committing. Requires chrome-devtools-mcp and project.dev_server_command in workflow.yaml. v0.3.0 workflow v2: per-repo/submodule default branches (main vs master) via workflow.yaml repos[], terminal one-PR-per-repo Phase 6, and w-setup version detection + auto-migration. v0.4.0 adds the f-setup command (required by f-extract/f-implement — they read .claude/figma.yaml); previously missing so /f-extract could not be configured. v0.5.0 extends the `figma` preset — official Figma MCP suite, four Figma subagents and the always-on figma-fidelity rule — and picks up w-task's engine-aware Phase 3 with its new 3.4 visual parity gate. The f-* skills stay installed as the REST-server fallback. v0.6.0 workflow v3: adds the CodeGraph fast path (`w-codegraph`) for Phases 0b/2/4, splits Phase 4c's non-run outcomes so a browser MCP held by another session waits and then asks the operator instead of being marked skipped, adds Phase 5b acceptance verification (`w-acceptance-verify`) with a bounded fix-commit-redocument loop, and makes Phase 6.3 commit and push the final state into the PR. Requires workflow.yaml v3 — `/w-setup` migrates.

35 skills · 8 commands · 10 agents

0

Full-stack NestJS + Next.js development workflow — TDD, Figma design integration, browser verification, and doc governance. Combines the full w-task workflow suite (intake → context → plan → impact → UI/Figma → TDD → browser-verify → docs → PR) with the f-* Figma skill suite and Chrome DevTools MCP for localhost UI verification.

37 skills · 8 commands · 7 agents

0

Similar plugins

Matt Pocock's agent skills for real engineering (grilling, spec/ticket flows, TDD, code review, domain modelling and more).

39 skills

mattpocock/skills 323,108

superpowers

claudecodex

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

15 skills · hooks

obra/superpowers 316,836

context7

claudecodex

Up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your coding agent's context.

1 MCP server

upstash/context7 64,709

Build powerful, stateful CLI interfaces for any GUI application using the cli-anything harness methodology.

5 commands

HKUDS/CLI-Anything 58,665

Automates browser interactions for web testing, form filling, screenshots, and data extraction

12 skills

vercel-labs/agent-browser 50,373

Use Alibaba Open Code Review from local Codex.

2 skills

alibaba/open-code-review 50,068

Maintain [email protected]?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins31 plugins