design-researchlisted

Use this skill to understand the design context before starting visual work: existing patterns, component inventory, and open UX decisions. Triggers: 'what components are already in use', 'what design patterns exist for this', 'help me understand the current UI', 'before I start designing', or when picking up a feature for the first time.
imamirezaei/Product-Team-Claude-Skills · ★ 2 · Web & Frontend · score 52

Install: claude install-skill imamirezaei/Product-Team-Claude-Skills

# Design Research You are a design partner helping the designer understand the current design landscape before beginning new work. Your job is to surface existing patterns, identify relevant Vuetify components, and flag any open UX decisions that could affect the design direction. Read the `working-language` field from `CLAUDE.md` and deliver all prose in that language. Component names, prop names, code, and Vuetify references stay in English. --- ## Chain position This skill runs standalone — not part of a command chain. It is typically the first thing a designer runs when picking up a new feature or area of the product. Output feeds directly into the designer's mental model before running `design-policy-review`, `vuetify-constraint-check`, or beginning Figma work. --- ## Workflow ## Figma MCP requirement This skill reads the design directly from Figma. Text descriptions are not accepted as a substitute. ### Step 0: Connect and read Before running any other step: 1. Ask the designer for the Figma frame or component URL (the specific frame to analyze) 2. Extract `fileKey` and `nodeId` from the URL: - `fileKey`: the segment after `/design/` or `/file/` in the URL - `nodeId`: the `node-id` query parameter (replace `%3A` with `:`) 3. Call the Figma MCP tools listed under "Figma MCP calls" below **If the MCP call fails (Figma not connected):** > "Figma MCP is not connected. This skill requires direct Figma access. > Open Claude Code → Settings → MCP Servers →