impertio-studio/frontend-design-claude-skill-package

1

frontend-core-architecture Use when starting a frontend project, picking a stack, deciding where a feature belongs in the codebase, or diagnosin…

impertio-studio/frontend-design-claude-skill-package

27

2

frontend-visual-glassmorphism-backdrop Use when building a frosted-glass surface (sticky header, modal overlay, nav bar, card-on-image) with the CSS `backdr…

impertio-studio/frontend-design-claude-skill-package

15

3

frontend-errors-animation-jank Use when diagnosing dropped frames, choppy scroll, stuttering CSS transitions, slow taps, or a regressing INP (Intera…

impertio-studio/frontend-design-claude-skill-package

12

4

frontend-impl-design-tokens Use when structuring a design-token system for a web app or component library, authoring the JSON interchange file pe…

impertio-studio/frontend-design-claude-skill-package

12

5

frontend-impl-typography-system Use when building a typographic system for a product (modular type scale, fluid scaling across viewports, variable-fo…

impertio-studio/frontend-design-claude-skill-package

12

6

frontend-impl-view-transitions-scroll-animations Use when a single-page-app DOM swap needs a Shared-Element transition (old and new states cross-fade with named eleme…

impertio-studio/frontend-design-claude-skill-package

12

7

frontend-agents-design-system-validator Use when auditing a CSS codebase for design-system compliance, reviewing a pull request that touches `.css` / `.scss`…

impertio-studio/frontend-design-claude-skill-package

11

8

frontend-errors-units-rendering-viewport Use when a mobile hero section overflows because of `100vh`, deciding between the small (`svh`), large (`lvh`), and d…

impertio-studio/frontend-design-claude-skill-package

11

9

frontend-impl-popover-dialog-anchor Use when building any surface that lives in the browser top layer : modal confirmations, cookie banners, dropdown men…

impertio-studio/frontend-design-claude-skill-package

11

10

frontend-impl-responsive-layout-fluid Use when building a layout that must look correct from 320px phones to 3840px ultrawide monitors without breakpoint c…

impertio-studio/frontend-design-claude-skill-package

11

11

frontend-perf-animation-gpu-containment Use when a CSS animation or transition feels janky on a real device, when scroll stutters on a long page, when DevToo…

impertio-studio/frontend-design-claude-skill-package

11

12

frontend-a11y-aria-patterns Use when building a UI widget that has no native HTML equivalent (tabs, combobox with custom rendering, listbox with …

impertio-studio/frontend-design-claude-skill-package

10

13

frontend-a11y-focus-keyboard-inert Use when authoring any focusable UI surface : modals, popovers, drawers, tabs, menus, listboxes, comboboxes, toolbars…

impertio-studio/frontend-design-claude-skill-package

10

14

frontend-a11y-motion-contrast-wcag22 Use when shipping a feature that must meet WCAG 2.2 conformance (nine new Success Criteria over 2.1), measuring text …

impertio-studio/frontend-design-claude-skill-package

10

15

frontend-agents-a11y-perf-consistency-auditor Use when auditing a UI component, page, or feature for the three combined failure modes a frontend product can ship :…

impertio-studio/frontend-design-claude-skill-package

10

16

frontend-component-data-tables-command-palette Use when building an accessible data table (semantic markup, sortable columns, sticky header that stays put while use…

impertio-studio/frontend-design-claude-skill-package

10

17

frontend-component-modal-toast-system Use when building a confirm modal, alert dialog, or settings overlay with the HTML `<dialog>` element, building a toa…

impertio-studio/frontend-design-claude-skill-package

10

18

frontend-core-design-philosophy Use when starting a new frontend project, reviewing a landing page that "looks AI-generated", or deciding between a d…

impertio-studio/frontend-design-claude-skill-package

10

19

frontend-core-web-standards-baseline Use when deciding whether a web platform feature is safe to ship, looking up authoritative behavior for HTML / CSS / …

impertio-studio/frontend-design-claude-skill-package

10

20

frontend-errors-cascade-conflicts Use when a CSS rule that should clearly win does not (style not applying despite higher specificity), when `!importan…

impertio-studio/frontend-design-claude-skill-package

10

21

frontend-errors-layout-pitfalls Use when diagnosing the canonical layout failures of modern CSS : a flex child that overflows its parent (the auto `m…

impertio-studio/frontend-design-claude-skill-package

10

22

frontend-impl-web-components Use when authoring a custom HTML element with `customElements.define`, attaching a shadow root with `attachShadow`, d…

impertio-studio/frontend-design-claude-skill-package

10

23

frontend-perf-core-web-vitals-inp Use when measuring or improving Core Web Vitals (LCP, INP, CLS) at the 75th-percentile field-data bar, diagnosing why…

impertio-studio/frontend-design-claude-skill-package

10

24

frontend-syntax-css-cascade-layers-scope Use when organizing a stylesheet's cascade with `@layer`, scoping component styles with `@scope`, isolating third-par…

impertio-studio/frontend-design-claude-skill-package

10

25

frontend-syntax-css-color-modern Use when choosing a color function in CSS, building a shade ladder from a brand seed, blending two colors determinist…

impertio-studio/frontend-design-claude-skill-package

10

26

frontend-syntax-css-container-queries Use when a component's layout has to react to the width or aspect of its own parent rather than the viewport, when ca…

impertio-studio/frontend-design-claude-skill-package

10

27

frontend-syntax-css-grid-subgrid Use when laying out a section that is two-dimensional (rows AND columns matter at the same time), when nested grid it…

impertio-studio/frontend-design-claude-skill-package

10

28

frontend-syntax-css-has-selector Use when styling an element based on a descendant, sibling, or sibling-state condition; building a parent-style-from-…

impertio-studio/frontend-design-claude-skill-package

10

29

frontend-syntax-css-nesting-logical-properties Use when authoring modern CSS without a preprocessor and you need either native nesting (`&` selector, nested `@media…

impertio-studio/frontend-design-claude-skill-package

10

30

frontend-syntax-html5-form Use when authoring any HTML form, validating user input, wiring custom widgets into the form lifecycle, integrating p…

impertio-studio/frontend-design-claude-skill-package

10

31

frontend-theming-dark-light-mode Use when adding dark mode to a website or app, choosing between system-followed-only and user-toggle modes, eliminati…

impertio-studio/frontend-design-claude-skill-package

10

32

frontend-visual-gradients Use when a gradient between two complementary or distant colours looks muddy in the middle, when a two-stop linear gr…

impertio-studio/frontend-design-claude-skill-package

10

33

frontend-visual-micro-interactions Use when designing or implementing hover, focus, and press feedback on buttons, links, and cards; choreographing entr…

impertio-studio/frontend-design-claude-skill-package

10

34

frontend-syntax-html5-semantic Use when picking which HTML element to author for a region or piece of content, when a screen reader cannot find the …

impertio-studio/frontend-design-claude-skill-package

9

35

frontend-syntax-js-es2024-ts-dom Use when writing vanilla JavaScript or TypeScript that touches the DOM in an evergreen-2026 browser, picking an ES202…

impertio-studio/frontend-design-claude-skill-package

9

36

frontend-theming-color-palette-oklch Use when generating a full shade ladder (50, 100, 200, ..., 900, 950) from a single brand seed colour, when a design …

impertio-studio/frontend-design-claude-skill-package

9