17 skills · sorted by relevance
Review CSS color definitions and convert palettes to oklch(), a color format designed around human perception. Use consistent lightness steps to build color scales, dark-mode palettes, and interaction states, with guidance for wide-gamut displays.
Supports palette creation and contrast checks using color science references. It also covers color naming, pigment mixing, and historical color theory, helping you explore color choices for design and creative work.
Add purposeful color to monochromatic interfaces so key actions, statuses, and categories are easier to recognize. Refine backgrounds, text, and charts around a consistent palette while checking contrast and avoiding reliance on color alone.
This skill should be used when the user asks to "build a color palette for a motion piece", "make a gradient background", "animate a color transition", "interpolate colors smoothly", "fix muddy/gray gradients", "convert colors to OKLCH", "color-grade a video for mood", "fix washed-out After Effects renders", "gamma shift", "Rec.709 vs sRGB", "colors shifted after rendering", or "match preview to final video". Covers palette construction, gradients, perceptual interpolation (OKLCH/Lab), grading order, and video/render color management.
The English summary is being prepared. Showing the original description.
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
The English summary is being prepared. Showing the original description.
Install, customize, and compose shadcn/ui components with design-system awareness. Covers CLI v4, custom registries, Tailwind v4 OKLCH theming, components.json, presets, and monorepo setup. Pairs with minoan-frontend-design for creative direction. Triggers on shadcn, install component, shadcn theme, OKLCH colors, custom registry.
The English summary is being prepared. Showing the original description.
Build and extend pd-console — Port Daddy's GPU-native macOS operator console (GPUI 0.2.x, Zed's Rust UI). Covers the render-agnostic Block/Pane(Surface) contract, the two-thread reqwest↔smol refresh pipeline, Taffy flexbox layout, uniform_list virtual scroll, focus + keyboard nav, the OKLCH theme and ICS maritime flag badges, GPUI's missing text-input, and the real feature-gated cargo/CI gate. Use when adding panes, visual polish, or debugging GPUI rendering/layout/focus in core/pd-console. NOT for the TypeScript daemon, generic Rust toolchain/borrow-checker help (use rust-with-claude-code), or non-pd GPUI apps with a different theme/architecture.
The English summary is being prepared. Showing the original description.
Build React interfaces with HeroUI v3, including buttons, forms, cards, and modals. The skill guides installation, component documentation lookup, and light or dark theme configuration using Tailwind CSS v4 and reusable interface components.
Build and review interface color systems with palettes, format conversions, and semantic tokens that name colors by purpose. Measure foreground and background contrast, and identify inconsistent themes, misused color roles, and colors outside the supported range.
Design and refine web interfaces around their audience, tasks, and brand tone. Covers typography, color, layout, motion, accessibility, and performance, with guided techniques for reviewing existing screens and preparing them for release.
Add strategic color to monochromatic or dull interfaces using oklch for perceptually uniform palettes. Generates harmonious color systems with automatic light/dark variants and accessible contrast ratios.
The English summary is being prepared. Showing the original description.
Suede AI design skill for making an interface feel intentional instead of templated: design tokens, color strategy, OKLCH ramps, type scale, fluid type, visual hierarchy, dark mode, spacing, component laws, motion, and source-to-implementation visual QA. Use when asked to design, restyle, polish, or audit a screen; pick colors or fonts; define, fix, or document design tokens; build or repair a dark mode; review a component or a whole design system; or compare a mock, Figma frame, or reference screenshot against a rendered implementation. NOT FOR: a full design-plus-copy build, launch surface, or reference-to-target restyle (use johnny-suede-design); conversion and funnel architecture (use suede-site-alchemy); writing the words themselves (use suede-copy).
The English summary is being prepared. Showing the original description.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers design systems, anti-pattern detection, brand vs product registers, typography, color (OKLCH), spacing, motion, copy, and accessibility. By Paul Bakaus (ex-Google, ex-Disney, ex-Unity). Full version includes 23 sub-commands, CLI detection, Chrome extension, and E2E test suite: npx skills add pbakaus/impeccable
The English summary is being prepared. Showing the original description.
Generate cinematic scrolltelling websites where scroll drives the narrative: Lenis smooth scroll, GSAP ScrollTrigger cinematic section reveals with fluid OKLCH color transitions, Three.js painted-texture shader backgrounds reactive to cursor, scroll, velocity, and chapter progress. Four modes — chapter-reveal (scroll-paced storytelling), painted-backdrop (reactive shader canvas), full-cinema (complete cinematic site), catalog (all shader presets side by side). This skill should be used when building storytelling websites, scroll-driven experiences, cinematic landing pages, or any page where sections reveal as chapters with color transitions and ambient 3D backgrounds. Triggers on scrollytelling, cinematic scroll, scroll-driven storytelling, Lenis smooth scroll, GSAP ScrollTrigger, scroll chapter reveal, scroll color transition, painted shader background, narrative scroll website, premium scroll experience, shader catalog.
The English summary is being prepared. Showing the original description.
Scaffold editorial documentation sites with the Vellum design system — OKLCH palette, Bodoni Moda / Source Serif 4 / Inconsolata typography, warm or dark space theme, 35 semantic components (state cards, parity matrices, entity dossiers, stat stacks, utterance blocks, editorial notes, entity flows, fact blocks, sub-navigation, source lists, debugger panels, ring visualizations, phase timelines, glossaries, subject-intro, stat-bar, hero-image with lightbox, gallery/masonry grid, audio player with Web Audio API). Static HTML, zero build step. Use when building competitive intelligence pages, personal archives, internal documentation, roadmaps, or multi-page static sites that need a designed, non-generic aesthetic.
The English summary is being prepared. Showing the original description.
Anti-AI-slop design system for distinctive, premium interfaces. Bold typography, dark-first #060610, fluid clamp() type, cascade layers + native nesting + container queries, OKLCH color, @starting-style, View Transitions API, DTCG tokens.
The English summary is being prepared. Showing the original description.
Color science: production-level linear sRGB, Oklab, OKLCH gamut mapping. Use when implementing, reviewing or testing color science for React, Vite, Next.js or Perfect_AI projects.
The English summary is being prepared. Showing the original description.