fernandokylas

@fernandokylas source repo

21 skills
0 followers
4 hours ago last updated

▌
Inline Svg Decorator · fernandokylas bundle
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/lists, a hero or footer divider, background decoration, a placeholder logo, arrows/checks/chevrons, or when the user says "add an icon", "make a wave", "section divider", "decorative shape", "use SVG", "no icon library", or the design would otherwise reach for Font Awesome / Lucide / an <img> that doesn't exist.

0 installs
▌
Magnetic Hitbox Warp · fernandokylas bundle
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-style header, or wants primary actions and menu items to feel more alive than a colour snap — and when reviewing hover states on a small set of hero controls.

0 installs
▌
Editorial Type Tokens · fernandokylas bundle
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 single face (Inter, Arial, Roboto, system-ui everywhere) — including when the user says "make it feel premium / editorial / like a magazine / less generic", "font pairing", "what fonts should I use", "typography", or asks for a landing page, report, case study, portfolio, or brand site.

0 installs
▌
Html5 Native Fallback · fernandokylas bundle
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, expandable section, modal, dialog, drawer, dropdown, menu, tooltip, tabs, toggle, or "make it accessible / keyboard-friendly / work without JS" — even if they don't mention semantics. Also use when reviewing markup that has onclick on divs, href="#" links, or role="button" on non- buttons.

0 installs
▌
Layout Editorial Rail · fernandokylas bundle
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 a magazine/report". Also use when the user mentions "editorial rail", "meta rail", "side labels", "two-column typography", or asks to fix line length / readability of body text.

0 installs
▌
Typographic RAG Tuner · fernandokylas bundle
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", "one word on its own line", "make the typography feel polished", or asks for editorial/premium copy layout.

0 installs
▌
Fluid Clamp Calculator · fernandokylas bundle
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 cramped on mobile / huge on wide screens", or asks for a type scale, spacing scale, or design tokens. Also use when reviewing CSS that hardcodes font-size or spacing in px across several breakpoints.

0 installs
▌
Web Craft · fernandokylas bundle
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 previews the result in Chrome DevTools at three widths and under reduced motion. Use this whenever the user asks to build, design, redesign, mock up, prototype, polish, review, or preview a web page or site, says "make it look premium / editorial / high-end / less generic / less like a SaaS dashboard", asks for a landing page or one-pager, or hands over an HTML file to improve — even if they don't mention any of the individual skills.

0 installs
▌
Visual Weight Tuner · fernandokylas bundle
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 sits beside another shape — including when the user says something "looks slightly off", "not quite centered", "icon looks low/high", "button text feels heavy", "make it feel more polished / premium / refined", or asks for a design-system component. Also use when reviewing CSS that relies on align-items: center or symmetric padding for icon-text pairs.

0 installs
▌
Accessible Ink Scale · fernandokylas bundle
Keep 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 dark/inverted section — including when the user says "the small text is hard to read", "looks thin / washed out / blurry", "labels disappear", "fine print", "micro-typography", or asks for a design- system type scale.

0 installs
▌
Cls Dimension Anchor · fernandokylas bundle
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-party widgets, web fonts, or cookie/promo banners — and whenever the user says "layout shift", "CLS", "the page jumps", "content moves when it loads", "Core Web Vitals", "Lighthouse", or "things pop in and push stuff down".

0 installs
▌
Ground Inversion Guard · fernandokylas bundle
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 that involve a dark section, `.dark`/`.inverted` modifier, `prefers- color-scheme`, theme variables, badges/links/buttons on coloured backgrounds, or when the user says "dark mode", "invert this section", "the green looks muddy on dark", "make sure it's accessible", or "contrast".

0 installs
▌
Perceived Latency Mask · fernandokylas bundle
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 state", "skeleton", "shimmer", "placeholder", "spinner", "the page flashes/jumps while loading", "FOUC", "layout shift", or "make it feel faster" — even if they'd otherwise reach for a spinner.

0 installs
▌
Reduced Motion Enforcer · fernandokylas bundle
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 if the user never mentions accessibility — and whenever the user says "reduced motion", "motion sickness", "vestibular", "accessible animations", "a11y", "WCAG 2.3.3", or asks to audit a page's motion.

0 installs
▌
Sub Pixel Inertia Scroll · fernandokylas bundle
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", "cinematic scrolling", "inertia", "Lenis/Locomotive-style" scrolling, watermark/background type that moves, a scroll-snap presentation, or says the page "feels flat/jerky when scrolling" — and whenever reviewing code that hijacks wheel events or moves the whole page with transforms.

0 installs
▌
Z Index Coordinate Matrix · fernandokylas bundle
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, parallax/background layers, or when the user says "z-index", "it's rendering behind/under", "the dropdown is hidden by the next card", "stacking", "overlay order", "the modal is under the header", or any layering bug.

0 installs
▌
Gsap Timeline Orchestrator · fernandokylas bundle
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/section entrance animation, or mentions GSAP, ScrollTrigger, timeline, or intro animation — and whenever a page already has entrance motion that fires simultaneously or feels chaotic.

0 installs
▌
Tactile Interaction Curves · fernandokylas bundle
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", "click animation", "button feedback", "it feels flat / laggy / janky", or asks for a polished interactive component — even if they don't mention motion.

0 installs
▌
Adaptive Luminescent Border · fernandokylas bundle
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, glass/frosted panels, or when the user says "the borders look cheap / flat / heavy", "premium edges", "subtle dividers", "glowing border", "gradient border", "glassmorphism", or asks for a card/panel design on a dark or mixed-ground page.

0 installs
▌
Cascading Specificity Guard · fernandokylas bundle
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 need !important", "specificity war", or "CSS order matters". Also use when integrating third- party or framework CSS (Tailwind, normalize, a vendor stylesheet) alongside custom styles.

0 installs
▌
Encapsulated Mockup Builder · fernandokylas bundle
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 browser", "show me what it'd look like", an artifact/preview, a design handoff, or any front-end that isn't being wired into an existing build system — even if they don't say "single file". Also use when converting a React/Vue/Tailwind snippet into something runnable without npm.

0 installs

21 published skills