Explorar skills

Generate crisp, high-quality images with perfect typography and precise geometric layouts using HTML/CSS. Use when creating social cards, diagrams, certificates, UI mockups, code screenshots, or any image requiring sharp text rendering, exact alignment, or vector-like precision. AI excels at designing symmetric, pixel-perfect layouts as HTML rather than generating raster images directly. Supports

Use when writing Tailwind classes, fixing spacing issues, reviewing CSS, or auditing Tailwind patterns. Enforces v4 best practices for grid and responsive.

Find and safely remove dead code: unreachable paths, unused exports, unused functions, unused variables, unused CSS selectors, unused npm/pip/cargo dependencies, unused env vars, and commented-out code blocks. Builds full import graph, verifies no dynamic references before removal, runs build and tests after cleanup. Use when trimming bloat, removing unused dependencies, cleaning up after a refact

Build distinctive, production-grade interfaces with Ralph Wiggum velocity. Ships working code — web or mobile — with modern CSS, fluid typography, purposeful motion, and zero generic AI aesthetics. Use when: 'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'frontend build', 'design build'.

Implement complete dark mode for any frontend project. Auto-detects theme system (Flutter ThemeData, Tailwind dark class, CSS variables, MUI, Chakra UI, styled-components), generates a dark color palette with proper surface elevation hierarchy and desaturated brand colors, creates a theme toggle with system preference detection and persistence, migrates all hardcoded colors to theme tokens, handle

任意のURLから動的レンダリング済みのHTML/CSS/JSを取得し、 アニメーション情報を含むデザイン仕様（VANILLA.md と INTERPRETED.md の 2 段階）を自動生成するスキル。 VANILLA.md は推測なしの生抽出、INTERPRETED.md は VANILLA を唯一の入力とした意味付け解釈。 以下の状況で使用: - 「このURL抽出して」「このサイトの仕様取ってきて」 - 「このサイトのデザイン情報取ってきて」 - 「このURLからアニメーション情報抜き出して」 - 「design-extractorで解析して」 - URLと「抽出」「解析」「VANILLA」「INTERPRETED」等のキーワードが同時に来たとき 以下には使用しない: - 「既存ファイルを編集したい」 - 「このデザインを実装して」（実装タスク） - 「アニメーションを作って」（生成タ

Extract, consolidate, and modernize design tokens — oklch color scales, fluid spacing with clamp(), typography scales, motion timing, and shadow depths. Builds a systematic token architecture from scattered values. Use when: 'extract design tokens', 'create design system tokens', 'consolidate styles', 'modernize CSS variables', 'build token system', 'css custom properties', 'theme variables'.

Add purposeful motion to interfaces using modern CSS — scroll-driven animations, view transitions, @starting-style, and GPU-accelerated transforms. Zero JS animation libraries needed. Supports web and Flutter. Use when: 'add animation', 'animate', 'add motion', 'transitions', 'scroll animation', 'page transitions', 'loading animation', 'micro-interactions'.

Complete autonomous design overhaul — tears down dated patterns and rebuilds with modern CSS, proper tokens, purposeful motion, and production-grade quality. The nuclear option for ugly interfaces.

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

Autonomous performance optimization for interfaces — content-visibility, CSS containment, scroll-driven animations replacing JS, view transitions replacing SPA transitions, image optimization, and bundle trimming. Use when: 'optimize UI performance', 'speed up the frontend', 'reduce bundle size', 'improve web vitals', 'optimize rendering', 'make it faster', 'performance audit'.

Statically scan a CSS / single-file HTML / multi-file frontend project for references to undefined CSS custom properties — the silent class of bug where `color: var(--ink-2)` is written but `--ink-2` is never declared in any `:root { ... }` block, and the text renders invisible because `var()` with no fallback resolves to the unset initial value. TRIGGER this skill whenever the user says any of: "