Skills Directory
Claude Skills by fernandokylas
github.com/fernandokylasKeep small and muted text legible by compensating weight, letter-spacing, line-height, and colour as type scales down or sits on a dark ground — ≤14px steps up a weight tier, ≤13px gets open tracking, uppercase labels get 0.08–0.12em, light-on-dark text avoids pure white and gets a weight bump. Use this whenever styling labels, captions, metadata, table cells, badges, form hints, legal/fine print, timestamps, nav links, footer text, or any text under ~0.875rem, and whenever text sits in a dar...
Replace flat grey `1px solid #ccc` borders and dividers with ambient boundaries that respond to their ground — a debossed groove (dark hairline + light highlight) on paper, a 0.5px glowing semi- transparent fiber line on obsidian — built as a masked gradient stroke on a pseudo-element with a per-ground blend mode, plus fading hairline rules and gap-dividers for grids. Use this whenever styling card edges, panel outlines, section dividers, <hr>, table rules, grid separators, sidebar boundaries...
Structure stylesheets with CSS cascade layers — `@layer base, layout, components, utilities;` — so layout utilities (gap, margin, padding, alignment, display) always win over component styles without `!important` or specificity hacks. Use this whenever writing a stylesheet or <style> block longer than a few rules, setting up CSS for a prototype/page/design system, adding utility classes, or debugging "my gap/margin/padding class isn't applying", "the component overrides my utility", "why do I...
Prevent layout shift (CLS) by reserving space before anything arrives — width/height attributes and aspect-ratio on images, video, iframes and embeds; min-height on async data regions, feeds, charts, ad slots and dashboards; font metric overrides so web-font swaps don't reflow; scrollbar-gutter; content-visibility with intrinsic size. Use this whenever generating or reviewing HTML/CSS that includes <img>, <picture>, <video>, <iframe>, embeds, lazy-loaded sections, fetched data, charts, third-...
Two-face typographic system for premium, editorial, magazine-grade UI — a high-contrast serif/display face for H1, H2, hero and section titles, and a clean geometric/humanist sans for body, labels, tables, forms, buttons and metadata — mapped as CSS custom properties with weight, tracking and line-height per role. Use this whenever writing or reviewing CSS/Tailwind/design tokens for headings and body text, picking fonts, building a type scale, or when the page would otherwise default to a sin...
Build front-end prototypes, mockups, landing pages, dashboards, component demos, and interactive UI concepts as ONE self-contained HTML file — a single <style> block in <head>, a single <script> block before </body>, tokens in :root, and every icon/graphic/image embedded inline (SVG or data URI) so the file opens and works with zero external dependencies, bundlers, or missing assets. Use this whenever the user asks for a prototype, mockup, demo, "quick page", "something I can open in the brow...
Replace static px sizes and breakpoint media queries with fluid CSS clamp()/calc() tokens for typography, padding, margins, and gaps that scale smoothly between a 320px mobile floor and a 1200–1440px desktop ceiling. Use this whenever writing or refactoring CSS, Tailwind, styled- components, or design tokens for headings, section spacing, container padding, or grid/flex gaps — including when the user just says "make it responsive", "fluid type", "scale with the viewport", "stop it looking cra...
Keep colour contrast and hierarchy intact when a page flips between light ("paper") and dark ("obsidian") grounds — dark hero on a light site, inverted footer, dark-mode toggle, alternating sections, cards on a dark band. Accent tokens are re-mapped per ground (a deep green *fill* on paper becomes a bright mint *text* colour on dark) instead of being reused as-is, and every text/background pair is checked against WCAG AAA. Use this whenever generating or reviewing CSS/Tailwind/design tokens t...
Choreographed page and section entrances with GSAP timelines — a single master gsap.timeline() per section, elements arriving in reading order with 30–70ms staggers (stagger: 0.03–0.07), power4.out / expo.out easing, and small offsets (y: 15–30) — instead of CSS keyframes firing all at once or scattered gsap.to() calls. Use this whenever the user wants elements to "animate in", "fade in on load", "reveal on scroll", "stagger", "cascade", "waterfall", a "cinematic" or "premium" page load, hero...
Build accordions, disclosures, modals, popovers, dropdowns, toggles, progress bars, and page structure from native HTML5 elements — <details>/<summary>, <dialog>, the popover attribute, <button>, <main>/<nav>/<aside>/<article> — instead of div-and-span components driven by JavaScript state machines and hand-written ARIA. Use this whenever generating or reviewing HTML/JSX for any interactive component or page scaffold, and especially when the user asks for an accordion, FAQ, collapsible, expan...
Build crisp, theme-aware inline SVGs — icons, section dividers/waves, decorative shapes, logos, simple illustrations, chart marks — from clean parametric coordinates instead of icon fonts, external image links, emoji, or text placeholders like "[icon]". Every SVG gets an explicit viewBox, scales with its container, uses currentColor so it inherits the theme, and sits on integer coordinates so strokes stay sharp. Use this whenever HTML/JSX/CSS output needs any graphic: icons in buttons/nav/lis...
Two-column "consultancy ledger" page layout — a narrow left meta rail (headings, dates, labels, metrics) beside a wide right copy column capped at 62ch. Use this whenever building or restyling HTML/CSS/React/Tailwind pages, reports, case studies, docs, briefs, memos, landing pages, or any long-form content where the user wants an editorial, premium, journal-like, consulting-report, or ledger feel — even if they only say "make it look more editorial", "less SaaS", "less dashboard-y", or "like ...
Magnetic hover for high-value controls — an invisible field 20–45px around a nav item, primary CTA, or close button that begins reacting before the cursor reaches the edge, pulls the control's visual up to ~6px toward the pointer along the cursor vector, scales it slightly, and springs it back with a dampened recoil on exit. Use this whenever the user asks for "magnetic buttons", "cursor attraction", "the button follows the mouse", "premium nav hover", "gravity / pull effect", an Awwwards-sty...
Skeleton loading states that mirror the exact layout of incoming content — same grid, same column widths, heading and text bars at the real type sizes with varied widths — with a compositor-only shimmer, a 300ms appear delay so fast loads never flash, aria-busy handling, and a static fallback under reduced motion. Use this whenever UI waits on data or assets: fetch/async rendering, lazy- loaded sections, infinite scroll, image modules, dashboards, feeds, tables, or when the user says "loading...
Make every animation, transition, transform, parallax, scroll effect, GSAP/JS timeline, autoplay video, or smooth-scroll respect `prefers-reduced-motion` — stripping displacement and scale under `reduce` while keeping opacity fades and state changes so nothing disappears. Use this whenever CSS or JS output includes transition, animation, @keyframes, transform, translate, scale, parallax, ScrollTrigger, gsap, framer-motion, scroll-behavior, autoplay, carousels, or hover/entrance effects — even...
Give deep-scroll editorial pages and presentation layouts a weighted, "velvety" scroll feel — parallax planes drifting at reduced velocity factors (0.3 background / 1.0 foreground), scroll-cued arrivals with a heavy-tailed rest curve (cubic-bezier(0.1, 0.9, 0.2, 1), 800ms+), lerp-smoothed decorative layers, gentle scroll-snap decks — all on top of native scrolling, never replacing it. Use this whenever the user asks for parallax, "smooth scroll", "scroll animations", "reveal on scroll", "cine...
Physics-feeling micro-interactions for buttons, cards, list rows, toggles, menus, and modals — ease- out hover-in under 300ms, faster hover-out, a fast :active press with scale(0.97–0.98), and no `transition: all … linear`. Use this whenever writing or reviewing CSS/Tailwind/styled-components that includes :hover, :active, :focus, transition, transform, animation, or any interactive state, and whenever the user says "make it feel premium / tactile / responsive / snappy / alive", "hover effect...
Control how text wraps — `text-wrap: balance` on headings so no single word dangles on the last line, `text-wrap: pretty` on paragraphs for a clean ragged edge, and nowrap/hyphenation/overflow rules for names, dates, units, and URLs. Use this whenever writing CSS for any text-bearing element (headings, hero copy, paragraphs, cards, captions, quotes), setting up base typography, or when the user says "orphan", "widow", "dangling word", "the heading wraps badly", "ragged edge", "uneven lines", ...
Optical balance corrections for UI — align icons to text cap-height instead of flexbox's ascender/descender box, give buttons and pills slightly heavier bottom padding so text doesn't look sunk, and scale circles/triangles up 10–15% so they read as the same size as squares. Use this whenever building or polishing buttons, pills, badges, chips, tags, icon+label rows, nav items, avatars, status dots, play/arrow icons, wordmarks, logos, or any component where an icon sits beside text or a shape ...
Orchestrates the editorial-web-craft skill set to build a new website, landing page, case study, report, dashboard mockup, portfolio, or any HTML/CSS front-end — or to take an existing page and make it feel premium, editorial, and considered instead of templated. Routes the brief to the right skills (ledger layout, fluid type, two-face typography, dual-ground colour, optical polish, tactile motion, native semantics), builds from a self-contained boilerplate, runs the combined audit, and previ...
Replace arbitrary z-index numbers (999, 9999, 99999) with a declared depth matrix — --z-subground (-10), --z-ground (0), --z-rail-sticky (100), --z-navigation (200), --z-disclosure (300), --z-modal (400), --z-critical (500) — plus deliberate stacking contexts (isolation: isolate) at component roots and the browser top layer for dialogs/popovers. Use this whenever writing CSS with position: fixed/sticky/absolute, sticky headers or rails, dropdowns, popovers, tooltips, modals, toasts, overlays,...