ui-react-engineering
React and Next.js engineering guidance for frontend UI implementation.
Skill by hersti
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/hersti-ui-react-engineering
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: design, frontend, backend, data
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/ui-react-engineering
What's inside
- Skill name
ui-react-engineering- Description
- React and Next.js engineering guidance for frontend UI implementation. Use when substantial UI work affects data fetching, server/client boundaries, rendering, rerenders, bundle size, hydration, or performance. Do not invoke for framework-agnostic styling-only work.
- License
- MIT
- Instructions
- 18 lines in SKILL.md · view on GitHub
Files (1)
- SKILL.md
SKILL.md (first lines)
# React / Next UI Engineering Optimize architecture where it materially affects user experience; do not turn every UI task into speculative micro-optimization. Prioritize in this order: 1. eliminate avoidable async waterfalls and serialize less work; 2. keep unnecessary code out of the client bundle; 3. respect Server/Client Component boundaries and avoid broad client islands; 4. avoid duplicate client fetching/listeners and redundant subscriptions; 5. fix rerender causes before adding memoization; 6. preserve hydration correctness and responsive rendering behavior; 7. optimize hot JavaScript paths only when they are real bottlenecks. Prefer parallel independent work, direct imports where barrel imports materially inflate bundles, lazy-load genuinely heavy optional UI, and pass the smallest serializable data surface to client components. Do not add `memo`, `useMemo`, `useCallback`, caching, or dynamic imports as ceremony. Keep component APIs clear and composable; performance complexity must have a reason.
From hersti/ui-engineering, MIT.
More from hersti/ui-engineering
- 0.529score
ui-design-direction
hersti
Context-aware design-direction skill for substantial frontend/UI work across marketing sites, editorial surfaces, product apps, dashboards, admin tools…
SkillBFreshness: BClaude Code +9 - 0.529score
ui-setup
hersti
Prepare the current frontend repository for the UI Engineering workflow.
SkillBFreshness: BClaude Code +9 - 0.529score
ui-doctor
hersti
Diagnose whether the current repository is ready for the UI Engineering workflow without changing files.
SkillBFreshness: BClaude Code +9 - 0.529score
ui-engineering
hersti
Orchestrates substantial frontend and UI work with audit-first context, product-aware design direction, shadcn-aware component engineering, Storybook state…
SkillBFreshness: BClaude Code +9 - 0.524score
ui-motion
hersti
Motion-design and animation-engineering guidance for web UI.
SkillBFreshness: BClaude Code +9 - 0.524score
ui-shadcn
hersti
Project-aware shadcn/ui component engineering for React web projects.
SkillBFreshness: BClaude Code +9 - 0.519score
ui-design-system-audit
hersti
Read-only design-system extraction and consistency audit for an existing frontend.
SkillBFreshness: BClaude Code +9 - 0.519score
ui-verify
hersti
Run evidence-based verification for recent frontend/UI changes using the repository's existing checks, Storybook, Playwright and accessibility tooling.
SkillBFreshness: BClaude Code +9 - 0.519score
ui-storybook
hersti
Storybook engineering guidance for reusable web components, stories, interaction tests, docs, and a11y coverage.
SkillBFreshness: BClaude Code +9 - 0.519score
ui-interface-review
hersti
Independent read-only interface review for substantial frontend work.
SkillBFreshness: BClaude Code +9 - 0.516score
ui-recon
hersti
Read-only reconnaissance of an existing frontend repository and running UI before substantial redesign or design-system work.
SkillBFreshness: BClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Aug 27, 2026 (2 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- MIT
- Repository
- github.com/hersti/ui-engineering
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from hersti
- 0.529score
ui-design-direction
hersti
Context-aware design-direction skill for substantial frontend/UI work across marketing sites, editorial surfaces, product apps, dashboards, admin tools…
SkillBFreshness: BClaude Code +9 - 0.529score
ui-setup
hersti
Prepare the current frontend repository for the UI Engineering workflow.
SkillBFreshness: BClaude Code +9 - 0.529score
ui-doctor
hersti
Diagnose whether the current repository is ready for the UI Engineering workflow without changing files.
SkillBFreshness: BClaude Code +9 - 0.529score
ui-engineering
hersti
Orchestrates substantial frontend and UI work with audit-first context, product-aware design direction, shadcn-aware component engineering, Storybook state…
SkillBFreshness: BClaude Code +9 - 0.524score
ui-motion
hersti
Motion-design and animation-engineering guidance for web UI.
SkillBFreshness: BClaude Code +9 - 0.524score
ui-shadcn
hersti
Project-aware shadcn/ui component engineering for React web projects.
SkillBFreshness: BClaude Code +9
Cite this page
ui-react-engineering skill. Agent Mart. https://agentmart.dev/skills/hersti-ui-react-engineering (last updated 2026-10-24)