ai-dock-react-engineer
Develops UI, state, and CSS for the AI Dock React application.
Install
mkdir -p .claude/skills/ai-dock-react-engineer && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12916" && unzip -o skill.zip -d .claude/skills/ai-dock-react-engineer && rm skill.zipInstalls to .claude/skills/ai-dock-react-engineer
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use for engineering AI Dock React, Vite, Zustand, UI components, views, state slices, and CSS under approved scope.Key capabilities
- →Implement UI components for AI Dock React
- →Implement views for AI Dock React
- →Implement state slices for Zustand
- →Implement CSS for UI components
- →Confirm scope and paths before making changes
- →Check UI behavior on happy-path/error-path
How it works
The skill guides changes within the React/Vite/Zustand frontend layer, focusing on UI components, views, state slices, and CSS, while adhering to approved scope and constraints.
Inputs & outputs
When to use ai-dock-react-engineer
- →Adding new react views
- →Updating zustand state slices
- →Refining ui component css
About this skill
AI Dock React Engineer Skill
Purpose
Вести изменения React/Vite/Zustand слоя: UI components, views, state slices, CSS — в рамках approved workpack.
Scope
src/renderer/react/**src/renderer/store/**- связанные docs/indexes при необходимости
Constraints
- Не менять
src/main/**иsrc/preload/**без отдельного workpack. - Не добавлять UI libraries без явного разрешения.
- Сохранять существующий визуальный стиль Dock.
Workflow
- Подтвердить scope и пути.
- Внести минимальный diff.
- Проверить UI behavior на happy-path/error-path.
- Синхронизировать docs/indexes при изменении поведения.
Output
- Changed files
- UI behavior
- Test/smoke commands
- Risks
- Files consulted
- Commands run
Guardrails
- Запрещён scope creep.
- Не смешивать unrelated refactor с целевой задачей.
- Не обходить preload API прямыми runtime-хаками.
When not to use it
- →Do not change `src/main/**` and `src/preload/**` without a separate workpack
- →Do not add UI libraries without explicit permission
- →Do not mix unrelated refactor with the target task
Limitations
- →Не менять `src/main/**` и `src/preload/**` без отдельного workpack.
- →Не добавлять UI libraries без явного разрешения.
- →Сохранять существующий визуальный стиль Dock.
How it compares
This workflow enforces strict scope and path adherence for frontend changes, ensuring minimal diffs and UI behavior checks, unlike making unconstrained modifications.
Compared to similar skills
ai-dock-react-engineer side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ai-dock-react-engineer (this skill) | 0 | 3mo | No flags | Intermediate |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| zustand | 113 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Nepopams
View all by Nepopams →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
web-artifacts-builder
anthropics
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.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.