feat: configure ui-develop skill

[cuzz-venus]

Jira ticket(s)

VPD-722

Changes

add claude config

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dapp-preview	Ready	Preview	Mar 16, 2026 6:37am
dapp-testnet	Ready	Preview	Mar 16, 2026 6:37am
venus.io	Ready	Preview	Mar 16, 2026 6:37am

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2d3c537

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[greptile-apps]

Greptile Summary

This PR introduces a comprehensive Claude AI agent pipeline (ui-develop) for the Venus Protocol Interface, providing an end-to-end workflow for converting Figma designs into production-ready React/TypeScript components. The configuration spans three top-level skills (ui-develop, ui-i18n, ui-qa), six specialized sub-agents, four reference documents, and two Playwright-based scripts for screenshot capture and interactive testing — all wired together by a feature-scoped artifact directory convention (.ui-develop/ui-develop-{FEATURE}/).

Key additions:

• CLAUDE.md — workspace-level rules ensuring agents read design-system, API-patterns, and code-quality references before generating code
• Reference documents — authoritative guides for design tokens, API layering, i18n patterns, and architecture conventions that keep AI-generated code consistent with the existing codebase
• Agent definitions — ui-plan (Opus), ui-code (Sonnet), ui-i18n, ui-preview, ui-qa-verify (Opus), and ui-qa-fix, each with clear phase boundaries and explicit scope guardrails
• Scripts — ui-screenshot.ts and ui-interaction-test.ts use Playwright for visual and functional verification; a shared utils/image.ts handles image downscaling (macOS-only via sips)
• Infrastructure — .ui-develop added to .gitignore; @playwright/test added to root package.json

Three minor style issues were found: JSON.parse in the interaction test script lacks a try-catch for user-friendly error handling; the image downscaling utility silently no-ops on non-macOS platforms (defeating its stated purpose on Linux CI); and the regression-check step in ui-qa-fix depends on interaction journey steps that are never persisted, which could break the check in a fresh session.

Confidence Score: 4/5

• Safe to merge — all changes are AI tooling configuration and scripts with no impact on application runtime.
• The PR adds only .claude/ configuration files, Playwright scripts, reference docs, a .gitignore entry, and a devDependency. None of these affect the production application. The three issues found are all style-level concerns in the tooling layer (JSON parse error handling, macOS-only image utility, unpersisted regression steps) that don't block merging but would improve robustness of the agent pipeline.
• .claude/scripts/utils/image.ts (cross-platform image downscaling), .claude/scripts/ui-interaction-test.ts (JSON parse error handling), .claude/agents/ui-qa-fix.md (regression check persistence)

Important Files Changed

Filename	Overview
.claude/agents/ui-code.md	Code-generation sub-agent with detailed component patterns, design token guidance, and route safety checks. Well-structured and comprehensive.
.claude/agents/ui-plan.md	Planning sub-agent instructions covering Figma analysis, component decomposition, i18n inventory, and complexity scoring. Comprehensive and well-structured.
.claude/agents/ui-qa-fix.md	QA fix agent that applies review findings, runs linting/tests, and validates regressions. The regression check requires re-running interaction journey steps that are not persisted to disk, potentially causing issues in a fresh session.
.claude/scripts/ui-interaction-test.ts	Playwright-based interactive test runner covering click, fill, assert, and check-console actions. Missing try-catch around JSON.parse for the --steps argument, which would produce an unhelpful raw SyntaxError instead of the user-friendly error messages used elsewhere in parseArgs.
.claude/scripts/utils/image.ts	macOS-only image downscaling helper using sips. Intentionally a no-op on other platforms but this means Claude's image size limit (the stated purpose of the utility) is not enforced on Linux/Windows environments.
.claude/skills/ui-develop/SKILL.md	Main orchestrator skill covering Phases 1-2 (Plan + Code) with dynamic agent allocation, state persistence, and a detailed resume flow. Well-structured multi-phase pipeline.

_{Last reviewed commit: db1fa5d}

[github-actions]

Coverage Report for ./apps/evm

Status	Category	Percentage	Covered / Total
🔵	Lines	76.07%	36153 / 47525
🔵	Statements	76.07%	36153 / 47525
🔵	Functions	59.62%	601 / 1008
🔵	Branches	71.78%	4342 / 6049

File Coverage

No changed files found.

Generated in workflow #12907 for commit 2d3c537 by the Vitest Coverage Report Action

[david-sun-venus]

For i18n, there's an existing script under apps/evm: yarn i18next. If you run it, it will gather all keys used in codebase and generate updated json files, sorted and also removing unused. I think it's easier to let AI run this cmd first and then try to translate what needs to be translated.

[cuzz-venus]

good idea, let me see the behavior by running i18next script.

[cuzz-venus]

@greptile