Frontend skills

This skill guides you through thoughtful web UI design using psychology, layout, typography, color, and accessibility principles to improve user experience.

This skill renders the Jekyll site locally, captures screenshots, and visually verifies CSS and layout changes.

This skill helps you create, run, and debug Playwright e2e tests for the Uniswap web app with automated fixtures and mocks.

This skill creates interactive single-file HTML playgrounds with live preview and prompt output to explore topics visually.

This skill helps you collect user input via a modal UI to clarify preferences, confirmations, or constraints before acting.

This skill helps you scaffold frontend projects, optimize Next.js performance, analyze bundles, and enforce accessibility and quality for React apps.

This skill helps you adopt modern CSS practices for responsive layouts, color systems, and animations, boosting maintainability and visual quality across

This skill sets up zero-dependency hot reloading for MV3 Chrome extensions, automating extension and tab refresh during development.

This skill helps you validate runtime types and switch between TypeBox and TypeMap for fast, standards-compatible schema validation.

This skill updates template catalogs and UI prompts when new infographic templates are added, syncing lists across skill files and prompt references.

This skill generates or updates infographic structure components in TypeScript projects, ensuring layout logic, composition, and correct registration per

This skill generates complete TypeScript infographic item components and registration logic for the repository, ensuring correct layout and compliance with

This skill helps you build interactive geospatial visualizations with AntV L7, rendering large datasets and maps across Mapbox, GaodeMap, or standalone.

This skill helps write folder READMEs by explaining why the folder exists, its mental model, and how to place future code within the structure.

This skill helps you add announcement cards to the Agenta sidebar, enabling timely changelog entries and banners for features and promotions.

This skill helps you style components and pages with Tailwind CSS v3, enforcing project conventions, dark mode, and responsive patterns.

This skill helps you build UI with Flux UI Pro components in Laravel Livewire, replacing HTML elements and accelerating component-driven interfaces.

This skill helps you elevate frontend UI quality by applying a professional design language, reducing common anti-patterns across components.

This skill empowers OpenClaw operators to monitor agents, tasks, and documents with real-time dashboards and automated workflows for enterprise control.

This skill provides a fast, stateless color toolkit for AI agents to generate SVG placeholders, convert colors, and fetch curated palettes.

This skill helps you create polished product demo videos by automating browser interactions and encoding frames into shareable formats.