/react-app-dev
Implement or modify VMark React UI with project conventions (Zustand selectors, Tailwind v4, shadcn/ui). Use for components, hooks, stores, and UI behavior changes.
$ npx -y skills add xiaolai/vmark --skill react-app-dev --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/react-app-dev
Context preview
The summary Claude sees to decide when to auto-load this skill.
Implement or modify VMark React UI with project conventions (Zustand selectors, Tailwind v4, shadcn/ui). Use for components, hooks, stores, and UI behavior changes.
SKILL.md
react-app-dev.SKILL.mdname: react-app-dev description: Implement or modify VMark React UI with project conventions (Zustand selectors, Tailwind v4, shadcn/ui). Use for components, hooks, stores, and UI behavior changes.
React App Dev (VMark)
Overview
Apply VMark frontend conventions for React 19 + Zustand v5 + Tailwind v4 + shadcn/ui.
Workflow
1) Read relevant files before editing (components, hooks, stores, plugins). 2) Follow the VMark rules in `AGENTS.md` (no store destructuring; use selectors). 3) Keep code files under ~300 lines; split when needed. 4) Prefer local feature boundaries; avoid cross-feature imports. 5) Update tests for new behavior and run `pnpm check:all` when asked.
References
- `references/paths.md` for common source locations and scans.
- Docs map: `dev-docs/README.md`.
The Plain-Text Workspace Where Humans and AI Collaborate Free. Local-first. Format-aware. VMark is the plain-text workspace where humans and AI collaborate.
Repo: xiaolai/vmark
Other skills on vmark.
- /ai-coding-agents
Comprehensive guide for using Codex CLI (OpenAI) and Claude Code CLI (Anthropic) - AI-powered coding agents. Use when orchestrating CLI commands, automating tasks, configuring agents, or troubleshooting issues.
Open skill - /css-design-tdd
Test-driven CSS design system modifications. Run checks before/after CSS changes to verify token usage, variable definitions, fallbacks, and consistency. Use when modifying CSS tokens, fixing design inconsistencies, or auditing CSS architecture.
Open skill - /mcp-dev
Build or update MCP server/client integrations for VMark. Use when configuring MCP servers, adding MCP tools, or updating MCP-related docs and settings.
Open skill - /mcp-server-manager
Discover, register, and verify MCP servers. Use when a user asks to connect/add/install/remove an MCP server, or when you need to manage project MCP configuration.
Open skill - /plan-audit
Audit an implementation against a plan (dev-docs/plans/*). Use when a user asks to check for gaps, logic errors, or missing tests relative to a plan or Work Items.
Open skill - /plan-verify
Verify a completed implementation against a plan by running gates and checking acceptance criteria. Use when the user asks to verify work items or confirm completion.
Open skill