How do I install the Cursor Designer Dev skill?

Run npx skillmds@latest add igrlebed/cursor-designer-dev in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Cursor Designer Dev safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Cursor Designer Dev?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Cursor Designer Dev free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Cursor Designer Dev?

igrlebed (@igrlebed) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Cursor Designer Dev by igrlebed — Agent Skill

Name: Cursor Designer Dev
Author: igrlebed

File contents

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.

---name: cursor-designer-devdescription: 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).---# 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`.

Frequently asked questions

Cursor Designer Dev