hadat112
21 verified skills
gen-figma
Generate a React component from a single Figma design link using Figma MCP. Use when asked to build a component from Figma, convert Figma to code, or implement a design.
tools
gen-interface
Generate TypeScript interfaces from an API response. Use when asked to create types/interfaces from API data, JSON responses, or backend payloads.
development
gen-figma
Generate a React component from a single Figma design link using Figma MCP. Use when asked to build a component from Figma, convert Figma to code, or implement a design.
tools
gen-interface
Generate TypeScript interfaces from an API response. Use when asked to create types/interfaces from API data, JSON responses, or backend payloads.
development
multi-figma
Generate React components from multiple Figma design links sequentially using Figma MCP. Use when given a list of Figma links to convert to components.
tools
responsive
Add responsive support to an existing component. Use when asked to make a component responsive, add mobile/tablet support, or adapt layout for different screen sizes.
tools
multi-figma
Generate React components from multiple Figma design links sequentially using Figma MCP. Use when given a list of Figma links to convert to components.
tools
responsive
Add responsive support to an existing component. Use when asked to make a component responsive, add mobile/tablet support, or adapt layout for different screen sizes.
tools
multi-figma
Generate React components from multiple Figma design links sequentially using Figma MCP. Use when given a list of Figma links to convert to components.
tools
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
development
responsive
Add responsive support to an existing component. Use when asked to make a component responsive, add mobile/tablet support, or adapt layout for different screen sizes.
tools
gen-interface
Generate TypeScript interfaces from an API response. Use when asked to create types/interfaces from API data, JSON responses, or backend payloads.
development
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
development
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
development
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
development
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
development
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
development
api-defining
Generate TypeScript API client code from cURL commands. Use when asked to create API functions, service endpoints, or define API calls from cURL examples.
tools
api-defining
Generate TypeScript API client code from cURL commands. Use when asked to create API functions, service endpoints, or define API calls from cURL examples.
tools
api-defining
Generate TypeScript API client code from cURL commands. Use when asked to create API functions, service endpoints, or define API calls from cURL examples.
tools
gen-figma
Generate a React component from a single Figma design link using Figma MCP. Use when asked to build a component from Figma, convert Figma to code, or implement a design.
tools