/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.

BOOST

xiaolai@xiaolai

GitHub

From plugin

vmark

78719 skills9 agents7 commands1 MCP

Install

$ npx -y skills add xiaolai/vmark --skill react-app-dev --agent claude-code

How 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.
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.md

name: 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`.

Read it on GitHub ↗

Ships withvmark

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.

Get the whole plugin

Stats

TypeScript Node React Tailwind CSS

+7 tags

Rust Git GitHub GitHub Actions Markdown Anthropic MCP

793

Stars

124

Forks

Active

Maintenance

TypeScript