Execute a unit of work end-to-end: understand, implement, validate with typecheck and build, then commit. Use when the user wants to do work, build a feature, fix a bug, or implement an issue or phase from a plan. Do NOT use for design-system skill extraction — that flow has its own meta-skill (extract-ds-skill).
npx skills add https://github.com/vercel-labs/ds-skill-extraction-workshop --skill do-work
Execute a complete unit of work: understand it, build it, validate it, commit it.
Read any referenced plan, PRD, or GitHub issue body in full. Explore the
codebase to understand the relevant files, patterns, and conventions.
If the task touches a design system surfaced under .claude/skills/ds/,
that skill's SKILL.md is the source of truth for component selection,
token usage, and wiring rules — read it before writing code.
If the task is ambiguous, ask the user to clarify scope before
proceeding. Do not guess at scope.
Skip when the task is already fully specified end-to-end (e.g., a
locked-down issue body). Plan when scope is open, when you have
multiple viable approaches, or when the task spans more than a couple
of files.
This is a frontend-only workshop — implement directly. No TDD
scaffolding.
Edit code directly. Do not delegate via subagents unless the task
genuinely splits into independent parallel pieces.
Run:
pnpm verify
This runs pnpm typecheck && pnpm build. Fix any failures and re-run
until both pass cleanly.
Husky's pre-commit hook also runs pnpm typecheck as a backstop — but
the build check lives here. Do not rely on the hook to catch build
failures, and do not commit without pnpm verify passing.
If a pre-existing failure outside the scope of this task blocks you,
make the minimal fix to unblock and call it out explicitly in the
commit message under a "Pre-existing fix" section. Never bypass the
hook with --no-verify.
Once pnpm verify passes, commit the work in ONE commit. Use the
project's commit message style — read git log --oneline -n 10 if
unsure.
If the task originated from a GitHub issue, close the issue with a
one-line outcome:
gh issue close <N> --comment "<one-line outcome of what shipped>"
If the task only partially resolves the issue, comment on it instead
of closing:
gh issue comment <N> --body "<what was done, what remains>"
Override: if the prompt or issue body explicitly says the issue
is a shared spec (workshop, template, recurring fixture), do NOT
close or comment — stop after the commit. The issue stays open for
the next runner.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
Take vercel-labs/do-work from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.