skills.rest
jonaseck2
jonaseck2COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Standardize Vue 3 UI layouts, pagination, and theme-safe styling.

2|Updated Apr 2, 2026
Search Tags:#ui layout#frontend patterns#vue 3#infinite scroll#theming tokens#export invariance#resizable panels
One-click install
npx skills add https://github.com/jonaseck2/slaktforskning --skill frontend-design-jonaseck2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jonaseck2/slaktforskning/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/jonaseck2/slaktforskning --skill frontend-design-jonaseck2

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents UI regressions and inconsistent layouts by standardizing how new Vue 3 views, components, and modals are structured, styled, paginated, and made export-safe in Släktforskning.

Core Features & Use Cases

  • Three-sheet paneled layout: Ensures every paneled view follows the same app-shell routing, sheet flex layout, and right-side resizable panel behavior.
  • Deterministic list UX: Guarantees infinite scrolling with usePagedList, correct server-side filtering/sorting, required summary counts, and mandatory sentinel-driven pagination.
  • Accessible, theme-safe styling: Enforces token-based colors (no hardcoded hex), consistent form field styling, WCAG contrast expectations, and export invariance for PDFs/SVGs.
  • Modal picker correctness: Standardizes tree/list picker behavior so filters don’t explode IPC calls and picker lists use the same paged, count-labeled infinite-scroll pattern.

Quick Start

Use this skill while implementing a new renderer view or UI change by following the three-sheet layout, list pagination, and theme/export rules described in the guide.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement infinite scroll with server-driven filtering in Vue 3?▼

Vue 3 infinite scroll uses the `usePagedList` pattern with sentinel-driven pagination to handle server-side filtering, sorting, and summary counts deterministically. This prevents pagination bugs by ensuring the UI requests data correctly as users scroll, maintaining accurate list counts throughout.

How do I structure paneled layouts with resizable panels in a Vue 3 desktop app?▼

Paneled layouts in a Vue 3 desktop app use a three-sheet contract with app-shell routing, sheet flex layout, and right-side resizable panel wiring. This standardizes view structure so every paneled screen follows consistent flex behavior and routing.

How do I make Vue 3 charts and SVGs export-safe with theme invariance?▼

Export-safe Vue 3 charts and SVGs use pinned or export color mechanisms with token-based styling to ensure theme invariance during PDF or SVG export. This prevents color regressions by avoiding hardcoded hex values and enforcing export-safe surfaces.

Why do my Vue 3 modal tree pickers cause excessive IPC calls when filtering?▼

Modal tree picker filters cause excessive IPC calls when they bypass the standardized paged, count-labeled infinite-scroll pattern. Applying the correct `usePagedList` sentinel pattern ensures picker lists filter efficiently without exploding IPC requests.

Does Vue 3 theming support WCAG contrast compliance with token-based styling?▼

Vue 3 theming supports WCAG contrast compliance by enforcing token-based colors instead of hardcoded hex values. This approach guarantees consistent form field styling and meets accessibility contrast expectations across all exported surfaces.

Related Skills

Explore More Design & Creative Skills→
jamesulipjamesulip

shadcn-app-shell

Build a persistent Laravel + Inertia + Vue application shell with navigation and CRUD conventions.

Community
Intermediate
nullhacknullhack
11

design-colors

Select and validate WCAG-compliant primary and accent color palettes for branding.

Community
Intermediate
Yoriichi-DangYoriichi-Dang

design-system-patterns

Codify design tokens, theming, and component APIs for scalable design systems.

Community
Advanced
jiaiyanjiaiyan
21

el-infinite-scroll

Load more data automatically when users scroll to the bottom of Vue lists.

Community
Intermediate