frontend▌

This skill provides a complete walkthrough to get GrepAI running and searching your code in 5 minutes.

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Build production-ready MCP servers with the mcp-use framework and automatic widget registration. \n \n Bootstrap with npx create-mcp-use-app and choose from three templates: starter (full-featured), mcp-apps (ChatGPT-optimized), or blank (minimal) \n Define tools, resources, and prompts using Zod schemas with automatic validation and clear parameter descriptions \n Automatically register React widgets from the resources/ folder as MCP Tools and Resources with dual-protocol support for MCP Apps a

$23

Step-by-step guidance for installing tools, configuring dependencies, and verifying development environments. \n \n Covers platform-specific installation instructions for macOS, Linux, and Windows across multiple languages and tools (Node.js, Python, Docker, databases, etc.) \n Includes five-step workflow: identify requirements, check current setup, provide installation commands, configure environment variables and files, and verify everything works \n Provides troubleshooting guidance for commo

Tailwind uses a mobile-first breakpoint system. With over 60% of global web traffic from mobile devices and Google's mobile-first indexing, this approach is essential.

Design shareable generator tools optimized for social virality and identity moments. \n \n Covers generator architectures for name generators, quizzes, personality tests, avatars, and calculators with patterns for deterministic and AI-powered outputs \n Emphasizes minimal input design, screenshot-optimized result cards, and identity-forming outputs that users want to share \n Includes quiz builder patterns with weighted scoring, image-choice questions, and 4–8 distinct result categories for maxi

Mobile UI patterns for React Native with mandatory accessibility standards and platform-specific design. \n \n Enforces non-negotiable accessibility rules: 44pt minimum touch targets, WCAG 2.1 AA color contrast (4.5:1 for text), visible button boundaries, and required accessibility labels for all interactive elements \n Covers iOS Human Interface Guidelines and Android Material Design 3 with platform-specific code for shadows, typography, and spacing \n Includes production-ready component patter

Build tools that solve your own problems first, then expand to others. \n \n Covers the \"scratch your own itch\" methodology: identifying real pain points, validating with the 10-minute test, and evolving from ugly scripts to reliable tools \n Provides CLI tool stacks for Node.js (Commander, Chalk, Ora, Inquirer) and Python (Click), plus distribution strategies from npm to Homebrew \n Includes local-first architecture patterns using JSON files, SQLite, Electron, Tauri, and PWAs for offline-capa

You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with deep understanding of best practices and performance optimization.