القائمة
جمع SkillsMP عدد ٣٦ من skills من Impertio-Studio/Frontend-Design-Claude-Skill-Package. افتح أي skill لمراجعة مصدره وتفاصيله.
عرض ٣٦ من أصل ٣٦ skills مجمعة.
Use when building an accessible data table (semantic markup, sortable columns, sticky header that stays put while users scroll long lists, mobile-safe reflow strategy, row selection with select-all and indeterminate state, virtualised tables that need…
لغة النص الأصلي: الإنجليزية
Use when auditing a UI component, page, or feature for the three combined failure modes a frontend product can ship : WCAG 2 2 accessibility violations, Core Web Vitals (LCP / INP / CLS) regressions, and cross-skill consistency drift (naming, structure, token…
لغة النص الأصلي: الإنجليزية
Use when auditing a CSS codebase for design-system compliance, reviewing a pull request that touches `.css` / `.scss` / `.ts` / `.tsx` / `.vue` / `.svelte` files with style declarations, hunting for hardcoded color / spacing / font-size / radius values that…
لغة النص الأصلي: الإنجليزية
Use when a mobile hero section overflows because of `100vh`, deciding between the small (`svh`), large (`lvh`), and dynamic (`dvh`) viewport-unit families, picking between `em` and `rem` for font-size or component spacing, reasoning about CSS px versus device…
لغة النص الأصلي: الإنجليزية
Use when a CSS rule that should clearly win does not (style not applying despite higher specificity), when `!important` is being escalated as a fix-everything hammer (you are about to lose a specificity war by joining it), when an unlayered author rule…
لغة النص الأصلي: الإنجليزية
Use when diagnosing the canonical layout failures of modern CSS : a flex child that overflows its parent (the auto `min-content` floor), three `1fr` grid columns that refuse to be equal (the same floor), a `position: sticky` element that never sticks…
لغة النص الأصلي: الإنجليزية
Use when a single-page-app DOM swap needs a Shared-Element transition (old and new states cross-fade with named elements morphing between them) without rolling a custom FLIP library, when a multi-page-app navigation should animate seamlessly from one document…
لغة النص الأصلي: الإنجليزية
Use when authoring a custom HTML element with `customElements.define`, attaching a shadow root with `attachShadow`, distributing children via `<slot>`, reacting to attribute changes via `observedAttributes` + `attributeChangedCallback`, server-rendering the…
لغة النص الأصلي: الإنجليزية
Use when building a confirm modal, alert dialog, or settings overlay with the HTML `<dialog>` element, building a toast notification system with the Popover API plus an `aria-live` region, wiring focus restoration after a modal closes, choosing between…
لغة النص الأصلي: الإنجليزية
Use when building a typographic system for a product (modular type scale, fluid scaling across viewports, variable-font axes, web-font loading strategy), when a heading wraps badly with one orphaned word and `text-wrap: balance` is on the table, when…
لغة النص الأصلي: الإنجليزية
Use when building any surface that lives in the browser top layer : modal confirmations, cookie banners, dropdown menus, command palettes, tooltips, date pickers, comboboxes, settings panels, off-canvas drawers, side-sheets. Use when deciding between…
لغة النص الأصلي: الإنجليزية
Use when building a layout that must look correct from 320px phones to 3840px ultrawide monitors without breakpoint cliffs, when fluid typography is needed so headings scale continuously between viewports instead of jumping at media-query breakpoints, when…
لغة النص الأصلي: الإنجليزية
Use when designing or implementing hover, focus, and press feedback on buttons, links, and cards; choreographing entrance / exit animations for modals, popovers, dropdowns, list items, or any dynamic content; choosing an easing curve (Material standard,…
لغة النص الأصلي: الإنجليزية
Use when structuring a design-token system for a web app or component library, authoring the JSON interchange file per the W3C Design Tokens Community Group format, emitting tokens as CSS custom properties, deciding whether a value belongs at the primitive /…
لغة النص الأصلي: الإنجليزية
Use when a gradient between two complementary or distant colours looks muddy in the middle, when a two-stop linear gradient has visible banding on a large surface, when a "mesh" gradient is needed but CSS lacks a native mesh function, when an animated…
لغة النص الأصلي: الإنجليزية
Use when generating a full shade ladder (50, 100, 200, ..., 900, 950) from a single brand seed colour, when a design system needs perceptually-even contrast at each step, when an HSL-derived palette looks visually uneven across hues, when a brand colour…
لغة النص الأصلي: الإنجليزية
Use when building a frosted-glass surface (sticky header, modal overlay, nav bar, card-on-image) with the CSS `backdrop-filter` property, debugging a `backdrop-filter` that silently does not blur, sizing the blur radius for a given content density, verifying…
لغة النص الأصلي: الإنجليزية
Use when adding dark mode to a website or app, choosing between system-followed-only and user-toggle modes, eliminating duplicated `@media (prefers-color-scheme: dark) { ... }` rules with `light-dark()`, fixing a white flash on reload (FOUC), getting…
لغة النص الأصلي: الإنجليزية
Use when measuring or improving Core Web Vitals (LCP, INP, CLS) at the 75th-percentile field-data bar, diagnosing why an interaction misses the 200 ms INP budget, picking a yielding strategy to break up a long task, prioritising the hero image with…
لغة النص الأصلي: الإنجليزية
Use when diagnosing dropped frames, choppy scroll, stuttering CSS transitions, slow taps, or a regressing INP (Interaction to Next Paint) score. Use when reading a Chrome DevTools Performance trace (purple Layout bars, green Paint bars, yellow Scripting),…
لغة النص الأصلي: الإنجليزية
Use when a CSS animation or transition feels janky on a real device, when scroll stutters on a long page, when DevTools shows recurring layout or paint work during interaction, when an animation uses `top`, `left`, `width`, `height`, `margin`, `padding`,…
لغة النص الأصلي: الإنجليزية
Use when building a UI widget that has no native HTML equivalent (tabs, combobox with custom rendering, listbox with rich options, menu/menubar, tree, treegrid, carousel, custom modal) and you need to know which ARIA roles, states, and keyboard model the W3C…
لغة النص الأصلي: الإنجليزية
Use when authoring any focusable UI surface : modals, popovers, drawers, tabs, menus, listboxes, comboboxes, toolbars, grids, trees, or any custom widget that responds to keyboard input. Use when implementing focus styles (`:focus-visible`, `:focus-within`),…
لغة النص الأصلي: الإنجليزية
Use when shipping a feature that must meet WCAG 2.2 conformance (nine new Success Criteria over 2.1), measuring text and non-text contrast against the binding 2.x ratios, deciding how to respect a user's reduced-motion preference in a CSS or View-Transitions…
لغة النص الأصلي: الإنجليزية
Use when writing vanilla JavaScript or TypeScript that touches the DOM in an evergreen-2026 browser, picking an ES2024 grouping / deep-clone / promise / iterator API, typing an event handler, narrowing a `querySelector` or `getElementById` return, or breaking…
لغة النص الأصلي: الإنجليزية
Use when authoring modern CSS without a preprocessor and you need either native nesting (`&` selector, nested `@media` / `@container` inside a rule) or logical properties (`margin-inline`, `padding-block`, `inset-inline-start`, `block-size`, `inline-size`)…
لغة النص الأصلي: الإنجليزية
Use when laying out a section that is two-dimensional (rows AND columns matter at the same time), when nested grid items need to align to lines defined on an outer grid, when card titles or meta rows in a card list refuse to line up across columns, when a…
لغة النص الأصلي: الإنجليزية
Use when choosing a color function in CSS, building a shade ladder from a brand seed, blending two colors deterministically, wiring up dark mode without media-query duplication, or shipping wide-gamut colors with a sRGB fallback. Prevents the most common…
لغة النص الأصلي: الإنجليزية
Use when styling an element based on a descendant, sibling, or sibling-state condition; building a parent-style-from-child relationship in CSS without JavaScript; choreographing form-state styling (`form:has(input:invalid)`); or deciding whether `:has()` or a…
لغة النص الأصلي: الإنجليزية
Use when a component's layout has to react to the width or aspect of its own parent rather than the viewport, when card or panel content collapses or stretches at the wrong breakpoint, when reusable components need to behave differently in a narrow sidebar…
لغة النص الأصلي: الإنجليزية
Use when authoring any HTML form, validating user input, wiring custom widgets into the form lifecycle, integrating password managers / autofill, or deciding between native and custom form controls. Prevents the most common form regressions in 2026 :…
لغة النص الأصلي: الإنجليزية
Use when organizing a stylesheet's cascade with `@layer`, scoping component styles with `@scope`, isolating third-party CSS, taming `!important` chains, or replacing descendant-selector trees with low-specificity scoped rules. Prevents the four standard…
لغة النص الأصلي: الإنجليزية
Use when picking which HTML element to author for a region or piece of content, when a screen reader cannot find the navigation or main content, when an audit reports missing landmarks, or when a search field has no role. Prevents the `<div…
لغة النص الأصلي: الإنجليزية
Use when starting a frontend project, picking a stack, deciding where a feature belongs in the codebase, or diagnosing why a page is slow, janky, or visually unstable. Prevents premature bundling of small zero-build sites, animating non-compositor properties…
لغة النص الأصلي: الإنجليزية
Use when starting a new frontend project, reviewing a landing page that "looks AI-generated", or deciding between a default template pattern and a bespoke alternative. Prevents the AI-generic visual fingerprint (rounded-md gray cards in a 3-column grid under…
لغة النص الأصلي: الإنجليزية
Use when deciding whether a web platform feature is safe to ship, looking up authoritative behavior for HTML / CSS / DOM / JS, or choosing between native feature, polyfill, and `@supports` gating in evergreen-2026 targets. Prevents shipping features that lack…
لغة النص الأصلي: الإنجليزية