Skill UI

Automated Frontend Development assistant that guides bundle size analysis, optimization best practices, and production-ready code/config setup for React, Vue, CSS, and performance workflows.

This comprehensive skill uses industry-standard tools like Prettier to automatically format and validate code files across multiple languages (JavaScript, TypeScript, JSON, CSS, Markdown, etc.). It ensures code style consistency, improves readability, and helps maintain a clean, professional codebase. Use it when needing to "format my code," "check formatting," or enforce code style across a project.

Automated skill providing code splitting guidance for frontend development, covering React/Vue/CSS, modern performance and accessibility best practices, and producing validated, production-ready configurations.

Automates css module generator workflows, offering best-practice guidance, code samples, and validation for production-ready frontend modules when working with React, Vue, or accessibility-focused builds.

A powerful AI tool designed for complex, coordinated programming tasks. It enables developers to generate, refactor, and scaffold entire features across multiple files (e.g., schema, API routes, service layers, tests) while maintaining consistency with existing codebase patterns. It supports agent mode for autonomous, multi-step changes and allows systematic migration and review of all affected files via detailed diffs.

A comprehensive guide for migrating web scraping pipelines from tools like Puppeteer, Playwright, and Cheerio to Firecrawl. This skill demonstrates how to replace complex, browser-intensive code with simple API calls, handling single-page scraping, structured data extraction using LLMs, and large-scale site crawling, while eliminating the need for manual browser management and anti-bot workarounds.

This expert specializes in scaffolding complete, production-ready, accessible, and performant React and React Native components. It generates full boilerplate code including TypeScript definitions, unit tests, styles (CSS Modules, Styled-Components, Tailwind), and accessibility hooks, ensuring adherence to modern best practices for scalable frontend architecture.

A modern, dark-themed UI component library built with React, Tailwind CSS, and Framer Motion. It provides a comprehensive set of components and styles ideal for developing professional dashboards, admin panels, and data-rich applications. Features include advanced glassmorphism effects and tasteful, smooth animations to enhance user experience.

This skill guides the creation of structured, importable JSON templates for the Obsidian Web Clipper. It facilitates the analysis of a target website's content structure, including DOM, Schema.org data, and CSS selectors. Users can map complex web elements into a robust template format, incorporating advanced logic like conditionals and loops, ensuring the resulting clipboard data is consistently formatted and ready for immediate use.

A comprehensive guide for developers to diagnose and fix the six most common errors encountered when building Obsidian plugins. It covers critical technical issues such as null pointer exceptions, manifest loading failures, incorrect CSS paths, command registration timing, and state persistence bugs, ensuring reliable and stable plugin functionality.

Automates Open Graph metadata guidance for frontend workflows, offering best practices, React/Vue/CSS tips, and ready-to-apply code.

Optimizes Astro projects with critical CSS inlining, asset compression, font-loading tweaks, third-party deferment, and LCP/image preload strategies aimed at sustaining 95+ Lighthouse scores.