# Cursor Designer Dev

> Use when writing, refactoring, or architecting code components, composables, hooks, stores, reviewing code quality, extracting business logic, or working on component-level architecture (Vue/Nuxt or React/Next).

- Skill: `igrlebed/cursor-designer-dev` (Agent Skill)
- Install (CLI): `npx skillmds@latest add igrlebed/cursor-designer-dev`
- Raw SKILL.md: https://api.skillmd.com/api/skills/igrlebed/cursor-designer-dev/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: igrlebed (https://skillmd.com/u/igrlebed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/igrlebed/cursor-designer-dev

---


# Development Rules

## Component & Architecture Rules
- Before creating a new component, search existing components in `components/` (and `components/ui` for shadcn).
- Prefer extending existing patterns over inventing new structures.
- Reuse tokens, utilities, and shared components.
- Prefer composition over duplication.
- Do not create giant components (>300 lines is a warning signal).
- Keep business logic outside UI components — composables/stores (Vue) or hooks/lib (React).
- Keep files focused and modular.
- Respect the project UI kit from ARCHITECTURE (Vue: Nuxt UI; React: shadcn / PrimeReact).

## Vue-specific
- Composition API (`<script setup lang="ts">`)
- **Nuxt UI is the visual base** — use `U*` components for chrome and heavy widgets. Do not introduce a second Vue UI library.
- Prefer Soft*/DS atoms only when the **existing** project already has a Soft* layer (legacy). New Vue projects: Nuxt UI, not a parallel Soft* kit.
- Data fetching patterns: see `cursor-designer-data`

### Soft* vs Nuxt UI (legacy projects only)
- If Soft* exists: new atoms/chrome = native Soft* unless the task is to migrate to Nuxt UI.
- **New Soft* → Storybook in the same change**. Soft* without Docs is not done.

## React-specific
- Next.js App Router; default to Server Components; add `"use client"` only when needed
- **shadcn:** extend `components/ui`; do not reinstall duplicates; match existing `cn()` / CVA patterns
- **PrimeReact:** use theme from project; prefer project wrappers over raw imports when wrappers exist
- Prefer existing hooks in `hooks/` / `lib/` before inventing new ones

## Context Handling
- When a file path is provided via @mention, read it before proposing changes.
- When referencing previous work, read the actual file content rather than assuming knowledge from conversation history.
- If the task requires changes in more than 5 files, stop and provide a plan before implementing.
- Exception: planned refactors described in CHANGELOG.md.

## Output Rules
- Show only changed code (diff), not entire file contents.
- After completing, summarize in 1-2 sentences what was done and which files changed.
- Update `/docs/CHANGELOG.md` status if applicable.
- When a task introduces architectural changes, append to `/docs/CHANGELOG.md`.
- When a task resolves a known issue, update `/docs/HANDOVER.md`.
- When a task involves a significant technical choice, append to `/docs/CHANGELOG.md`.