Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests. Also use when editing components where spatial context (element identity, DOM references, layout data) supplements text instructions.
When visual context accompanies a change request (element selections, annotations, screenshots), make targeted, minimal edits. Precision over ambition: change exactly what was indicated, preserve everything else.
Process
When visual context is provided:
IDENTIFY - What exact element(s) were indicated? Which component file owns them?
SCOPE - Change ONLY what was pointed at. Don't refactor surrounding code.
PRESERVE - Keep existing styles, classes, and behavior. Only modify what was asked.
TARGETED - Make the minimal CSS/markup change that achieves the visual result.
VERIFY - Confirm the change renders correctly without side effects.
Key Principles
Precision Over Ambition
Visual context gives a SPECIFIC element. Don't:
Refactor the entire component when only one style was requested
Change the component's API when only its appearance was pointed at
Touch logic when only visuals were selected
Do:
Find the exact file and line for the selected element
Make the minimal edit that achieves the described visual change
Preserve all existing behavior, event handlers, accessibility
Multiple Edits
When multiple visual edits arrive:
Each targets its own element independently
Don't wait for one to finish before processing another
If two edits conflict (same element, different requests), handle the most recent
Common Mistakes
Rewriting an entire component when the user pointed at one button
Changing global config when only one element's color needs adjusting
Breaking responsive behavior by adding fixed widths to match a selection
Ignoring specificity (user indicated ONE card, agent changed ALL cards)
Removing accessibility attributes (aria-*, role, tabindex) during visual edits
typescript-advanced-typeswshobsonMaster TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.84.3 k84.3 k instalaciones en skills.sh0
tailwind-design-systemwshobsonBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.67.3 k67.3 k instalaciones en skills.sh0
nodejs-backend-patternswshobsonBuild production-ready Node.js backend services with Express/Fastify, implementing middleware patterns, error handling, authentication, database integration, and API design best practices. Use when creating Node.js servers, REST APIs, GraphQL backends, or microservices architectures.47.1 k47.1 k instalaciones en skills.sh0
brand-landingpagewshobsonBrand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead.39 k39 k instalaciones en skills.sh0
nextjs-app-router-patternswshobsonMaster Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.31.4 k31.4 k instalaciones en skills.sh0
